This content originally appeared on DEV Community and was authored by Kazutora Hattori
Introduction
When installing Tailwind CSS v4 in a React + Vite environment,
the following error occurred immediately after starting the development server:
Cannot find module 'function qt(e={}){...}'
Require stack:
- postcss.config.js
This article summarizes how to fix this error.
Cause
The Tailwind v3 configuration is being used for Tailwind v4.
Doesn't work with Tailwind v4.
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Solution
1. Place index.css in the correct location.
Create (or modify) src/index.css.
@tailwind base;
@tailwind components;
@tailwind utilities;
2. Rewrite PostCSS configuration for Tailwind v4.
Change postcss.config.js to the v4-specific syntax:
import tailwindcss from "@tailwindcss/postcss";
export default {
plugins: [
tailwindcss(),
],
};
Summary of results after restoration
Tailwind styles are back, and the layout is back to normal.
This content originally appeared on DEV Community and was authored by Kazutora Hattori