angular
Support tailwind v4
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
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.
@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
@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.
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.
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.
Custom postcss configurations are possible with the
applicationbuild 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
Tailwind v4 is getting release next week and we need to support it from angular is good.
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 ;)
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.jsonthough ;)
A small downside here is that the angular cli package complains about using v4
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:
this peerDependency is locked to tailwind v2–3: https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/package.json#L84
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
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
It seems the problem is resolved for me, if I add @reference "tailwindcss" in css/scss files everywhere there is @apply.
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
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.
@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?
@EinfachHans https://github.com/tailwindlabs/tailwindcss/issues/15778#issuecomment-2618664046
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.
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.
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.
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?
@clydin
Is the guide from the official tailwindcss docs still relevant? You need .postcssrc.json and @tailwindcss/postcss package
Yes, the guide (https://tailwindcss.com/docs/installation/framework-guides/angular) is still relevant and accurate. It mentions those packages/files.