主页 / coding / 问题 / 78937836
Accepted
rozsazoltan
Asked: 2024-09-02 00:28:12 +0800 CST

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

  • 772

总结

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

声明动态颜色

我有一个名为 的颜色primary。此颜色没有任何特定设置；相反，我根据模板分配现有颜色。如果父元素具有 类theme-red，则primary颜色应与颜色基本匹配red。如果父元素具有 类theme-blue，则primary颜色应与颜色匹配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-primary-500/50。也就是说，不透明度应为text-primary-5000.5。它不起作用，因为text-primary-500本质上是十六进制颜色，但在 CSS 中，我们期望使用 RGB 颜色代码，然后我们可以将其与 0-1 范围内的不透明度混合。我该如何使其工作，以便其text-primary-500/50功能与我编写的逻辑类似？

预期行为

我希望原色与基色的工作方式相同，如上一个结果中的绿色所示。以下是我想要的示例。

预期结果

css

1 个回答

  1. Best Answer

    您可以考虑color-mix()在颜色定义中使用。这允许使用 Tailwind<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 组件格式。然后，可以在CSS函数<alpha-value>中更“自然”地使用该令牌：rgb()hsl()

    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>

    • 2

相关问题