顺风CSS-扩展颜色-命名颜色不同？

我正试图创建一些命名的颜色从顺风，它的作品，但颜色实际上是不一样的

My 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));
}

正如你所看到的，它们是不同的颜色，但它们都应该是靛蓝600

---

非常感谢任何帮助

好的，这是因为我使用的是TailwindUI，TailwindUI的颜色设置与TailwindCSS不同，因此不同

TailwindCSS调色板

TailwindUI调色板

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

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

希望这也能帮助别人

---

回答也有权

所以你不想要

.bg primary

？不，我不明白为什么bg primary和bg-indigo-600是不同的，因为它们应该是相同的？我已经计算出来了，请参阅发布的答案。如果你认为我应该重构这个问题，请告诉我。我不知道。顺风专家可能会更好地理解您的问题。