Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): 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.

[GuillaumeRZ]

Hello !

I try to upgrade from Tailwind v3.3.3 to v4.0.9. Node version : v22.14.0. I use React without any framework on top of it ("react-router-dom": "^6.15.0",).

Following the upgrade guide, I ran : npx @tailwindcss/upgrade .
Everything went well during the run of the command, however, now my npm start gave me this error :

ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
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.
    at Re (/Users/myUser/Desktop/myApp/myApp-app/node_modules/tailwindcss/dist/lib.js:33:1723)
    at LazyResult.runOnRoot (/Users/myUser/Desktop/myApp/myApp-app/node_modules/postcss/lib/lazy-result.js:361:16)
    at LazyResult.runAsync (/Users/myUser/Desktop/myApp/myApp-app/node_modules/postcss/lib/lazy-result.js:290:26)
    at LazyResult.async (/Users/myUser/Desktop/myApp/myApp-app/node_modules/postcss/lib/lazy-result.js:192:30)
    at LazyResult.then (/Users/myUser/Desktop/myApp/myApp-app/node_modules/postcss/lib/lazy-result.js:436:17)

I don't have any postcss.config.js or vite.config.js or anything.

---

package.json is like that :

{
  "name": "myApp",
  "version": "0.2.4",
  "private": true,
  "dependencies": {
    "@headlessui/react": "^1.7.17",
    "@hello-pangea/dnd": "^16.6.0",
    "@heroicons/react": "^2.0.18",
    "@react-pdf/renderer": "^4.0.0",
    "@sentry/cli": "^2.25.0",
    "@sentry/react": "^7.93.0",
    "@tailwindcss/forms": "^0.5.4",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.4.0",
    "d3": "^7.9.0",
    "date-fns": "^3.0.6",
    "date-holidays": "^3.23.0",
    "driver.js": "^1.3.1",
    "moment": "^2.29.4",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.52.0",
    "react-router-dom": "^6.15.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "xlsx": "^0.18.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && npm run sentry:sourcemaps",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "eslint-config-wesbos": "^3.2.3",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.8.8",
    "tailwindcss": "^4.0.9"
  }
}

---

index.css with some custom :

@import 'tailwindcss';

@config '../tailwind.config.js';

/*
  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: oklch(0.928 0.006 264.531);
  }
}

@utility text-primary {
  @apply text-sm font-semibold text-gray-600;
}

@utility text-secondary {
  @apply text-sm font-medium text-gray-600;
}

@utility text-informative {
  @apply text-sm font-light text-gray-500 italic;
}

@utility diagonal-stripes-overlay {
  /* Diagonal Stripes Overlay */
  @apply absolute top-0 left-0 w-full h-full transition-opacity duration-500 rounded-md cursor-not-allowed;
  background-image: linear-gradient(-45deg,
      rgba(230, 230, 230, 0.5) 25%,
      transparent 25%,
      transparent 50%,
      rgba(230, 230, 230, 0.5) 50%,
      rgba(230, 230, 230, 0.5) 75%,
      transparent 75%,
      transparent);
  background-size: 20px 20px;
  transition:
    opacity 0.5s,
    background-color 0.5s;

}

@utility no-scrollbar {
  /* Then use the variables in your keyframes */

  @layer utilities {

    /* Hide scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
      display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }
}

@layer utilities {

  :root {
    --tw-color-green-100: #D1FAE5;
    --tw-color-red-100: #FEE2E2;
  }

  /* Then use the variables in your keyframes */
  @keyframes fadeOutGrayToGreen {
    0% {
      opacity: 1;
      background-color: transparent;
    }

    100% {
      opacity: 0;
      background-color: rgba(209, 250, 229, 1);
      /* green-100 */
    }
  }

  @keyframes fadeInRedToGray {
    0% {
      opacity: 0;
      background-color: rgba(254, 226, 226, 1);
      /* red-100 */
    }

    100% {
      opacity: 1;
      background-color: transparent;
    }
  }
}

@keyframes countdown {
  from {
    left: 0;
    right: auto;
    width: 100%;
  }

  to {
    left: 100%;
    right: auto;
    width: 0%;
  }
}

---

And then the entire tailwind.config.js :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {
      keyframes: {
        spin: {
          '0%': { transform: 'rotate(0deg)' },
          '100%': { transform: 'rotate(360deg)' },
        },
      },
      animation: {
        'spin-slow-smooth': 'spin 1s cubic-bezier(0.5, 0, 0.25, 1) infinite',
      },
      borderColor: {
        transparent: 'transparent',
      },
    },
   /* ...All the tailwind config with some custom... */
  },
  plugins: [require('@tailwindcss/forms')],
};

Do you have a solution to make it work ?

[wongjn]

react-scripts is causing the error by including the incorrect tailwindcss PostCSS plugin in its pipeline. You could look at:

• Ejecting the configuration to substitute tailwindcss for @tailwindcss/postcss in its Webpack configuration.
• Using CRACO to substitute tailwindcss for @tailwindcss/postcss in its Webpack configuration.

[GuillaumeRZ]

Sorry, not sure to fully understand. create-react-app seems a pretty basic for me to use with tailwind. Should I maybe wait for react-scripts to be updated ? I understand that ejecting is a one way path.

Is there any solutions without ejecting or installing other dependency (as CRACO) ?

[wongjn]

I wouldn't count on react-scripts getting updated, as the Create React App is now deprecated and being sunset.

[mommaroodles]

I'm also getting this same error and am losing my mind trying to fix this - as anyone a idea how to fix this?

Error evaluating Node.js code 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.
[at Re (C:\[REDACTED]\node_modules\tailwindcss\dist\lib.js:33:1889)] [at eval (turbopack:///[project]/postcss.config.js/transform.ts:66:14)] [at <anonymous>] [at Module.init (turbopack:///[project]/postcss.config.js/transform.ts:53:33)] [at run (turbopack:///[turbopack-node]/ipc/evaluate.ts:77:20)]

[wongjn]

Consider providing a git repo of a project that reproduces the error. We could then troubleshoot and figure out a fix/work-around that could then be applied to your project.