Executando verificação de segurança...
2
ecthon
1 min de leitura ·

[DÚVIDA] - Tailwind css

Pessoal, relutei por muito tempo em usar o Tailwind, mas chegou o momento da verdade.

Pra ser menos doloroso ver aquele monte de "flex flex-col bg-gray-900 ...", tenho colocado as estilizações em uma variável e depois chamo ela na minha className.
Exemplo:

const container = `flex w-screen h-screen bg-gray-900`
<div className={container}></div>

Daí eu pergunto: pode isso, Arnaldo? Tem algum impacto positivo/negativo fazer a estilização dessa forma?

Conto com a ajuda de vocês.
Abraços!

Carregando publicação patrocinada...
1
renanrider

Não é aconselhavél, pois a classe css fica oculta em uma variável dificultando a modificação e entendimento. E a criação de variável desnecessárias.

1
ecthon
Autor
Autor

Creio que seria parecido com o styled components, e também poderia criar um arquivo e dar o 'export' dessas classes. Mas obrigado pela dica, Renan.

1
1
0
1
klawdyo

Não. Tá tudo certo. É assim mesmo.
Se você quiser, também é possível criar suas próprias classes usando o @apply e encadeando varias regras.
Ex.:

.btn{
  @apply bg-black text-white rounded;
}

Nesse caso você só chama a class btn.
Funciona de boa tbm.

Na comunidade a recomendação é pela primeira opção, mas eu particularmente uso sempre o apply quando fica com muitas classes

1
1
klawdyo

Tem, também, opções que já estão prontas para uso, no estilo do bootstrap, por exemplo.
Eu gosto do daisyui. Ele já tem uma base muito boa pra começar e como é totalmente feito em tailwind, você acaba podendo personalizar tudo o que quiser.

1
1
1
1
1
Cenom

Pra mim o lado bom de usar Tailwind é poder ver todas as classes direto no componente para melhorar/mudar o que for necessário com facilidade. Sei que tem o @apply que é a forma correta de implementação disso, mas mesmo o autor do Tailwind diz que se ele pudesse voltar no tempo ele não teria implementado isso.

0