Tailwind CSS v3中怎样扩展默认的CSS颜色调色板？-css教程-PHP中文网

必须用 theme.extend.colors，写在 theme.colors 顶层会清空所有默认色——bg-blue-500、text-gray-700 全部失效；theme.extend.colors 是唯一安全入口，因其支持合并式注入，使自定义色与内置色（blue、gray 等）平级共存；若需 brand-blue-500 类生效，必须将颜色定义为含字符串键（如 '500'）的色阶对象，而非单值。

tailwind css v3中怎样扩展默认的css颜色调色板？

必须用 theme.extend.colors，写在 theme.colors 顶层会清空所有默认色——bg-blue-500、text-gray-700 全部失效，不是配置没生效，是颜色盘被替换了。

为什么 `theme.extend.colors` 是唯一安全入口

Tailwind 的内置色（blue、gray、red 等）是工具类的底层依赖，所有 bg-、text-、border- 类都靠它们生成规则。一旦你写成 theme: { colors: { brand: '#3b82f6' } }，整个 colors 对象就被重置为仅含 brand 的空壳，内置色全部丢失。

theme.extend.colors 是 Tailwind 唯一设计为“合并式注入”的配置点：你的新增色和默认色平级共存，bg-brand-500 和 bg-blue-500 都能用，互不干扰。

✅ 正确：extend: { colors: { 'brand-blue': '#2563eb' } }
❌ 错误：colors: { 'brand-blue': '#2563eb' }（顶层直接写）
⚠️ 无效：extend: { colors: { blue: '#1a56db' } }（不会覆盖默认 blue，JIT 编译仍优先用内置）

怎样让 `brand-blue-500` 这类带数字后缀的类生效

只写 'brand-blue': '#2563eb'，Tailwind 只生成 bg-brand-blue 这一个类；bg-brand-blue-500 会报 “class not found”，因为自定义色不自动推导色阶。

必须把颜色值定义为对象，并用字符串数字作键名（如 '500'，不能是 500）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

extend: {
  colors: {
    'brand-blue': {
      '50': '#f0f9ff',
      '100': '#e0f2fe',
      '500': '#2563eb',
      '900': '#1d4ed8'
    }
  }
}

键名必须是字符串：'500' ✅，500 ❌（构建失败）
不用填满全部档位，按需选 3–5 个常用色阶即可，减少 CSS 体积
色阶数值建议对齐设计系统规范（如 Figma 中的 Palette），避免用 'main'、'dark' 这类模糊命名

如何让新颜色支持 `placeholder`、`stroke`、`fill` 等非基础工具类

Tailwind 默认只把 colors 映射到 background-color、color、border-color、ring-color 四类属性。像 placeholder:text-brand-blue-500 或 stroke-brand-blue-500 不会自动出现。

需手动扩展对应配置项：

占位符文字：theme.extend.placeholderColor
SVG 描边：theme.extend.stroke
SVG 填充：theme.extend.fill
阴影颜色：theme.extend.shadowColor

示例：

extend: {
  colors: {
    'brand-blue': { '500': '#2563eb' }
  },
  placeholderColor: {
    'brand-blue': '#2563eb'
  },
  stroke: {
    'brand-blue': '#2563eb'
  }
}