feat: support tailwind v4

[heddendorp]

PR Checklist

Please check to confirm your PR fulfills the following requirements:

• [x] The commit message follows our guidelines: https://github.com/angular/angular-cli/blob/main/CONTRIBUTING.md#-commit-message-guidelines
• [ ] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• [ ] Bugfix
• [x] Feature
• [ ] Code style update (formatting, local variables)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] CI related changes
• [ ] Documentation content changes
• [ ] Other... Please describe:

What is the current behavior?

The current integration if for tailwind V3 only.

Issue Number: #28938

What is the new behavior?

Detect if tailwind v4 is used as indicated by the presence of the @tailwindcss/postcss package. If so, check that also tailwindcss is installed. If both are present, Add the tailwind postCSS plugin.

Does this PR introduce a breaking change?

• [ ] Yes
• [x] No

Other information

[pumano]

would be good to have same support for esbuild builder too, not only for webpack

[heddendorp]

would be good to have same support for esbuild builder too, not only for webpack

Agreed, I found what seems to be the correct place here https://github.com/angular/angular-cli/pull/28939/files#diff-c31d390b8683db112fcc30e2ee984d893bdce6bd8e6d7d70c43ecc410a626a3dR489 But I am unsure how to add it correctly for the application builder.

[clydin]

would be good to have same support for esbuild builder too, not only for webpack

The application build system supports custom postcss configuration via either a postcss.config.json or .postcssrc.json file. Note that this can lead to increased build times since postcss is otherwise unused in the application build system and is only enabled if tailwind and/or a postcss configuration file is present.

[sheikalthaf]

@clydin tailwind v4 is getting released next week, it is better have support from day 1

[DominicWrege]

Can't wait to get this feature

[clydin]

If you are interested in updating to or trying out Tailwind v4, ensure the project is using the application build system (default for new projects) and please follow the instructions found in the Tailwind documentation: https://tailwindcss.com/docs/installation/framework-guides/angular

[Kludgy4]

The largest change in Tailwind v4 is the extra speed from their new build system, which we can't fully appreciate with postcss mandated. I'd say it's essential this PR, or a following one, allows us to use tailwindcss without postcss

[Eirmas]

+1 bump

[krasi]

Bump! It's not possible to use Angular with Storybook and Tailwindcss v4 until we get this merged.

this part is the crucial one, if anyone else struggles with the same:

const tailwindPostCSSPackagePath = require.resolve('@tailwindcss/postcss', { paths: [root] });

[utpaulBS23]

Which angular version will we get that tailwindcss 4 supports @jkrems? Waiting for your reply

[hybrist]

Sorry for the delay here! Few things as frustrating as having a PR linger without a clear signal. There were some misunderstandings around the details of the situation which led to a bit of a bystander effect. To sum things up:

• Tailwind v4 works with the application builder in both v19 and v20, using a custom postcss JSON config file.
• Storybook currently requires the use of the browser builder (webpack) for Angular components.
• We have landed https://github.com/angular/angular-cli/pull/30592 which backports support for plugins in a postcss config file to the browser builder. This should go out with the next minor version of v20, so 20.1.0.

At that point, the documented setup for the application builder will also work when using the browser builder. This should hopefully reduce the amount of conflicting instructions across the builders.

It's worth noting that in any case, this is all based on the postcss plugin for tailwind. If there's interest in an integration with Tailwind's lightning css flow (especially if it comes with concrete estimates or even data on the impact on an Angular app), that might be worth as a separate issue.

I'm closing this PR since I believe https://github.com/angular/angular-cli/pull/30592 ensures that apps can make use of tailwind v4 even when they need the browser builder.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}