Laravel使用Vite+TailwindCSS构建独立CSS时如何指定不同配置文件

不需要额外安装插件，直接通过动态PostCSS配置就能按入口文件匹配对应的Tailwind配置，步骤如下：

• 首先修改postcss.config.js，将原来的静态配置改为动态导出函数，根据当前处理的CSS文件路径指定要加载的Tailwind配置文件：

const path = require('path')

module.exports = (ctx) => {
  // 匹配当前处理的CSS入口
  const isMailCss = ctx.file?.endsWith(path.normalize('resources/css/mail.css'))
  return {
    plugins: {
      // 邮件CSS用专用配置，其余用默认配置
      tailwindcss: {
        config: isMailCss ? './tailwind-mail.config.js' : './tailwind.config.js'
      },
      autoprefixer: {},
    }
  }
}

这里用path.normalize处理路径是为了兼容Windows、macOS、Linux不同系统的路径分隔符，避免匹配失效。

• 修正vite.config.js里的语法错误，原配置input数组最后一项缺少逗号，修正后完整代码：

import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"

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

• 确认两个CSS入口文件的Tailwind指令正常即可，不需要额外修改：
  • resources/css/app.css 头部保留：

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

  • resources/css/mail.css 头部保留同样的指令，构建时会自动套用邮件专用配置：

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

效果验证 #

构建后app.css会按照默认配置扫描全量视图文件，加载@tailwindcss/forms、@tailwindcss/typography两个插件；mail.css只会扫描resources/views/mails下的模板，仅加载@tailwindcss/typography插件，两份CSS完全独立互不影响，开发模式下热更新也能正常工作。

内容的提问来源于stack exchange，提问作者Clément Baconnier