Laravel 9部署至主机后TailwindCSS工具类失效问题

开发环境下项目运行一切正常，但部署至生产主机后TailwindCSS工具类完全失效。以下是相关配置信息：

@vite 指令 #

开发环境中使用：

@vite('resources/css/app.css')

生产环境编译后生成的链接：

<link rel="stylesheet" href="https://www.mh**.com/build/assets/app.2d284f54.css" />

resources/css/app.css #

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;700&display=swap');

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

*
*
*

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  // 注：用户配置未完整展示，缺少theme、plugins等字段
}

vite.config.js #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

public/build/manifest.json #

{
  "resources/js/app.js": {
    "file": "assets/app.334e7359.js",
    "src": "resources/js/app.js",
    "isEntry": true
  },
  "resources/css/app.css": {
    "file": "assets/app.2d284f54.css",
    "src": "resources/css/app.css",
    "isEntry": true
  }
}

npm run build 日志 #

$ npm run build

> build
> vite build

vite v3.1.3 building for production...
✓ 58 modules transformed.
public/build/manifest.json             0.25 KiB
public/build/assets/app.2d284f54.css   23.11 KiB / gzip: 5.07 KiB
public/build/assets/app.334e7359.js    90.63 KiB / gzip: 33.07 KiB

问题排查与解决方案 #

1. 修复CSS语法错误 #

app.css末尾的三个孤立*属于无效语法，会导致CSS解析异常。直接删除这三个*，确保文件语法正确：

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;700&display=swap');

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

2. 确认Tailwind内容扫描范围 #

Tailwind在生产环境会启用摇树优化，仅生成代码中实际使用的工具类。检查tailwind.config.js的content配置，确保覆盖所有使用Tailwind类的文件：

• 如果视图文件存放在resources/views目录，当前配置./resources/**/*.blade.php已覆盖，但如果有其他目录的模板文件，需补充路径
• 若项目使用了根目录下的blade文件，可添加./resources/views/**/*.blade.php或./**/*.blade.php（视项目结构调整）

示例修正后的配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./resources/views/**/*.blade.php", // 明确指定视图目录（如果需要）
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 验证生产构建产物 #

• 访问生产环境的CSS链接（https://www.mh**.com/build/assets/app.2d284f54.css），检查文件内容是否包含你使用的Tailwind工具类
• 如果文件中没有对应类，说明构建时未扫描到使用场景，需重新检查content配置，然后重新执行npm run build并重新部署

4. 清除缓存 #

• 清除浏览器缓存（快捷键Ctrl+F5强制刷新），避免加载旧的CSS缓存
• 若使用了服务器缓存（如Nginx、CDN），需同步清除对应缓存

5. 确认部署完整性 #

确保public/build目录下的所有文件（包括manifest.json、CSS、JS文件）都完整部署到生产服务器，没有遗漏或文件损坏

内容的提问来源于stack exchange，提问作者kazza