如何在tailwind.config.cjs文件中获取Vite环境变量

架构老林

2026-8-2

解决Tailwind配置文件无法获取Vite环境变量的问题

原因分析

tailwind.config.cjs 是CommonJS模块，不支持ES模块的import.meta.env语法，直接使用会触发语法错误
Vite默认仅将VITE_前缀的环境变量注入到客户端代码中，不会自动添加到Node环境的process.env里，所以直接用process.env拿不到自定义变量

解决方案：手动加载环境变量到Tailwind配置

直接在tailwind.config.cjs中使用Vite的loadEnv方法加载环境变量，步骤如下：

引入Vite的loadEnv方法和Node的path模块
加载对应环境的.env文件，提取所需变量
在Tailwind配置中使用该变量

示例代码：

const { loadEnv } = require('vite');
const path = require('path');

// 获取当前运行环境，默认取development
const mode = process.env.NODE_ENV || 'development';
// 加载对应环境的.env文件，第二个参数是项目根目录
const env = loadEnv(mode, path.resolve(__dirname, '.'));

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    // 使用加载到的环境变量指定预设
    require(`./tailwind-presets/${env.VITE_TAILWIND_PRESET}.js`)
  ],
  // 其他Tailwind配置...
}

替代方案：使用dotenv包加载

如果不想依赖Vite的loadEnv，也可以用dotenv包手动加载：

安装dotenv：

npm install dotenv --save-dev

在tailwind.config.cjs中配置：

require('dotenv').config({
  // 根据环境加载对应文件，比如development环境加载.env.development
  path: `.env.${process.env.NODE_ENV || 'development'}`
});

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require(`./tailwind-presets/${process.env.VITE_TAILWIND_PRESET}.js`)
  ],
  // 其他配置...
}