Support tailwind v4

[heddendorp]

Command

build

Description

Tailwind v4 is changing the installation and configuration. It would be great to update the cli to make sure v4 is supported.

Describe the solution you'd like

The cli should support the new postcss plugin https://tailwindcss.com/docs/v4-beta#installing-with-post-css
Also detection probably has to be changed as v4 no longer uses js to configure tailwind but instead css variables https://tailwindcss.com/docs/v4-beta#installing-with-post-css
I guess the best detection at this point is having tailwindcss with a version >4 installed and ideally the cli also makes sure @tailwindcss/postcss is installed.

Describe alternatives you've considered

Tailwind also offers a vite plugin, but to my understanding, postcss should be easier to support

[clydin]

Custom postcss configurations are possible with the application build system (default for all new projects). The @tailwindcss/postcss plugin can be used directly by creating a postcss.config.json/.postcssrc.json file and including the plugin.

As tailwindcss v4 moves towards a stable release, we are also evaluating direct inclusion of the optimized pipeline present in the Vite plugin to avoid the need for postcss if preferred.

[pumano]

@clydin looks like vite plugin should be more performant than postcss. If lightingcss will be used under the hood of vite, it's more performant

[dcheglakov]

@clydin I’ve tried following your approach with the postcss.config.json file and enabling Tailwind CSS via PostCSS like this:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

for my Angular 16 project. Unfortunately, it didn’t resolve the issue for me. Maybe there’s something specific to Angular 16 that I might be missing? Thank you.

[clydin]

Custom postcss configuration is only supported with the application build system in v17.2 or higher.

Angular v16 is also no longer supported. Please consider upgrading to a newer and supported version.

[JoepKockelkorn]

I can confirm the postcss.config.json approach works. I did have to install tailwind and its postcss plugin using --legacy-peer-deps due to conflicts.

[Char2sGu]

Custom postcss configurations are possible with the application build system (default for all new projects).

Should this be documented? I would never know about this if I didn't accidentally clicked into this issue. @clydin

[sheikalthaf]

Tailwind v4 is getting release next week and we need to support it from angular is good.

[kyjus25]

Looks like Jan 21 might be the day!

[e-oz]

And it's released!

[e-oz]

Their installation guide for Angular works fine, I was able to make it work in an Angular v19 app following that guide, even with plugins.

It would be nice if we could do it without .postcssrc.json though ;)

[heddendorp]

Their installation guide for Angular works fine, I was able to make it work in an Angular v19 app following that guide, even with plugins.

It would be nice if we could do it without .postcssrc.json though ;)

A small downside here is that the angular cli package complains about using v4

[Kludgy4]

Released! Would be nice to not have to use postcss to also use tailwind. Shouldn't be too hard to support given it uses vite now

we recommend migrating from the PostCSS plugin to our new dedicated Vite plugin for improved performance and the best developer experience:

[bboyle]

this peerDependency is locked to tailwind v2–3: https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/package.json#L84

[matiascamiletti]

this peerDependency is locked to tailwind v2–3: https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/package.json#L84

I have the same error

[quedicesebas]

Same here, can't deploy to Firebase

[dr-schopalopp]

this peerDependency is locked to tailwind v2–3: https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/package.json#L84

would be nice if at least the peer dependency could be updated to ^2.0.0 || ^3.0.0 || ^4.0.0 to avoid using --force or --legacy-peer-deps in pipelines

[rudyhadoux]

With Vite and a new Angular 19.1 app, it fails too.

[rudyhadoux]

It seems the problem is resolved for me, if I add
@reference "tailwindcss" in css/scss files
everywhere there is @apply.

[dr-schopalopp]

thx @clydin for #29495 and #29497

[bugproof]

Tailwind 4 @reference support is far from ideal because angular doesn't allow us to provide custom vite config and we cannot create an alias

stylePreprocessorOptions includePaths is not working with @reference so for custom themes/styles you need to use paths like @reference "../../../../../styles/tailwind.css"

That makes using component styles with @apply a hell and not really an option in angular projects anymore.

If you have a project that uses @apply a lot in component styles TW4 is a no go unless you spend all day removing component styles and using tailwind classes directly inside your templates.

[rudyhadoux]

@bugproof it works for me only with @reference "tailwindcss";

[bugproof]

@rudyhadoux

yes but if you have custom utilities and theme then it doesn't work.

Imagine you define in main.css

@theme {
    --color-primary: red;
}

then if you try to @apply bg-primary with @reference "tailwindcss" it won't work unless you specify path to main.css like @reference "../../../styles/main.css"

Please see https://tailwindcss.com/docs/functions-and-directives#reference-directive

So really for certain angular projects migration from v3 is not so easy.

[rudyhadoux]

@sheikalthaf it is for you.

[EinfachHans]

@bugproof I'm having the same issue, the @reference is quite annoying to put correctly into every style file...

Is this something angular have to fix or is this something for tailwind itself?

[bugproof]

@EinfachHans tailwindlabs/tailwindcss#15778 (comment)

I'm glad I'm not the only one who thinks @reference stuff is garbage - at least when your styles aren't all located in one central location.

Apparently it's possible to create an alias using vite to make it less painful but angular doesn't allow custom vite configs. It's hard to say. I think tailwind team could give us a better solution for this problem. I have no idea. I tried migrating to v4 in one angular project but it turned out to be too painful due to @reference issue and usage of @apply in many component styles. You would basically need to move all your styles to a central location to make this more managable or get rid of @apply stuff where possible - sometimes it's not.

Tailwind team alone should be able to enhance this feature. But angular team also could help to deal with the current issue by adding support for resolve.alias so we could do @reference "main.css" from any path in the project.

For certain projects it can take entire day to port to v4. Right now component styles are useless with how things are.

[clydin]

Unfortunately, the alias suggestion would not be useful in this case since Tailwind performs its own internal stylesheet resolution and its postcss plugin does not currently provide any options to customize its behavior in this regard.

[clydin]

For Tailwind support, the latest patch released today (19.1.5) includes two improvements:

• The peer dependency range has been adjusted to include v4 so the npm related installation errors should no longer occur.
• Component HMR support is now available when adjusting Tailwind class usage within templates. Previously these changes may have resulted in a full page reload instead.

[EinfachHans]

Hey @clydin - thanks for your response!

So the only thing that is left from angular side is the detection of tailwind, that should also work without the "old" tailwind config file?

About the @reference stuff, as you have a deeper understanding of it and why an alias won't work, could you maybe open an issue at tailwind and explain it there?

[bugproof]

@clydin

Is the guide from the official tailwindcss docs still relevant? You need .postcssrc.json and @tailwindcss/postcss package

[clydin]

Yes, the guide (https://tailwindcss.com/docs/installation/framework-guides/angular) is still relevant and accurate. It mentions those packages/files.

[gamoreli]

Hey guys, I am getting an error when trying to run ng test:

An unhandled exception occurred: It looks like you're trying to use tailwindcssdirectly 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.

Any workaround?

[kyjus25]

@gamoreli Could you share your .postcssrc.json?

[gamoreli]

@gamoreli Could you share your .postcssrc.json?

{ "plugins": { "@tailwindcss/postcss": { "optimize": { "minify": true } } } }

[gamoreli]

Apparently we had this issue with other developer some weeks ago, and the issue was move to "Not Planned", I didn't get it. #29690

[geyuqiu]

as currently only v3 is working: https://v3.tailwindcss.com/docs/guides/angular

[ashutoshtyagi-xyz]

I am also facing same issue in angular. I am creating a library in angular and using storybook.
I tried with both tailwind 3 and tailwind 4.
mainly the issue is that angular is not able to trigger tailwind properly to create classes at runtime, but at compile time it's working.
But major issue is that in default setting, only the tailwind default presets are coming, but tailwind is not able to find the classes, as it is not a running application but library using storybook. So now in default settings and configurations, tailwind is not even generating the classes, for that i found one fix that, if i specify the library path in tailwind config it works as like this: (https://github.com/ashutoshtyagi-xyz/tailwind3-test), there the issue was fixed when i gave the content path in config file,

But with the tailwind 4, as default there is no config file, but we can include it which i tried like this:
https://github.com/ashutoshtyagi-xyz/tailwind4-test/tree/new-config

when i tried the same with tailwind4 as config file is allowed, i am getting error:

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)

there is something from this line of code i think is not able to process the config file properly in tailwind4, 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.

If any one has any workaround for this that will be useful.
My target is to have a in-company design system using tailwind, a library that can be integrated in angular projects.

[ashutoshtyagi-xyz]

I am also facing same issue in angular. I am creating a library in angular and using storybook. I tried with both tailwind 3 and tailwind 4. mainly the issue is that angular is not able to trigger tailwind properly to create classes at runtime, but at compile time it's working. But major issue is that in default setting, only the tailwind default presets are coming, but tailwind is not able to find the classes, as it is not a running application but library using storybook. So now in default settings and configurations, tailwind is not even generating the classes, for that i found one fix that, if i specify the library path in tailwind config it works as like this: (https://github.com/ashutoshtyagi-xyz/tailwind3-test), there the issue was fixed when i gave the content path in config file,

But with the tailwind 4, as default there is no config file, but we can include it which i tried like this: https://github.com/ashutoshtyagi-xyz/tailwind4-test/tree/new-config

when i tried the same with tailwind4 as config file is allowed, i am getting error:

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)

there is something from this line of code i think is not able to process the config file properly in tailwind4, 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.

If any one has any workaround for this that will be useful. My target is to have a in-company design system using tailwind, a library that can be integrated in angular projects.

@clydin can you have a look to this, and can reference to me anything where i am wrong.