Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support tailwind v4 #28939

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Conversation

heddendorp
Copy link

@heddendorp heddendorp commented Nov 22, 2024

PR Checklist

Please check to confirm your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • 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
  • No

Other information

@pumano
Copy link

pumano commented Nov 23, 2024

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

@heddendorp
Copy link
Author

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
Copy link
Member

clydin commented Nov 25, 2024

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
Copy link
Contributor

image

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

@DominicWrege
Copy link

Can't wait to get this feature

@clydin
Copy link
Member

clydin commented Jan 23, 2025

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
Copy link

Kludgy4 commented Jan 24, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants