When I run this project using npm run dev, then my output errors:

[vite] Internal server error: Failed to load PostCSS config

Error: Cannot find module 'tailwindcss'

Here are the contents of postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

How can I solve this?

When I run this project using npm run dev, then my output errors:

[vite] Internal server error: Failed to load PostCSS config

Error: Cannot find module 'tailwindcss'

Here are the contents of postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

How can I solve this?

• laravel
• tailwind-css
• vite
• postcss

1 Answer 1

Separated PostCSS plugin for TailwindCSS

In v3, the tailwindcss package was a PostCSS plugin, but in v4 the PostCSS plugin lives in a dedicated @tailwindcss/postcss package.

Starting from v4, the @tailwindcss/postcss plugin has been separated from the TailwindCSS package, as it is not needed by everyone. You need to install this separate plugin and reference it from v4 to load TailwindCSS through PostCSS, like this:

npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

• Get Start TailwindCSS using PostCSS - TailwindCSS v4 Docs
• Upgrade guide: Using PostCSS

Deprecated PostCSS plugins from TailwindCSS v4 onwards

Additionally, in v4 imports and vendor prefixing is now handled for you automatically, so you can remove postcss-import and autoprefixer if they are in your project.

Thanks to the structure of this separate plugin, you no longer need to use the autoprefixer and postcss-import packages.

npm uninstall autoprefixer postcss-import