Tailwind CSS类名不生效主因是类名未进入CSS或未被解析：class属性拼写错误（如clas）、content路径未覆盖Blade文件、动态类名未被静态扫描识别、多类名间缺空格。需按顺序排查拼写、路径、safelist。
你在 Laravel 项目里引入 Tailwind CSS 后，明明写了 bg-blue-500、text-xl 这类类名，浏览器却完全没反应，页面还是默认样式——这不是框架冲突或 CDN 加载失败，而是 Tailwind 根本没把你的类名编译进最终 CSS 文件里。
检查 class 属性是否拼错
第一步打开浏览器开发者工具 → 右键元素 → “检查”，看 Elements 面板里该标签有没有 class 属性；如果没有，立刻回头查 Blade 模板。
常见错误：写成 clas、className、classes 或 class-name——这些都不是合法 HTML 属性，浏览器直接忽略整条属性值，哪怕 DOM 里看着有 bg-red-600，它也不会参与样式计算。
Blade 中必须用 class，不是 class="" 以外的任何变体。
立即学习“前端免费学习笔记（深入）”；
确认 Tailwind 的 content 路径覆盖了 .blade.php 文件
Tailwind 不运行时解析，只在构建时扫描你配置的 content 路径下的字面量类名。Laravel 默认把视图放在 resources/views/ 下，而官方文档常默认你用 React/Vue，所以 tailwind.config.js 里的 content 很可能漏掉了 .blade.php。
错误写法：content: ["./resources/js/**/*.{js,jsx,ts,tsx}"] → 完全不扫描 Blade 文件，所有 class="..." 全丢。
正确写法（Laravel 专属）：
① 打开 tailwind.config.js；
② 把 content 数组改成：
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.css",
"./resources/**/*.vue",
],
【必须包含 "./resources/**/*.blade.php"】 —— 这是 Laravel 项目生效的硬性前提，缺了就等于没配 Tailwind。
改完后，终端执行 npm run build 或 npm run dev 重新构建，否则变更不生效。
动态类名如 bg-${color}-500 失效怎么办
方法一：预定义完整类名（推荐）
把组合逻辑提前到 PHP 或 Blade 变量里，让每个值都是静态字符串，Tailwind 才能扫描到：
@php
$bgClasses = [
'primary' => 'bg-blue-500 hover:bg-blue-600',
'danger' => 'bg-red-500 hover:bg-red-600',
];
@endphp
<div class="{{ $bgClasses[$type] }} text-white p-4"></div>
方法二：加 safelist（仅调试用）
在 tailwind.config.js 的 safelist 里显式声明高频动态类：
safelist: [
"bg-blue-500", "bg-red-500", "bg-green-500",
/^bg-[a-z]+-500$/,
],
【正则必须用斜杠 / 包裹，写成字符串无效】
方法三：改用内联 style（兜底）
当颜色来自数据库或用户输入且不可穷举时，别硬套 bg-[#xxx]：
<div style="background-color: {{ $hex }}"></div>
