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

Posted 2023-03-07

【中文标题】Tailwind CSS - 扩展颜色 - 命名颜色不同？

【英文标题】：Tailwind CSS - Extend Colors - Named Color Different?

【发布时间】：2020-11-10 00:02:20

【问题描述】：

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

我的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 吗？

非常感谢任何帮助！

【问题讨论】：

所以你不想.bg-primary？

不，我不明白为什么 bg-primary 和 bg-indigo-600 是不同的，因为它们应该是相同的？

我已经解决了，请参阅发布的答案。如果您认为我应该重构这个问题，请告诉我。

我不知道。 Tailwind 专家可能会更好地理解您的问题。

【参考方案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 提问！