Vite 6.1 + TailwindCSS v4.0.16：CSS嵌套仅开发生效，构建后失效

排查与修复步骤 #

1. 检查Tailwind内容扫描范围 #

Tailwind v4依赖扫描项目文件提取使用的类，若自定义类所在文件未被纳入扫描，构建时会被Tree Shaking清除。

• 新建/修改tailwind.config.js，确保content数组覆盖所有用到目标类的文件：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}",
    // 补充其他包含自定义类的文件路径
  ],
  theme: {
    extend: {
      container: {
        // 你的自定义.container配置
        center: true,
        padding: '2rem',
      },
    },
  },
  plugins: [],
}

2. 规范自定义类的CSS声明 #

确保在app.css中用正确的Tailwind指令顺序声明自定义类，避免被构建工具忽略：

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义.container变体 */
.container.custom {
  @apply max-w-5xl px-6;
}

/* 嵌套响应式变体 */
@media (min-width: 768px) {
  .container.custom {
    @apply px-8;
  }
}

注意：自定义类需写在@tailwind utilities之前，避免被Tree Shaking误删。

3. 调整Vite CSS优化配置 #

默认Vite可能对未被识别引用的CSS类进行Tree Shaking，若类直接在HTML中使用，可针对性调整：

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    postcss: './postcss.config.js',
    optimizer: {
      css: {
        // 排除app.css的CSS优化，避免自定义类被移除
        exclude: [/app\.css$/],
      },
    },
  },
})

4. 验证Tailwind与Vite版本兼容性 #

Tailwind v4处于预览阶段，可能与Vite v6存在适配问题：

• 尝试降级到Tailwind稳定版（v3.x）：

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@latest postcss@latest autoprefixer@latest

• 重新初始化配置：npx tailwindcss init -p

5. 确认HTML类名匹配 #

检查Vite构建输出的HTML文件，确保.container等类名未被压缩混淆，与CSS中类名完全一致。

内容的提问来源于stack exchange，提问作者Arno Ramon