代码之家 › 专栏 › 技术社区 › rozsazoltan

TailwindCSS中动态颜色的不透明度问题

tailwind-css css

rozsazoltan · 技术社区 · 11 月前

TL;博士

text-primary-500/50 没有按预期工作。

声明动态颜色

我有一种颜色叫 primary 。此颜色没有任何特定设置;相反,我根据模板分配现有的颜色。如果父元素具有类 theme-red ,the 主要的,重要的 颜色应与 red 颜色。如果父元素具有类 theme-blue ,the 主要的,重要的 颜色应与 blue 颜色。默认情况下,主色为红色。

我在以下示例中实现了这一点。

例子

tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: 'var(--color-primary-500)',
        },
      },
    },
  },
}

<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<style type="text/tailwindcss">
  @layer utilities {
    .theme-red {
      --color-primary-500: theme('colors.red.500');
    }

    .theme-blue {
      --color-primary-500: theme('colors.blue.500');
    }
  }
</style>

<div>
  <div class="text-green-500">
    Default Green Color
  </div>
  <div class="text-green-500/50">
    Default Green Color With Opacity
  </div>
</div>

<!-- Not working examples with dynamic primary color -->
<div class="theme-red">
  <div class="text-primary-500">
    Example Red Theme
  </div>
  <div class="text-primary-500/50">
    Example Red Theme With Opacity
  </div>
</div>

<div class="theme-blue">
  <div class="text-primary-500">
    Example Blue Theme
  </div>
  <div class="text-primary-500/50">
    Example Blue Theme With Opacity
  </div>
</div>

结果

不透明度动态颜色不起作用

透明颜色会出现问题,例如 text-premiary-500/50 也就是说,它应该是 text-primary-500 不透明度为0.5。它不起作用,因为 文本-初级-500 本质上是一种十六进制颜色,但在CSS中,我们期望有一个RGB颜色代码,然后我们可以在0-1的范围内将其与不透明度混合。我怎样才能让它工作 text-premiary-500/50 功能类似于我的书面逻辑?

预期行为

我希望原色与基色的工作方式相同,如前面结果中的绿色所示。这是我想要的一个例子。

1 回复 | 直到 11 月前

Wongjn 11 月前

你可以考虑使用 color-mix() 在你的颜色定义中。这允许使用顺风 <alpha-value> 影响非HSL或RGB组件格式的CSS变量透明度的标记:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: 'color-mix(in srgb, var(--color-primary-500) calc(100% * <alpha-value>), transparent)',
        },
      },
    },
  },
}

<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<style type="text/tailwindcss">
  @layer utilities {
    .theme-red {
      --color-primary-500: theme('colors.red.500');
    }

    .theme-blue {
      --color-primary-500: theme('colors.blue.500');
    }
  }
</style>

<div class="theme-red">
  <div class="text-primary-500">
    Example Red Theme
  </div>
  <div class="text-primary-500/50">
    Example Red Theme With Opacity
  </div>
</div>

<div class="theme-blue">
  <div class="text-primary-500">
    Example Blue Theme
  </div>
  <div class="text-primary-500/50">
    Example Blue Theme With Opacity
  </div>
</div>

或者,您可以考虑将CSS变量定义修改到Tailwind插件中。这允许将值操纵为HSL或RGB分量格式。那么 <α值> 令牌可以更“自然”地用于 rgb() 或 hsl() CSS功能:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: 'rgb(var(--color-primary-500) / <alpha-value>)',
        },
      },
    },
  },
  plugins: [
    tailwind.plugin(({ addBase, theme }) => {
      const toRgb = (hex) => {
        const r = parseInt(hex.substring(1, 3), 16);
        const g = parseInt(hex.substring(3, 5), 16);
        const b = parseInt(hex.substring(5, 7), 16);
        return `${r} ${g} ${b}`;
      };

      addBase({
        '.theme-red': {
          '--color-primary-500': toRgb(theme('colors.red.500')),
        },
        '.theme-blue': {
          '--color-primary-500': toRgb(theme('colors.blue.500')),
        },
      });
    }),
  ],
}

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<div class="theme-red">
  <div class="text-primary-500">
    Example Red Theme
  </div>
  <div class="text-primary-500/50">
    Example Red Theme With Opacity
  </div>
</div>

<div class="theme-blue">
  <div class="text-primary-500">
    Example Blue Theme
  </div>
  <div class="text-primary-500/50">
    Example Blue Theme With Opacity
  </div>
</div>