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