tailwind-css - 顺风 CSS : Referencing Theme Colors When Creating Custom Class

Question

我正在尝试修改 tailwind.config.js文件来创建一些自定义类。例如，我想创建一个调色板 - 并通过引用主题中的其他颜色来实现。
为此，我对 tailwind.config.js 进行了以下更改文件:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: (theme) => theme("colors.blue.500"),
      },
    }
    ...

然而，这行不通。我没有收到任何错误 - 但我也没有收到任何自定义类(即使， according to the docs ，这应该可行)。
另一方面，这确实有效:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#abcdef",
      },
    }
    ...

这将创建诸如 bg-primary 之类的类。 .
知道如何通过引用主题中的其他值来创建自定义类吗？
谢谢。

Answer 1

你的第一个例子确实似乎不起作用。这些也不起作用:

module.exports = {
  theme: {
    extend: {
      colors: (theme) => ({
        primary: theme('colors.blue.500'),
      })
    },
  },
}
// → RangeError: Maximum call stack size exceeded

module.exports = {
  theme: {
    extend: (theme) => ({
      colors: {
        primary: theme('colors.blue.500'),
      }
    }),
  },
}
// → no error, but doesn't work

module.exports = {
  theme: (theme) => ({
    extend: {
      colors: {
        primary: theme('colors.blue.500'),
      }
    },
  }),
}
// → no error, but doesn't work

然而， Customizing Colors页面有一个名为 Overriding a single shade 的部分其中包含以下示例和解释，为什么您的配置和我的上述配置不起作用:

Since values in the theme.extend section of your config file are only merged shallowly, overriding a single shade is slightly more complicated.

The easiest option is to import the default theme and spread in the color you want to customize along with the new shade value:

// tailwind.config.js
const { colors } = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          ...colors.blue,
          '900': '#1e3656',
        }
      }
    }
  }
}

因此，您可以通过以下方式实现您的目标:

const { colors } = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.blue['500'], // 500 (number) would also work
      }
    }
  }
}

我试过这个，它似乎有效。构建的 CSS 文件包含这些类(当然还有其他类):

.bg-blue-500 {
  --bg-opacity: 1;
  background-color: #4299e1;
  background-color: rgba(66, 153, 225, var(--bg-opacity));
}

.bg-primary {
  --bg-opacity: 1;
  background-color: #4299e1;
  background-color: rgba(66, 153, 225, var(--bg-opacity));
}