tailwind css v4 因内置 rust oxide 引擎而忽略 postcss.config.js，样式处理全程由 tailwindcss() 插件接管；@import "tailwindcss" 是入口指令，自动加载三层、启用 jit 编译并隐式支持 important、@theme、@plugin 等新语法，且默认扫描源码无需 content 配置。

为什么 postcss.config.js 在 v4 中被忽略

Tailwind CSS v4 内置了 Rust 编写的 Oxide 编译引擎，不再走 PostCSS 插件链。当你在 vite.config.ts 中启用 tailwindcss() 插件时，它已接管整个样式处理流程：从扫描源码中的类名、解析 @import "tailwindcss"、生成 utilities，到最终输出 CSS —— 全部绕过 PostCSS 配置文件。所以即使你保留 postcss.config.js，它也不会被读取或生效。

@import "tailwindcss" 是如何替代旧配置的

这一行不是传统意义上的 CSS 导入，而是 v4 的入口指令，会自动加载 base / components / utilities 三层，并触发 Oxide 引擎执行 JIT 编译。它隐式启用了以下能力：

Pandas 配置文件报告生成器

使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。

下载

• important: true 等旧配置项，改用 @import "tailwindcss" important;
• 主题变量通过 @theme 块定义，如 @theme { --color-primary: #3b82f6; }，会自动生成 text-primary 等类
• 插件引入改用 @plugin "@tailwindcss/typography"，直接写在 CSS 文件里
• 不再需要 content 字段 —— Oxide 默认扫描 src/**/*.{js,ts,jsx,tsx,vue}，也可用 @source 扩展路径

常见错误：仍手动运行 postcss 或保留 autoprefixer 配置

v4 已将 Autoprefixer 和 PostCSS 功能内置，显式安装或配置反而可能引发冲突：

• 如果你在 package.json 中还写了 "build:css": "postcss src/input.css -o dist/output.css"，这条命令会失效，且可能覆盖 v4 生成的正确样式
• 在 vite.config.ts 中同时启用 postcss() 插件和 tailwindcss()，会导致重复处理，出现类名缺失或伪类失效（如 hover: 不触发）
• autoprefixer 不再需要单独安装；v4 输出的 CSS 已按 browserslist 自动加前缀

迁移时最容易被忽略的点

很多人以为只要删掉 postcss.config.js 就算完成迁移，但实际漏掉了两处关键细节：

• @import 必须写在独立 CSS 文件（如 src/styles/tailwind.css）的最顶部，不能嵌套在 @layer 或其他规则内，否则 Oxide 引擎无法识别
• Vite 插件顺序很重要：tailwindcss() 应放在其他 CSS 处理插件（如 css() 或 less()）之前，否则可能被提前编译而跳过 JIT 过程

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！