Você deve usar tailwindcss!

Claro, o uso é relativo, já que uma ferramenta que se encaixe em um projeto não significa ser a ideal em todos os outros. Mas agora que consegui sua atenção com o título, veja alguns motivos para considerar usar o tailwind no seu design system.

Podemos dividir frameworks CSS nas categorias Components e Utility como veremos a seguir.

Diferente de outros populares frameworks de CSS, como o bootstrap, que traz apenas o design pronto com estilização (components), o tailwind traz classes para você criar seu próprio design (utility).

Seu código vai ficar cheio de classes e parecer feio, o que mais incomoda alguns devs, porém isso vem com alguns benefícios.

Você deve usar a letra S (Single Responsability Principle) do SOLID para que seu código não fique sujo, evitando componentes complexos.

Pontos que me fizeram optar pelo tailwind:

Maior controle na linguagem visual, mais leve por usar apenas as classes necessárias e vai melhorar seu conhecimento de estilos CSS em comparação a um framework de componentes.
Curva de aprendizagem não muito alta. As classes utilitárias de tamanho são abreviações de estilos CSS. Por exemplo, padding-bottom: 10px é a classe pb-10 e definir a classe apenas para um tamanho de tela também é simples com um prefixo. Para dispositivos de tamanho médio seria md:pb-10;
Tudo pode ser personalizado. Use o arquivo tailwind.config.js para criar seu próprio Design System. Você pode levar seus tokens de UI para lá;
Adotado por grandes empresas;
Exibido na documentação do Next.js;
É possível usar componentes ou a diretiva @apply para evitar duplicação de código;

Dica: Extensão Tailwind CSS IntelliSense para VS Code.

O bootstrap não morreu e temos outras opções atraentes, como o styled components.

Se você é iniciante recomendo estudar bootstrap, que possui curva de aprendizagem baixa e é usada também no mercado e depois partir para uma solução de utilitários como o tailwind. Bootstrap também venceria em um cenário que você precise desenvolver um produto rápido já estilizado.

Esse artigo é sobre frameworks e não Tailwind vs CSS. Há quem prefira o CSS puro e ter menos classes no HTML, o que também é válido, porém ao dominar o framework pode haver ganhos de velocidade no desenvolvimento.

Confira o ranking dos frameworks CSS em 2022

https://2022.stateofcss.com/en-US/css-frameworks/

GheistLycis há 2 anos

Mas qual a vantagem afinal? Tailwind sempre me pareceu como o simples ato de ter que escrever CSS no HTML sem estar escrevendo CSS, não tendo ganho de agilidade além de "poluir" o HTML. Existe apenas aumento de dependências e complexidade, ao mesmo passo que deixa de utilizar de forma completa algo que já está presente de forma nativa: o CSS. Bootstrap, por exemplo, se justifica porque me traz muita estilização pronta + media query + componentes funcionais com apenas uma ou algumas classes (além das micro estilizações), então existe um ganho claro.

raphaelramos há 2 anos

Bom argumento. Para quem prefere CSS puro, e eu prefiro muitas vezes, pode ser o melhor em alguns projetos. Aqui eu procurei falar dos frameworks para quem vai utilizar e entre eles hoje prefiro o tailwind. Acredito não ter como comparar framework vs linguagem de forma clara, mas em alguns casos o tailwind pode acelerar o desenvolvendo para quem já tem o domínio. Seria a vantagem. No aumento de dependências não seria relevante em questão de tamanho final, já que fica no código de produção apenas as classes utilizadas e não o framework todo. O tailwind seria para quem já possui o seu próprio design system e não quer inserir os componentes do bootstrap, do contrário, para a necessidade de estilização pronta o bootstrap é melhor mesmo.

DanielZtimhcs há 2 anos

Eu tb nao gosto do tailwind nao !!! Nao sei pq isso ta virando tendencia KKK

carlosjoubert há 2 anos

Vc disse tudo que penso.

Viniciusam há 2 anos

É sempre bom lembrar que o @apply não é recomendado porque ele basicamente joga toda a filosofia do Tailwind fora. Até o Adam Wathan já falou sobre isso https://twitter.com/adamwathan/status/1226511611592085504

raphaelramos há 2 anos

Não conhecia essa fala dele. Boa observação.

rogeriodev há 2 anos

Ótimo! Eu tenho a mesma opinião, quando o dev deseja mais praticidade, rapidez é melhor ir pelo bootstrap,caso contrário, é interessante usar o Tail.

RafaDfb há 2 anos

Bootstrap não é o mesmo de anos atrás.

hoje em dia escuto muita gente reclamando do bootstrap por motivos que não condizem mais com a realidade desse framework.

Ele é ALTAMENTE customizável, basta redefinir as variáveis ou acrescentar o que quiser.
Você pode usar apenas o que quiser dele!
ele dá suporte a tudo que vc precisar.
Itengra o css e Js de forma muito intuitiva, customizável e produtiva.

O Bootstrap é dividido em algumas partes, ja que ele não é so um framework css. Ele é composto po Utilities e Componentes. dessa forma você pode só usar as utilities, como as famosas classes w-25 (width: 25%), h-auto (height: auto), d-flex (display: flex), flex-md-reverse (a partir de 768px aplica direção reversa no flex)...

Ou tbm usar os componentes, como Botão, modal, tooltip e etc... todos com os eventos prontos pra voce utilizar, como por ex. quando a modal abre, está abrindo, fecha esta fechando ele já emite o evento muito útil pra combinar com AJAX. Tbm usa data-attributes para, por exemplo, passar dados pro componente facilmente ficar dinâmico e reativo... Gente tem muita coisa boa nele!

Tudo com apenas Css, Sass e Js (ele não usa mais jQuery há algumas versões).

Claro que se vc so meter a cdn, e não fizer nada, vai ficar tudo padrão.. mas aí é relaxo do frontend que fez kkkkk, porem funciona que é uma beleza e não fica com HTML poluído.

A versão mais nova tem suporte para tema escuro, classe de contraste (letra e background) e muito mais.