Supporting Tailwind v4

[inorganik]

Command

build

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Tailwind v4 alpha is out and a stable release is imminent. The new CLI @tailwindcss/cli traverses files in your project and automatically finds the tailwind classes. It works without a tailwind config, which is what the angular builder looks for to support tailwind. The problem is, you have to setup an npm script to invoke the tailwind CLI, and it is seemingly impossible to integrate it into Angular's build process. I've tried lots of weird hacky things.

Alternatively, Tailwind v4 offers a new postcss plugin, but again, there is no way to configure post css in Angular.

Other issues with using Tailwind v4 in an Angular project:

• @angular-devkit/build-angular (v16 and v17) has a peer dependency of "tailwindcss": "^2.0.0 || ^3.0.0",
• Tailwind support is currently baked into the builder, making it impossible to support new major versions of tailwind.

We ought to be able to use the latest and greatest in our Angular projects. As a start we should remove the peer dependency on old versions of tailwind.

We ought to decouple tailwind integration out of this package so it can be configurable by devs.

Minimal Reproduction

I have an angular 16 project here with tailwind v4 installed, you have to use the --force flag to install dependencies because of the incompatible tailwind peer dep. An npm script "tailwind" has to be run separately from the build, so for every style change you have to rerun the command.

Exception or Error

No response

Your Environment

v16 and v17

Anything else relevant?

No response

[alan-agius4]

The Angular application builder supports custom PostCSS configuration files. The builder will automatically detect and use specific postcss configuration files if present in either the project root directory or the workspace root.

To utilize a custom PostCSS configuration:

1. Create a JSON file named either postcss.config.json or .postcssrc.json in your project's root directory. Project-level configurations override workspace-level ones.

2. Define your plugins within this file using either an array or object format:

   Array Form:

   {
     "plugins": [
       "tailwindcss",
       ["rtlcss", { "useCalc": true }]
     ]
   }
   

   Object Form:

   {
     "plugins": {
       "tailwindcss": {},
       "rtlcss": { "useCalc": true }
     }
   }
   

[inorganik]

Thanks @alan-agius4 ! In this comment I had read postCSS config wasn't supported but glad to be wrong about that.

Following these instructions unfortunately I was not able to get v4 working. Here is my postcss.config.json file at the root of my project:

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

The plugin name is from the tailwind docs. I'm not seeing any error messages, but it is not compiling tailwind either. I pushed these changes to the postcss branch of my test repo

[alan-agius4]

@inorganik, custom postcss configuration is only available from Angular CLI versions 17.2 onwards.

[inorganik]

@alan-agius4 The postcss config works great in Angular 17! Only issue now is the peer deps - is there a way to not have to use the force flag for every npm install/build?

[alan-agius4]

You can add legacy-peer-deps=true to an .npmrc file located in your workspace.

[dgp1130]

We had a brief discussion within the team about this today. There's nothing too controversial here just a few different tasks we'll need to land. Tailwind v4 is still in alpha, so I don't think there's anything urgent here, but once it does release we'll want to:

• Update default configuration to use @tailwindcss/postcss.
• Update CSS file detection to look for @import 'tailwind';, since this seems to be an easier way of detecting which files use Tailwind.
• Consider directly supporting Tailwind in @angular/build:application instead of requiring PostCSS, this could give some performance improvments.
• Bump peer dep to include ^4.0.0.

Angular still uses the presence of a Tailwind config file to know whether or not we need to run Tailwind. That probably won't change even in v4, even if Tailwind itself no longer requires a config file.

[angular-robot[bot]]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[alan-agius4]

Tailwind CSS 4 is still in alpha, with no ETA for the stable release. Let's revisit this when it's either close to or officially stable.

[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.}