如何在JS中获取Tailwind CSS v3的所有背景颜色类名？

官方有没有现成的函数？ #

Tailwind CSS 并没有公开提供专门用来生成背景颜色类名数组的可导入函数，官方更建议开发者基于配置自行处理类名生成逻辑。

手动实现的可靠方案 #

既然你已经通过resolveConfig拿到了完整的颜色配置对象，用Object.entries递归遍历是最直接且靠谱的方式，能覆盖所有颜色场景——不管是带色值后缀的色系（比如brown），还是单一自定义颜色（比如primary）。

示例代码 #

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from './tailwind.config.js';

const fullConfig = resolveConfig(tailwindConfig);

// 递归遍历颜色配置，生成所有bg类名
function generateBgColorClasses(colors, prefix = '') {
  let classes = [];
  for (const [key, value] of Object.entries(colors)) {
    // 如果值是对象，说明是嵌套的色系（比如brown: {50: '#xxx', ...}），递归处理
    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
      classes = [...classes, ...generateBgColorClasses(value, `${prefix}${key}-`)];
    } else {
      // 单一颜色（比如primary: '#xxx'），直接生成bg类名
      classes.push(`bg-${prefix}${key}`);
    }
  }
  return classes;
}

const bgColorClasses = generateBgColorClasses(fullConfig.theme.colors);
console.log(bgColorClasses);
// 输出示例：['bg-brown-50', 'bg-brown-100', ..., 'bg-primary']

补充说明 #

• 递归逻辑能完美适配Tailwind默认的嵌套色系结构
• 自动区分单一自定义颜色和带色值后缀的色系，生成的类名和safelist里的完全匹配
• resolveConfig已经自动合并了基础配置和extend里的颜色，直接用fullConfig.theme.colors就行，不用单独处理扩展部分

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