顺风CSS:创建自定义类时引用主题颜色

Question

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

为此，我对tailwind.config.js文件做了以下更改：

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

然而，这是行不通的。我没有收到任何错误--但我也没有得到任何自定义类(即使是根据医生的说法，这也应该有效)。

另一方面，这确实有效：

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

​

但是，定制颜色页面有一个名为覆盖单一的阴影的部分，其中包含以下示例和解释为什么您的配置和我上面的配置无法工作：

由于您的配置文件的theme.extend部分中的值只是浅合并，因此覆盖单个阴影要稍微复杂一些。 最简单的选项是导入默认主题和要自定义的颜色中的铺展以及新的阴影值： // tailwind.config.js const {...colors.blue}= module.exports ={主题：{...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));
}