Not able to use tailwind in angular library

[ashutoshtyagi-xyz]

I am trying to use tailwind in a angular library, but facing issues.
https://github.com/ashutoshtyagi-xyz/tailwind4-test

the @import 'tailwindcss' in style is working, but any other class that i am trying to use is not getting created.

clone the repo and follow the readme.

The just expand the button component and select Primary.
Then try to check in developer mode all the things that are coming and that are not.

this is the template i am using

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

only h1 is removed as tailwind presets but the class to increase font, bold and underline are not there.

also the IntelliSense plugin is not working with tailwind 4, as there is no config file now.

I also tried using prefix that is also not working.

TailwindPlay
if you check here, i have given prefix, but not working, if you remove prefix from both html and css, it works.

[wongjn]

For prefix, it is separated by a colon (:), not a hyphen (-): https://play.tailwindcss.com/a2494Zpnym

[ashutoshtyagi-xyz]

I tried with tailwind3, (https://github.com/ashutoshtyagi-xyz/tailwind3-test) there the issue was fixed when i gave the content path in config file, when i tried the same with tailwind4 as config file is allowed, i am getting error
https://github.com/ashutoshtyagi-xyz/tailwind4-test/tree/new-config

info => Starting manager..
info => Starting preview..
info Addon-docs: using MDX3
info => Using implicit CSS loaders
info => Using angular browser target options from "dsx:build"
info => Using angular project with "tsConfig:/Users/atyagi/Documents/Personal/tailwind4-test/projects/dsx/.storybook/tsconfig.json"
=> Failed to build the preview
Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
    at ze (./node_modules/.pnpm/[email protected]/node_modules/tailwindcss/dist/lib.js:36:1984)
    at getStylesConfig (./node_modules/.pnpm/@[email protected]_@[email protected]_@angular+compiler@1_7feff540033c3bf15585118c558e63c5/node_modules/@angular-devkit/build-angular/src/tools/webpack/configs/styles.js:96:66)
    at async Promise.all (index 1)
    at async generateWebpackConfig (./node_modules/.pnpm/@[email protected]_@[email protected]_@angular+compiler@1_7feff540033c3bf15585118c558e63c5/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:64:22)
    at async generateBrowserWebpackConfigFromContext (./node_modules/.pnpm/@[email protected]_@[email protected]_@angular+compiler@1_7feff540033c3bf15585118c558e63c5/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:119:20)
    at async generateI18nBrowserWebpackConfigFromContext (./node_modules/.pnpm/@[email protected]_@[email protected]_@angular+compiler@1_7feff540033c3bf15585118c558e63c5/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:70:20)
    at async exports.getWebpackConfig (./node_modules/.pnpm/@[email protected]_2f2624659dd5fe59020cc76fcbd75413/node_modules/@storybook/angular/dist/server/angular-cli-webpack.js:40:35)
    at async Object.webpackFinal (./node_modules/.pnpm/@[email protected]_2f2624659dd5fe59020cc76fcbd75413/node_modules/@storybook/angular/dist/server/framework-preset-angular-cli.js:20:27)
    at async Object.webpack (./node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@storybook/builder-webpack5/dist/presets/custom-webpack-preset.js:1:3280)
    at async starter (./node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@storybook/builder-webpack5/dist/index.js:1:22249)

[wongjn]

Yes, that'll be due to Angular code that only integrates v3:

  const tailwindConfigPath = await findTailwindConfigurationFile(root, projectRoot);
  if (tailwindConfigPath) {
    let tailwindPackagePath;
    try {
      tailwindPackagePath = require.resolve('tailwindcss', { paths: [root] });
    } catch {
      …
    }
    if (tailwindPackagePath) {
      extraPostcssPlugins.push(require(tailwindPackagePath)({ config: tailwindConfigPath }));
    }
  }

For v4, it should resolve @tailwindcss/postcss.

[ashutoshtyagi-xyz]

Thank you, will raise this concern in angular-cli.

[vinodsantharam]

Hi @ashutoshtyagi-xyz ! I am trying to build a design system with Angular 19 and Tailwind 4. I am facing the same problem. Have you found a way to make it work?

[ashutoshtyagi-xyz]

No I haven't, there has been no update from angular team:
here is the query i posted:
angular/angular-cli#28938 (comment)