Rapaz com Tailwind foi amor a primeira vista, cuidado você pode ficar viciado também. Aprenda ele, você só tem a ganhar.
Em resposta a [UI] - O que é melhor? Bootstrap ou Tailwind
3
1
Já fiz uma poc ontem e meu amigo, o negócio é dahora, mas ainda continuo incomodado com a verbosidade que fica no html, mas acho que é questão de costume
2
Use o @apply e crie presets.
<style type="text/tailwindcss">
@layer utilities {
.icons {
@apply size-6 p-1 fill-zinc-600 rounded-md;
}
}
@layer base {
h1 {
@apply text-3xl font-bold;
}
h2 {
@apply text-2xl font-semibold;
}
h3 {
@apply text-xl font-semibold;
}
p {
@apply text-[0.775rem] font-semibold;
}
a {
@apply text-[0.775rem] font-semibold;
}
span {
@apply text-[0.775rem] font-semibold;
}
label {
@apply text-[0.775rem] font-semibold text-zinc-700 ;
}
input:not([type="checkbox"]) {
@apply p-1.5 bg-zinc-50 border rounded-md border-zinc-400 focus:outline-none focus:ring-[0.0775rem]
focus:ring-zinc-900 text-xs text-zinc-700 font-semibold;
}
}
2
Use componentes do react, svelte, vue e etc, é pra isso que eles servem, pra não repetires código.
O proprio autor do tailwind disse que se arrependeu de ter adicionado o @apply
1
Sobre esta questão da verbosidade, tem o @apply que permite enxugar as classes css, caso deseje replicar a mesma rotina. Não esquenta a cabeça pensando qual é o melhor, isso é pessoal. Apenas conheça a ferramenta, dê uma chance a ela. Você só tem a ganhar dominado dois frameworks