Início / coding / Perguntas / 79583168
Accepted
Math
Asked: 2025-04-20 16:21:52 +0800 CST

Valores de espaçamento personalizados no Tailwind.css v4

  • 772

Como você deve saber, o Tailwind 4 já está disponível. Na versão 3 e anteriores, eu sempre uso esse pequeno trecho no meu arquivo de configuração para obter os valores de espaçamento que eu quiser. Mas como posso usá-lo na versão 4, já que não há mais configuração?

spacing: {
  ...new Array(1001)
    .fill()
    .map((_, i) => i)
    .reduce((acc, val) => {
      acc[val] = `${val / 10}rem`;
      return acc;
    }, {}),
},
tailwind-css

1 respostas

  1. Best Answer

    No Tailwind v4, qualquer número inteiro funciona onde valores de espaçamento são usados, com a configuração padrão. Por exemplo, p-1funciona, assim como p-123456789:

    <script src="https://unpkg.com/@tailwindcss/[email protected]"></script>

<div class="mt-123 size-10 bg-red-500"><div>

    Porém, para que a escala de espaçamento corresponda à sua configuração 10 = 1rem, você alteraria a --spacingvariável do tema:

    @theme {
  --spacing: 0.1rem;
}


    <script src="https://unpkg.com/@tailwindcss/[email protected]"></script>

<style type="text/tailwindcss">
@theme {
  --spacing: 0.1rem;
}
</style>

<div class="mt-123 size-10 bg-red-500"><div>

    • 1

relate perguntas