Skip to content

Supporting Tailwind v4 #27585

Closed
Closed

Description

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    area: @angular/buildfeatureIssue that requests a new featureIssue that requests a new featurefeature: insufficient votesLabel to add when the not a sufficient number of votes or comments from unique authorsLabel to add when the not a sufficient number of votes or comments from unique authors

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions