Laravel 9仅开发环境生成含自定义类的全Tailwind CSS类方案咨询

1. 仅非生产环境生成全量CSS类（含自定义类） #

可以实现，核心思路是通过Tailwind的safelist配置结合环境变量，在开发环境（local/staging）自动包含所有自定义类，生产环境仅打包实际用到的类，兼顾开发调试灵活性与生产环境性能。

2. 在tailwind.config.js中正确读取.env变量 #

你之前用import.meta.env.VITE_APP_ENV报错是因为tailwind.config.js运行在Node.js环境，而非浏览器环境，import.meta.env是Vite专为浏览器端设计的变量注入方式，Node环境不支持。正确做法：

• 确保项目已安装dotenv（Laravel项目默认已依赖）
• 在tailwind.config.js顶部加载.env文件并读取环境变量：

// tailwind.config.js
require('dotenv').config({ path: './.env' });
// 优先取APP_ENV，也可根据需求使用VITE_APP_ENV
const APP_ENV = process.env.APP_ENV || process.env.VITE_APP_ENV;

module.exports = {
  // 其他配置项...
}

3. 匹配带变体的自定义类到safelist #

用pattern: /ctm/无法匹配带变体的类（比如hover:ctm-dark-purple），因为变体是前缀，正则需要覆盖「变体前缀+自定义类」的完整结构。使用以下正则可以匹配所有带ctm-前缀的类（无论是否有变体）：

safelist: APP_ENV !== 'production' ? [
  {
    pattern: /^(.*:)?ctm-.*/, // 匹配任意变体前缀（如hover:、md:）+ ctm-开头的自定义类
  }
] : [],

正则说明：

• ^ 匹配字符串开头
• (.*:)? 匹配任意变体前缀，?表示该前缀可选（支持无变体的纯自定义类）
• ctm-.+ 匹配自定义类的核心部分（如ctm-dark-purple）

完整配置示例 #

将上述逻辑整合到tailwind.config.js：

require('dotenv').config({ path: './.env' });
const APP_ENV = process.env.APP_ENV || process.env.VITE_APP_ENV;

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {
      colors: {
        'ctm-dark-purple': '#553c9a',
        // 其他自定义颜色
      },
      // 其他自定义主题配置
    },
  },
  safelist: APP_ENV !== 'production' ? [
    {
      pattern: /^(.*:)?ctm-.*/,
    }
  ] : [],
  plugins: [],
}

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