Início / coding / Perguntas / 79597331
Accepted
Skunka
Asked: 2025-04-29 05:50:12 +0800 CST

Como usar a função hsl() na diretiva @theme do tailwind

  • 772

Estou tentando definir uma variante de cor com hsl()uma função css dentro @themeda diretiva Tailwind 4, mas isso não se aplica:

@theme {
    /* Colors */
    --color-primary: #006fa0;

    /* Darken colors */
    --theme-color-primary-darken: hsl(from var(--color-primary) h s calc(l - 5));

    /* Lighten colors */
    --theme-color-primary-lighten: hsl(from var(--color-primary) h s calc(l - 5));
}

As variantes de cores mais escuras e mais claras são exatamente as mesmas que as originais.

Dei uma olhada em algumas respostas existentes, como como usar hsl-custom-color-in-tailwind-in-react, mas todas elas disseram para usar tailwind.config.js, mas o Tailwind 4 agora tem uma zero-configabordagem, então eu queria saber como posso obter minhas variações de cores diretamente no arquivo css?

css

1 respostas

  1. Best Answer

    Você também pode declarar as cores mais escuras e mais claras no --color-*namespace assim:

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  /* Colors */
  --color-primary: #006fa0;

  /* Darken colors */
  --color-primary-darken: hsl(from var(--color-primary) h s calc(l - 5));

  /* Lighten colors */
  --color-primary-lighten: hsl(from var(--color-primary) h s calc(l + 5));
}
</style>

<div class="w-full h-8 bg-primary text-white">primary</div>
<div class="w-full h-8 bg-primary-darken text-white">primary-darken</div>
<div class="w-full h-8 bg-primary-lighten text-white">primary-lighten</div>

    • 0

relate perguntas