Tailwindcss
Tailwindcss
Você já ouviu falar dessa lib ?
Caso não, é uma biblioteca de estilização, com o intuito de otimizar e agilizar seu código.
Como funciona ?
No Tailwind você encontra algumas classes prontas para uso, mas você pode fazer a sua própria no arquivo de configuração "tailwind.config.js". Você pode encontrar exemplos de componentes na documentação da biblioteca, podendo ter uma base de como irá ficar seus componentes.
Você aplica toda estilização na propriedade de classe do seu componente, com nomes de CSS, porem simplificado.
Aplicando no código
Como é dito, você aplica a estilização através de classes, exemplo:
<div class="flex items-center w-full h-[15rem] bg-[#6ef195]">
<h1 class="text-violet-500 font-sans">Hello World</h1>
</div>
Podemos ver que é bem semelhante as tags CSS, como "bg" sendo background ,"flex" igual à display flex, entre outros...
Realmente é bom ?
De primeira vista, pode parecer que é complicado ou que pode atrapalhar o código, mas fica bem prático e muito bonito com algumas classes que já vem na lib.
Existem algumas classes que podem te ajudar muito, com exemplo a de fazer gradiente:
<div class="bg-gradient-to-bl from-[#30aadd] to-[#00ffc6] flex items-center justify-center">
<h2>Hello World</h2>
</div>
bg-gradient-to-bl se refere bottom left, sendo a direção do gradiente
Caso você tenha se enteressado, o link da documentação está logo abaixo
Muito obrigado, até a próxima