Tailwind CSS v4.0

[danielritter]

Upgrade Tailwind CSS to version 4.0:
https://tailwindcss.com/blog/tailwindcss-v4

[KumarVijayendra]

When is this being planned?

[jeroenvheel]

Would love to see v4 support because the current implementation is combining classes of all the apps....

[Phhansen]

Not sure what approach would be the best for NX itself. But we got around this particular issue by making our own postcss plugin that uses the createGlobPatternsForDependencies function from nx and adds the @source rules in the css files as required by tailwind 4 to have it register sources.

I couldn't any other good way of doing it.

So I agree, the issue here is pretty important when considering tw4 in an nx setup

[MGREMY]

Yup that could be cool...

[aloksharma1]

current nx 21 also creates tailwind 3.x configs instead can we have a option asking which tailwind version we prefer? or honestly just switch it to tailwind 4.

[CristhianParra]

I just followed the migration guide from tailwind and it's working with the following steps (v21.0.3 using React + Vite)

1. npm install tailwindcss@latest @tailwindcss/postcss@latest postcss@latest, in my case I got

"@tailwindcss/postcss": "^4.1.10",
"postcss": "^8.5.5",
"tailwindcss": "^4.1.10",

2. change styles.css

before

@tailwind base;
@tailwind components;
@tailwind utilities;

after

@import 'tailwindcss';

3. change postcss.config.js

before

const { join } = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
};

after

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

4. delete tailwind.config.js

[Bil-lion-aire]

Any update? Months waiting for a proper native tailwind v4 support in nx but no word from the team nor any relevant update for that...

[aloksharma1]

dont think too much into it , one of my last issues was solved after 1 and half year

[juristr]

We're probably disabling the native integration for Tailwind we had because you can easily go with CSS and configure it using the official Tailwind guides. I've written some blogposts and showing how you can use a sync generator to keep Tailwind CSS imports in sync in a monorepo environment.

• Nx Tailwind sync generator
• Tailwind v4 in a NPM/PNPM workspace monorepo
• Tailwind v4 with Angular and Nx