tailwind v4 彻底弃用 postcss，改用 rust 的 oxide 引擎直接解析 css；必须删除 postcss.config.js 和 postcss 相关依赖，将 @tailwind 指令替换为 @import "tailwindcss";，且仅保留 tailwind.config.js 中的 content 字段。
PostCSS 插件链在 Tailwind v4 中彻底被绕过
Tailwind v4 不再通过 PostCSS 插件运行，而是由 Rust 编写的 Oxide 引擎直接解析 CSS 源码。你在 postcss.config.js 里写的 tailwindcss()、autoprefixer 或其他插件，v4 构建时根本不会加载——不是报错，是完全跳过。旧项目保留 postcss.config.js 和 PostCSS 依赖，只会让构建流程变慢、冗余，且可能干扰 v4 的自动 content 扫描。
必须删掉 postcss.config.js 并移除 PostCSS 相关依赖
v4 默认使用内置的 Lightning CSS 引擎，不依赖 PostCSS。继续留着 postcss.config.js 或安装 postcss、autoprefixer 等包，既无作用，还可能触发意外警告或构建冲突。
- 删除项目根目录下的
postcss.config.js - 运行
pnpm remove postcss autoprefixer @tailwindcss/postcss（或对应包管理器命令） - 检查
package.json的devDependencies，确认没有残留的postcss相关项 - 如果你用的是 Vite，确保已安装
@tailwindcss/vite并在vite.config.ts中启用：import { tailwindcss } from '@tailwindcss/vite'<br>export default defineConfig({<br> plugins: [tailwindcss()],<br>})
@tailwind 指令必须替换成 @import "tailwindcss"
v4 不识别 @tailwind base、@tailwind components、@tailwind utilities。这些指令会静默失效，对应样式（如 preflight、自定义组件类、工具类）全部不生成。唯一合法入口是 @import "tailwindcss";，且必须写在主 CSS 文件顶部，带单引号和分号。
- 找到你的主 CSS 入口（如
src/app.css或src/styles/tailwind.css） - 删掉所有
@tailwind *行 - 第一行写：
@import "tailwindcss"; - 紧接其后可写
@theme、@layer、@plugin等 v4 原生指令 - 注意：如果用了
@tailwindcss/vite，它会自动处理@import "tailwindcss"后续的 theme 解析，无需额外配置
tailwind.config.js 只剩 content 字段有用
v4 的 Oxide 引擎只读取 tailwind.config.js 中的 content 字段用于扫描类名路径，其余字段（theme、plugins、darkMode、contentSecurityPolicy）全部被忽略——连 warning 都不抛。你改了 theme.extend.colors 却发现 bg-brand-500 不生效，大概率就是卡在这儿。
- 打开
tailwind.config.js - 只保留
content字段，例如：module.exports = {<br> content: ['./src/**/*.{html,js,ts,svelte,jsx,tsx}'],<br>} - 删掉
theme、plugins、darkMode等所有其他字段 - 真正要配主题，必须写进 CSS 文件里的
@theme块，变量名带标准前缀，比如--color-brand-500✅，而不是--brand-500❌
@tailwind 指令就完了，其实没写 @import "tailwindcss";，或者写了但漏了分号、用了双引号，都会导致整个框架静默不工作。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
