Question

我正在尝试修改taliwind.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的部分，其中包含以下示例和说明，为什么您的配置和我的上述配置不起作用：

由于配置文件theme.extend部分中的值仅被浅层合并，因此覆盖单个阴影会稍微复杂一些。

最简单的选择是导入默认主题和spread为您要自定义的颜色以及新的阴影值：
// 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));
}

TailwindCSS：创建自定义类时引用主题颜色

1 个答案: