Início / coding / Perguntas / 78937836
Accepted
rozsazoltan
Asked: 2024-09-02 00:28:12 +0800 CST

Problemas de opacidade com cores dinâmicas no TailwindCSS

  • 772

Resumo

text-primary-500/50não está funcionando como esperado.

Declarar cor dinâmica

Eu tenho uma cor chamada primary. Essa cor não tem nenhuma configuração específica; em vez disso, eu atribuo cores existentes com base em um modelo. Se o elemento pai tiver a classe theme-red, a primarycor deve essencialmente corresponder à redcor. Se o elemento pai tiver a classe theme-blue, a primarycor deve corresponder à bluecor. Por padrão, a cor primária é vermelho.

Implementei isso no exemplo a seguir.

Exemplo

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>

Resultado

opacidade cor primária não funciona

Cores dinâmicas de opacidade não funcionam

O problema surge com cores transparentes, como text-primary-500/50. Ou seja, deveria estar text-primary-500com opacidade 0,5. Não funciona porque text-primary-500é essencialmente uma cor hexadecimal, mas em CSS, esperávamos um código de cor RGB, que poderíamos então misturar com opacidade em uma escala de 0-1. Como posso fazer funcionar de forma text-primary-500/50semelhante à minha lógica escrita?

Comportamento esperado

Eu esperava que a cor primária funcionasse da mesma forma que as cores base, como mostrado com a cor verde no resultado anterior. Aqui está um exemplo do que eu gostaria.

resultado esperado

css

1 respostas

  1. Best Answer

    Você pode considerar usar color-mix()na sua definição de cor. Isso permite que o uso do <alpha-value>token Tailwind afete a transparência de uma variável CSS que não esteja no formato de componente HSL ou RGB:

    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>

    Alternativamente, você pode considerar revisar a definição da variável CSS para estar dentro de um plugin Tailwind. Isso permite que os valores sejam manipulados para o formato de componente HSL ou RGB. Então, o <alpha-value>token pode ser usado mais "naturalmente" em uma função rgb()CSS 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

relate perguntas