[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!
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.
Se quer algo menos verboso recomendo o plugin DaisyUI
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
Dê uma olhada https://www.tailwind-variants.org/, acho que você vai gostar.
Você pode também estar utilizando o Pattern de composição, segue um vídeo que explica como utilizar com o Tailwind e React https://www.youtube.com/watch?v=oPOKpSFqy-I&t=968s
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.
é melhor usar @apply