Summary of the error "Cannot find module 'function qt(e={})...'" that occurs when using Tailwind CSS v4 + Vite

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.