Tailwind CSS在Laravel中需手动配置npm+PostCSS+tailwindcss三件套，否则类名不生成、@apply失效、热更新失灵；Laravel 9+默认用Vite，须确保Node.js≥18.17，正确配置tailwind.config.js的content路径及vite.config.js的PostCSS插件，并避免动态拼接类名。
Tailwind CSS 能直接在 Laravel 中用，但默认不带编译环境，必须手动配好 npm + PostCSS + tailwindcss 三件套，否则类名不会生成、@apply 会失效、热更新也不工作。
确认 Laravel 版本与 Node.js 环境是否匹配
Laravel 9+ 默认使用 Vite，Laravel 8 及更早用 Mix；Node.js 推荐 ≥18.17（Vite 4+ 要求），低于 16.14 会报 ERR_OSSL_EVP_UNSUPPORTED 错误。
- 运行
node -v和npm -v检查版本，若太低，用nvm切换或重装 - Laravel 9+ 项目里删掉
webpack.mix.js，别混用 Mix 和 Vite - 新项目直接用
laravel new myapp --git+--stack=react或默认栈，都已预置 Vite 配置
安装 Tailwind 并初始化配置文件
不能只跑 npm install -D tailwindcss postcss autoprefixer 就完事——缺 tailwind.config.js 会导致所有类名不生效，连 bg-blue-500 都渲染不出来。
- 执行
npx tailwindcss init -p（-p自动加postcss.config.js） - 编辑
tailwind.config.js，确保content包含 Blade 模板路径：content: ["./resources/**/*.blade.php"] - 若用 Inertia 或 Livewire，还要加上
./app/Http/Livewire/**/*.php和./resources/js/**/*.vue（视情况）
在 Vite 中注入 Tailwind 的 CSS 和指令
Vite 不会自动处理 @tailwind 指令，必须让入口 CSS 文件显式加载它，否则浏览器里全是未定义的类名。
立即学习“前端免费学习笔记（深入）”；
- 打开
resources/css/app.css，清空内容，只留三行：@tailwind base; @tailwind components; @tailwind utilities;
- 确保
resources/js/app.js中有import '../css/app.css'（Vite 默认已有） - 启动开发服务时用
npm run dev，不是php artisan serve单独跑——CSS 编译由 Vite 管理
避免常见样式丢失问题
上线后发现 Tailwind 类突然“消失”，大概率是生产构建时 Purge（现在叫 content）没扫到动态拼接的类名，比如 class="{{ $color }}-500" 这种写法会被剔除。
- 禁止在 Blade 中用变量拼接类名；改用条件判断：
class="{{ $active ? 'bg-blue-500' : 'bg-gray-200' }}" - 若必须动态，把可能用到的类加进
tailwind.config.js的safelist：safelist: ['bg-red-500', 'text-sm', 'hidden']
- 检查
vite.config.js是否误删了css: { postcss: { plugins: [tailwindcss()] }—— Vite 有些模板会漏掉这个
真正卡住人的往往不是安装步骤，而是 content 路径写错、safelist 没配、或者在 Vite 热更新时改了 CSS 却忘了重启 npm run dev。Tailwind 的原子类不会自动“感知”你的 Blade 结构，它只按配置扫描文件——扫不到，就等于不存在。
