Tailwind CSS - 扩展颜色 - 命名颜色不同？

Question

我正在尝试从 tailwind 创建一些命名的颜色，它可以工作，但颜色实际上并不相同？！

我的tailwind.config.js

var colorVars = function(color, brightness = 600){
  return {
    'lighter': color[brightness-200],
    'light': color[brightness-100],
    'default': color[brightness],
    'dark': color[brightness+100],
    'darker': color[brightness+200]
  };
}

module.exports = {
  purge: [],
  theme: {
    extend: {
      colors:{
        primary: colorVars(defaultTheme.colors.indigo, 600),
      },

然后，如果我看一看实际的 CSS，我就会发现这些差异...

.bg-primary{
  --bg-opacity: 1;
  background-color: #5a67d8;
  background-color: rgba(90, 103, 216, var(--bg-opacity));
}

.bg-indigo-600{
  --bg-opacity: 1;
  background-color: #5850ec;
  background-color: rgba(88, 80, 236, var(--bg-opacity));
}

如您所见，它们是不同的颜色，但它们应该都是 indigo-600 ?

非常感谢任何帮助！

Answer 1

好的，这是因为我使用的是 TailwindUI，而 TailwindUI 的颜色集与 TailwindCSS 不同，因此存在差异。

TailwindCSS 调色板 https://tailwindcss.com/docs/customizing-colors/#default-color-palette

TailwindUI 调色板https://tailwindui.com/documentation#how-tailwindcss-ui-extends-tailwind

为了扩展它我写了这段代码...

const defaultTheme = require('tailwindcss/defaultTheme')
const uiColors = require('@tailwindcss/ui/colors');

var colorVars = function(color, brightness = 600){
  return {
    'lighter': color[brightness-200],
    'light': color[brightness-100],
    'default': color[brightness],
    'dark': color[brightness+100],
    'darker': color[brightness+200]
  };
}

module.exports = {
  purge: [],
  theme: {
    extend: {
      colors:{
        primary: colorVars(uiColors.indigo, 600),

看，我现在使用 @tailwindcss/ui/colors 而不是 tailwindcss/defaultTheme 的颜色。

希望这对其他人也有帮助！

也向 https://github.com/tailwindui/issues/issues/186 寻求答案！

Tailwind CSS - 扩展颜色 - 命名颜色不同？

Tailwind CSS - Extend Colors - Named Color Different?

css

sass

tailwind-css