After update to 4.0, my setup with webpack no more works

[MartinAbilev]

after receiving error Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

i install @tailwind/postcss changed webpack and postcss. kind all bulilds no errors but styles not apply . tortured GPT no result...

{
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('@tailwindcss/postcss'), // Use the main Tailwind CSS package
                  require('autoprefixer'), // Autoprefixer for browser compatibility
                ],
              },
            },
          },
        ],
      }
      

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {}, // Use the main Tailwind CSS package
    autoprefixer: {},
  },
};

[MartinAbilev]

fixed: need to add @import "tailwindcss"; to my global.css

[jackmarsh]

This worked for me.

Needed to add to my styles/tailwind.css

@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;

[GoulartNogueira]

Solved (at least on Next.js)

1. Went back to v3
2. Upgrade to V4 by running: $ npx @tailwindcss/upgrade@next

Source:
https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool

[GoulartNogueira]

In case you want to make a manual fix, here are all the changes that were made automatically:

package.json

  "devDependencies": {
-     "autoprefixer": "^10.4.20",

-     "tailwindcss": "^3.4.16",
+     "tailwindcss": "^4.0.0",

+     "@tailwindcss/postcss": "^4.0.0",
}

postcss.config.js

module.exports = {
  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
  },
}

tailwind.config.js (removed file)

globals.css

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

+ @import 'tailwindcss';
+ 
+ /*
+   The default border color has changed to `currentColor` in Tailwind CSS v4,
+   so we've added these compatibility styles to make sure everything still
+   looks the same as it did with Tailwind CSS v3.
+ 
+   If we ever want to remove these styles, we need to add an explicit border
+   color utility to any element that depends on these defaults.
+ */
+ @layer base {
+   *,
+   ::after,
+   ::before,
+   ::backdrop,
+   ::file-selector-button {
+     border-color: var(--color-gray-200, currentColor);
+   }
+ }

Then, it worked flawlessly.

[MartinAbilev]

oh thanks. its nice there is upgrade script :)

the main diference is in version 3

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

and in version 4

@import "tailwindcss";

beside changin plugin '@tailwindcss/postcss'

ya need change css !!!