Tailwind 3.x新项目bg-slate-500等默认背景色不生效如何解决

API 探路者

2026-8-29

问题现象

Tailwind CSS 3.1.4版本全新安装后，部分工具类渲染异常：

给<body>标签添加bg-black类时可正常渲染黑色背景，对应代码：

<body class="bg-black">

添加其他默认颜色类时样式完全不生效，例如bg-slate-500类无对应背景样式，对应代码：

<body class="bg-slate-500">

问题原因

核心原因是配置文件中theme节点下定义了空的colors对象，该操作会完全覆盖Tailwind内置的默认调色板，而非在默认配色基础上做增量扩展。
bg-black能正常渲染是因为black、white、transparent、currentColor属于Tailwind内置的特殊基础色，即使完全覆写colors配置也会被保留；其余slate、gray、red、blue等整套默认主题色会被清空，对应工具类不会被编译生成，自然无法生效。

修复方案

根据自身需求二选一即可：

不需要自定义全量调色板、直接使用Tailwind默认配色：直接删除theme下空的colors字段即可，配置参考：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

需要在保留默认调色板的基础上新增自定义颜色：不要在theme.colors下写配置，将自定义颜色写入theme.extend.colors节点即可，配置参考：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // 自定义颜色写在此处，不会覆盖默认调色板
        // 例：brand: '#165dff'
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}