当在 tailwind.config.js 中设置颜色时，默认顺风颜色将不再起作用

Question

我正在将 Tailwind 用于我正在创建的一个小型 Wordpress 项目。所以我已经使用 webpack 进行了设置。这绝对没问题。 Tailwind 进行了 tree shaking，只将类添加到我实际使用的末尾文件中。

我有以下配置来覆盖一些默认颜色：

module.exports = {
  content: [
    './inc/blocks/*.php',
    './archive.php',
    './footer.php',
    './header.php',
    './index.php',
    './single.php',
  ],
  darkMode: "class",
  theme: {
    extend: {},
      colors: {
        'amber': {
          100: '#fff8e1',
          200: '#ffecb3',
          300: '#ffe082',
          400: '#F7CE64',
          500: '#deb95a',
          600: '#c69e56',
          700: '#af8c4c',
          800: '#977b3c',
          900: '#856a2c',
        },
        'lime': {
          100: '#afeacd',
          200: '#9be5c1',
          300: '#86dfb4',
          400: '#36CA82',
          500: '#2ba268',
          600: '#1f9357',
          700: '#197b4e',
          800: '#126a45',
          900: '#0e5a3c',
        },
        'rose': {
          100: '#fbe9e7',
          200: '#ffccc7',
          300: '#ffa7a7',
          400: '#C88986',
          500: '#B77C7C',
          600: '#8A575C',
          700: '#7C4C4C',
          800: '#6F4240',
          900: '#633C3C',
        },
      },
      fontFamily: {
        'title': ['Poppins', 'sans-serif'],
        'body': ['Merriweather', 'serif'],
      },
    },
    plugins: [],
}

这绝对没问题。例如，如果我使用其中一种颜色在 div 上设置背景，就可以了。

<div class="h-20 w-20 bg-amber-400"></div>

但是如果我现在想使用默认的顺风颜色，我没有像下面这样更改值，它将不起作用。

<div class="h-20 w-20 bg-zinc-400"></div>

作为实验，我尝试删除在 tailwind 配置中设置的颜色配置。果然它再次起作用了。这应该是那样的吗？当您仅覆盖部分默认颜色时，所有默认颜色都会被删除？

我希望能够在现有颜色之上定义我自己的颜色，但保留我没有覆盖的颜色，我该如何实现？

Answer 1

如果您想保留 Tailwind 的默认颜色以及您自定义的颜色，您需要将颜色对象移动到扩展内。

module.exports = {
  content: [
    './inc/blocks/*.php',
    './archive.php',
    './footer.php',
    './header.php',
    './index.php',
    './single.php',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        amber: {
          100: '#fff8e1',
          200: '#ffecb3',
          300: '#ffe082',
          400: '#F7CE64',
          500: '#deb95a',
          600: '#c69e56',
          700: '#af8c4c',
          800: '#977b3c',
          900: '#856a2c',
        },
        lime: {
          100: '#afeacd',
          200: '#9be5c1',
          300: '#86dfb4',
          400: '#36CA82',
          500: '#2ba268',
          600: '#1f9357',
          700: '#197b4e',
          800: '#126a45',
          900: '#0e5a3c',
        },
        rose: {
          100: '#fbe9e7',
          200: '#ffccc7',
          300: '#ffa7a7',
          400: '#C88986',
          500: '#B77C7C',
          600: '#8A575C',
          700: '#7C4C4C',
          800: '#6F4240',
          900: '#633C3C',
        },
      },
    },
    fontFamily: {
      title: ['Poppins', 'sans-serif'],
      body: ['Merriweather', 'serif'],
    },
  },
  plugins: [],
}

演示：https://play.tailwindcss.com/SeTdKxyNlM?file=config

来源：https://tailwindcss.com/docs/theme#extending-the-default-theme

当在 tailwind.config.js 中设置颜色时，默认顺风颜色将不再起作用

When colors are set in tailwind.config.js the default tailwind colors won't work anymore

html

css

tailwind-css