Laravel项目配置TailwindCSS生成多页面专属CSS文件方法

1. 拆分Tailwind配置文件 #

在项目根目录创建多个Tailwind配置文件，分别对应不同页面组：

• tailwind.admin.js（对应后台页面）
• tailwind.writers.js（对应作者页面）

每个配置文件指定专属的content路径，确保只扫描对应页面的模板文件：

tailwind.admin.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/views/admin/**/*.blade.php",
    "./resources/js/admin/**/*.js", // 若有对应JS组件需同步扫描
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind.writers.js

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

2. 创建独立的CSS入口文件 #

在resources/css目录下创建对应入口文件，每个文件仅导入Tailwind核心样式：

resources/css/admin.css

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

resources/css/writers.css

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

3. 修改构建工具配置（Vite/Mix） #

根据你使用的Laravel版本，修改对应的构建配置文件：

若使用Vite（Laravel 9+）

修改vite.config.js，添加多个构建入口，并指定输出规则：

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

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/admin.css',
        'resources/css/writers.css',
        // 保留全局样式文件（如果需要）
        // 'resources/css/app.css',
      ],
      refresh: true,
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'css/[name].css',
      },
    },
  },
});

若使用Mix（Laravel 8及以下）

修改webpack.mix.js，为每个CSS入口指定对应的Tailwind配置：

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

// 编译后台CSS
mix.postCss('resources/css/admin.css', 'public/css', [
  tailwindcss('./tailwind.admin.js'),
]);

// 编译作者页面CSS
mix.postCss('resources/css/writers.css', 'public/css', [
  tailwindcss('./tailwind.writers.js'),
]);

4. 在页面模板中引入对应CSS #

在resources/views/admin/*的模板中引入后台专属CSS：

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

在resources/views/writers/*的模板中引入作者页面专属CSS：

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

（若使用Mix则替换为：<link rel="stylesheet" href="{{ mix('css/writers.css') }}">）

5. 构建与验证 #

运行开发命令或生产构建命令：

• 开发模式：npm run dev
• 生产构建：npm run build

构建完成后，public/css目录下会生成admin.css和writers.css，文件仅包含对应页面用到的Tailwind样式，实现体积优化。

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