Tailwind v4无PostCSS配置，内置编译器详解

Tailwind CSS v4 通过内置 Rust 编写的 Oxide 引擎彻底告别 PostCSS 生态，不再读取 postcss.config.js，所有样式处理——从类名扫描、JIT 编译到前缀注入——均由 tailwindcss() 插件一站式接管；只需在独立 CSS 文件顶部写入 @import "tailwindcss"（可追加 important、@theme、@plugin 等新语法），即可自动启用三层基础样式、主题变量、插件集成与默认源码扫描，连 content 配置都成为历史；但迁移时务必注意：@import 必须置于文件首行且不可嵌套，Vite 中 tailwindcss() 插件也必须优先于其他 CSS 处理插件加载，否则 JIT 将失效——这不仅是配置简化，更是一次底层构建逻辑的革新。

为什么 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 编译。它隐式启用了以下能力：

• 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 过程

本篇关于《Tailwind v4无PostCSS配置，内置编译器详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！