Tailwind é uma estrutura CSS que oferece um conjunto de valores predefinidos para várias propriedades, como cores, espaçamento, tamanhos de fonte, etc. No entanto, às vezes os usuários podem querer usar um valor que não está incluído na configuração padrão, como um personalizado cor ou uma margem específica. Nessa situação, eles podem usar valores arbitrários.

Este artigo explicará o método para usar valores arbitrários no Tailwind CSS.

Como utilizar valores arbitrários no Tailwind?

Valores arbitrários são os valores personalizados que podem ser gravados diretamente no atributo de classe HTML sem defini-los no arquivo de configuração do Tailwind. Eles são prefixados com uma notação de colchetes, como [24px], [2.5rem], etc. Para utilizar os valores arbitrários no Tailwind, use uma notação de colchetes e especifique qualquer valor personalizado para gerar classes de utilidade dinamicamente.

Confira as etapas listadas abaixo para melhor compreensão:

Etapa 1: Use valores arbitrários no programa HTML

Faça um programa HTML e utilize a notação de colchetes com qualquer valor personalizado para criar as classes desejadas. Por exemplo, usamos o “bg-[#e9e516]”, “w-[600px]”, “h-[400px]”, “p-[13px]”, e outras aulas:

Aqui:

• “bg-[#e9e516]” class define a cor de fundo do
  para “#e9e516” (amarelo).
• “w-[600px]” class define a largura do
  para 600 pixels.
• “h-[400px]” A classe aplica a altura de 400 pixels ao elemento
  .
• “p-[13px]” class define o preenchimento do
  para 13 pixels.
• “m-[19px]” class define a margem do
  para 19 pixels.

• “texto-[30px]” class define o tamanho da fonte do elemento

  para 30 pixels.

• “texto-[#7405ab]” class define a cor do texto do elemento

  para roxo (#7405ab).

• “rastreamento-[0,5rem]” A classe aplica o espaçamento entre letras a 0,5 rem ao elemento

  .

Etapa 2: verificar a saída

Para garantir que os valores arbitrários estejam funcionando corretamente, visualize a página da Web em HTML:

A saída acima indica que os valores arbitrários estão funcionando corretamente conforme foram definidos.

Conclusão

Para utilizar os valores arbitrários no Tailwind, use uma notação de colchetes com qualquer valor personalizado no programa HTML para gerar classes dinamicamente. Os usuários podem usar valores para qualquer propriedade que aceite um valor numérico ou de cor, como tamanho da fonte, cor, largura, altura, margem, preenchimento etc. Este artigo explicou o método para usar valores arbitrários no Tailwind CSS.