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

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/

Fonte: https://raphaelramos.dev/blog/voce-deve-usar-tailwindcss/

Carregando publicação patrocinada...
3
GheistLycis

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.

1
raphaelramos
Autor
Autor

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.

1
1
1
1
1
rogeriodev

Ó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.

0
RafaDfb

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.

  1. Ele é ALTAMENTE customizável, basta redefinir as variáveis ou acrescentar o que quiser.
  2. Você pode usar apenas o que quiser dele!
  3. ele dá suporte a tudo que vc precisar.
  4. 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.