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 ;)