vite postcss not working is a common issue when migrating from Webpack to Vite. Here’s how to fix it in minutes.

You’ve migrated your project to Vite for that blazing fast HMR, but suddenly your CSS is broken. Your autoprefixer isn’t working, or your custom PostCSS plugins aren’t being applied. Even worse, you might be staring at a ReferenceError: module is not defined. At CODE TOT, we’ve transitioned dozens of enterprise projects to Vite, and we’ve identified the four “invisible” reasons why vite postcss not working errors occur.

Dev Insight: Vite handles PostCSS automatically by looking for a config file in your root. Unlike Webpack, you don’t need a postcss-loader, but you do need to be careful with your file extensions in a “Type: Module” project.

1. The vite postcss not working “Type: Module” Trap (ESM vs CommonJS)

In modern Vite projects, your package.json likely contains "type": "module". This turns your entire project into ES Modules. If your postcss.config.js uses module.exports, it will crash.

The Fix: Rename your config file to postcss.config.cjs. This tells Vite to treat this specific file as CommonJS, allowing it to work with standard PostCSS plugins that still expect the older export syntax.

2. Missing CSS Import in Entry File

Vite is smart, but it only processes CSS that it “sees” in its dependency graph. If you have a style.css file but haven’t imported it into your main.js or App.tsx, PostCSS will never touch it.

# Ensure this is in your entry file
import './styles/main.css';

3. Tailwind CSS v4 vs v3 Confusion

If you are using Tailwind CSS v4, the standard PostCSS configuration has changed significantly. In v4, Tailwind uses a specialized Vite plugin (@tailwindcss/vite) and a “CSS-first” configuration style. If you try to use the v3 style postcss.config.js with v4 dependencies, your styles won’t compile. Always match your vite.config.js to your Tailwind version.

4. The “Stale Cache” Ghost

Sometimes you fix the config, but the error persists. Vite caches pre-bundled dependencies in a hidden folder. When you change PostCSS settings, this cache can become stale. Use this command to nukes the cache and force a fresh compile:

# Stop your dev server first
rm -rf node_modules/.vite && npm run dev
vite postcss not working fix solution
Solving vite postcss not working issues in Vite projects

Conclusion

Vite’s simplicity is its strength, but its strict adherence to modern ESM standards can catch developers off guard. By using .cjs for your config and ensuring your project entry points are correctly defined, you can harness the full power of PostCSS with zero friction.

For more vite postcss not working solutions and advanced front-end architecture tips, check out Vite Official Documentation and PostCSS Documentation.