Laravel Mix无法加载Tailwind CSS的问题排查求助

AI 小北

2026-7-22

Laravel Mix + Tailwind CSS 样式不生效排查

我按照官方教程配置Laravel Mix与Tailwind CSS，已完成所有步骤，相关配置如下：

1. `tailwind.config.js` 配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 样式文件 `resources/css/dashboard.css`

@tailwind base;
@tailwind components;
@tailwind utilities;

3. `webpack.mix.js` 配置

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/dashboard.css", "public/css", [
        require("tailwindcss"),
    ])
    .extract()
    .vue(3);

4. 布局文件引入样式

<link href="{{ mix('/css/dashboard.css') }}" rel="stylesheet">

5. Vue组件使用Tailwind类

在 resources/js/Pages/Users/Patients/Dashboard.vue 中添加：

<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>

问题现象

Tailwind样式未生效，页面无对应样式效果：
网络请求确认 dashboard.css 已正确加载：

排查方向

内容扫描路径是否覆盖组件：当前tailwind.config.js的content配置是./resources/**/*.vue，可尝试补充更明确的路径./resources/js/**/*.vue，确保Tailwind能扫描到目标Vue组件中的类名。
清理编译缓存：执行npm run clean清除缓存后，重新执行npm run dev或npm run prod编译资源。
版本兼容性检查：确认Laravel Mix、Tailwind CSS、PostCSS的版本匹配，Tailwind v3要求PostCSS 8及以上版本。
样式优先级冲突：通过浏览器开发者工具查看元素样式，排查是否有其他全局样式覆盖了Tailwind类。
显式指定Tailwind配置路径：在webpack.mix.js中修改Tailwind引入代码，明确指向配置文件：
```
require("tailwindcss")("./tailwind.config.js")
```
Vue组件挂载验证：确认目标Vue组件已正确引入并挂载到页面，未被条件渲染逻辑隐藏。