@tailwindcss/vite 是 Tailwind CSS 官方推荐的 Vite 集成方式，仅适用于纯 Vite 项目，需同时安装 tailwindcss 和 @tailwindcss/vite 并版本对齐，且 content 路径须精确、@tailwind 指令须按序置于主 CSS 文件顶部。
@tailwindcss/vite 插件在 2026 年已正式成为 Tailwind CSS 官方推荐的 Vite 集成方式，但它不适用于所有 React 项目场景——尤其是你用的是 create-react-app 或自建 Webpack 流程，那这个插件根本不能用。只有纯 Vite 项目（比如 npm create vite@latest 创建的）才能走这条路。
vite.config.ts 中正确引入 @tailwindcss/vite
Vite 官方插件不是靠 PostCSS 插件链注入，而是作为一级构建插件参与 CSS 处理流程。这意味着你不能再像老方法那样把 tailwindcss 写进 css.postcss.plugins，否则会触发双重处理、类名丢失或热更新失效。
- 必须安装两个包：
tailwindcss和@tailwindcss/vite（注意不是tailwindcss单独一个） -
@tailwindcss/vite的版本必须与tailwindcss主版本对齐（例如 v4.0.x 配 v4.0.x） -
vite.config.ts中直接 import 并加入 plugins 数组：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
<p>export default defineConfig({
plugins: [react(), tailwindcss()],
})</p>- 不需要手动配置
postcss.config.js，也不要在css.postcss里再塞tailwindcss()——这会导致重复扫描和构建变慢
tailwind.config.js 的 content 字段必须精确匹配源码路径
Vite 插件模式下，Tailwind 不再依赖 PostCSS 的文件读取机制，而是由插件自己遍历 content 指定的路径。如果路径写错，开发时样式能“看起来生效”，但构建后所有类都会被 purge 掉（生产环境白屏或无样式）。
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 常见错误写法：
"./src/*<em>/</em>"（没指定扩展名，Vite 插件无法识别 JS/TSX 文件中的 class 字符串） - 正确写法（React + TSX）：
"./index.html""./src/**/*.{js,jsx,ts,tsx}"
- 如果用了
@/别名（如alias: { '@': path.resolve(__dirname, './src') }），content里不能写"@//*"** ——插件不解析别名，必须写实际路径
@tailwind 指令必须放在项目主 CSS 文件中，且顺序不可乱
Vite 插件不会自动注入基础样式，它只负责扫描和生成 utility 类。base / components / utilities 三段指令仍需手动写入，且顺序影响重置逻辑。
立即学习“前端免费学习笔记（深入）”；
- 在
src/index.css（或你实际 import 的主 CSS 文件）顶部写：@tailwind base; @tailwind components; @tailwind utilities;
- 不能漏掉
@tailwind base：否则preflight重置不生效，表单控件、标题 margin 等会保留浏览器默认样式 - 不能把
@tailwind放在@layer之后或嵌套在@layer components里 —— 这些是 Tailwind 的 DSL 规则，插件不解析嵌套结构
Vite 官方插件省去了 PostCSS 配置环节，但把校验责任转移到了路径声明和 CSS 入口上。最容易被忽略的是：插件本身不报错，content 错了只会静默丢弃所有类；而 @tailwind 指令位置错了，base 样式就没了，但页面看起来“好像还行”——直到你遇到一个 checkbox 渲染异常，才回头翻文档。
