Salve amigos!
Sempre utilizei bootstrap desde a sua versao 2. Vejo muita gente migrando para Tailwind. Minha duvida é:
eu não vejo sentido no nível de fragmentação do tailwind. se você tem uma classe para cada comando css, qual a diferença de escrever um atributo style na tag?
independente da tecnologia que você está trabalhando sempre vai acontecer de você identificar padrões que se repetem em vários lugares, te permitindo criar uma camada de abstração, diminuindo o esforço de fazer a mesma coisa novamente.
qualquer abordagem que te faça escrever mais código para o consumo tende a ser uma solução pior para manutenção.
você deve escolher o que deseja entre: flexibilidade, desempenho, esforço.
ainda podem existir outras escolhas envolvidas e você nunca terá o melhor de todas elas ao mesmo tempo.
Rapaz com Tailwind foi amor a primeira vista, cuidado você pode ficar viciado também. Aprenda ele, você só tem a ganhar.
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
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;
}
}
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
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
O "melhor" vai depender de cada caso, por exemplo:
Se você não tem um Design System, gosta do estilo de design que o Bootstrap já trás por padrão ou está com pouco tempo disponível para ficar estilizando, neste caso o Bootstrap vai ser melhor.
Se você quer mais liberdade para estilizar, criar variantes de componentes de forma mais simples ou gostaria de estilizar com mais agilidade do que teria ao criar classes e definindo propriedade CSS, então o Tailwind seria melhor.
EDIT: Eu já usei muito os 2 e adoro os 2, mas acredito que cada um deve ser usado na situação em que mais vai ser aproveitado.
Pelo que eu pude ver, a renderização do TW parece mais "bonita" ele consegue entregar um design melhor que o BS, mas a simplicidade do BS é fora do comum.
Obrigado pelo ponto de vista!
Já estudou o básico de Tailwind e criou alguma página por mais básica que seja?
Se fizer isso, você vai ter muito mais base para tomar uma de decisão.
Lembrando que conhecimentos se acumulam, se já usa Bootstrap faz anos, não vai te atrapalhar em nada aprender mais uma ferramenta e no futuro saber quando adotar uma ou outra.
Obrigado mas eu só queria a opinião de qual tem a melhor aceitação.
Uma pergunta muito relativa, ambos são ótimos porém devem ser usados em momentos diferentes variando do projeto.
Por exemplo, Bootstrap te fornece componentes prontos em js, então se não for utilizar um framework js mais atual (Vue por exemplo), eu iria de Bootstrap visando a perda de tempo que seria construir os mesmos componentes em javascript + tailwind.
Obrigado pela resposta! Realemnte pensando no lado JS sim. Vou subir uma aplicação angular então nesse caso acho melhor TW né
Eu já trabalhei com os dois, e na minha opinião, vai depender do projeto que você está trabalhando.
Se você está em um projeto rápido e pequeno, o bootstrap é melhor, porquê ele tem vários componentes prontos com JS e tudo mais. A desvantagem é que os layouts são bem "padrões", então se quiser um visual diferente, vai ter que usar CSS também.
Por outro lado, se você está trabalhando em um projeto maior e que precisa de um visual mais elaborado, o Tailwind é melhor.
Quanto ao HTML sujo, na minha opinião, não é um problema, desde que você tenha uma arquitetura bem planejada. O componente pode ter 50 classes CSS, se precisar, se o componente tiver bem feito e bem estruturado, não vai ser um problema.
Excelente Thuany, penso em telas complexas que mesmo componentizando cada sessão, pode gerar um html bem mais "sujo" do que usando um css externo. Mas suas considerações são importantes. Obrigado
Qual o melhor framework será sempre uma escolha pessoal.
A verdade é que dá pra fazer projetos excelentes com ambos. Quem reclama do layout basicão do bs nunca sequer tentou customizá-lo - e é bem fácil fazer isso. Por outro lado, se tu trabalha com projetos bem componentizados, não será um problema a verbosidade do tailwind. Também há boas libs que fazem o trabalho js para ele.
Mas qual eu escolheria?
Se eu fosse frontend e quisesse me aventurar em vagas maiores, focava no tailwind. Mas se eu sou back ou fullstack, escolheria o bootstrap.
Excelente ponto tiagoo, obrigado. Aliás, eu trabalho com BS desde a versão 2, já customizei bastante e tem projetos que nem parece BS
Rapaz, o html "sujo", é o charme rsrs. Brincadeiras à parte, eu tive contato com ambos e posso dizer, sem sombra de dúvidas que o Tailwind é uma boa escolha. Meu primeiro contato com Tailwind foi quando eu estava fazendo uma tela de login para um projeto pessoal, eu ainda estava aprendendo CSS... Comecei a usar e posso dizer que isso me ajudou bastante! Pois não só aumentou meu entendimento de estilização, como também me ajudou a ter meus primeiros contatos com bibliotecas de estilo!
Mas você deve estar pensando: "Como que uma pessoa vai direto pra lib e deixou o CSS de lado?". Aí que tá, a documentação do Tailwind é tão boa, que eu aprendi muitas coisas, já produzindo com a lib mesmo. A questão de HTML poluído, posso dizer para você que é algo que pode se contornar, com a componentização dentro do seu projeto, ficando bem mais simples no futuro de fazer qualquer manutenção no estilo de sua aplicação.
Que massa Kamtius, eu vi mesmo alguns devs falando que aprenderam bastante css usando o TW. Eu comecei a usar css em 2004 e cheguei com uma boa base no BS. Agora quero começar a usar o TW. Como sou da época dos dinossauros rs, eu sou meio arredio a linguagens verbosas por trauma. Mas obrigado pelo relato
O Tailwind é bem legal, mas eu acho o conjunto do Bootstrap muito forte. Os componentes prontos, a compatibilidade, documentação extensa (oficial e dos devs pela net afora). A customização do Bootstrap eu acho bem tranquila. Tempos atrás eu estive com essa mesma pergunta e não vi razão suficiente para abandonar um framework foda que nem o Bootstrap. Sou fã, então posso estar um pouco enviesado, rsrs. Boa sorte na escolha.
A minha pergunta aqui foi exatamente por conta disso rs. Sempre usei o BS mas de tanto ver a galera falar do TW fiquei balançado. Hj mesmo vou fazer uma poc aqui para ver a curva de aprendizado com ele
Tailwind é maravilhoso, a liberdade que ele dá é simplesmente incrível, mas nem sempre vale tanto a pena, como por exemplo com frameworks como Nextjs que naturalmente enviam um monte de js desnecesário, se adicionar a isso milhões (leve hipérbole) de classes, pode deixar o carregamento da página lento ou até impossível pra quem usa dados móveis, imagina só seu usuário acabando com o plano só pra abrir duas páginas
Realmente tem casos que precisamos entender se vai ajudar ou atrapalhar, mas estou sinceramente engajado em usar
Sempre utilizei Bootstrap nas minhas aplicações por questão de velocidade de desenvolvimento. Porém após conhecer o Tailwind, mesmo com algumas birrinhas minhas, percebi que o este me traz uma velocidade consideravelmente maior em relação ao primeiro, além de me proporcional uma personalização melhor e manutenção fantástica.
1- Sim, compensa deixar o html mais sujo, pois separo em componentes. Então nem fica tão sujo assim.
2- Tailwind já está também consolidado. muitas tecnologias já o utilizam até como padrão, então não acredito que vá desaparecer do nada.
Atualmente utilizo o Tailwind na TALL Stack do Laravel. (Laravel, Livewire, Tailwind e AlpineJS), e a funcionalidade js do Bootstrap é facilmente executada por meio do AlpineJS.
Já existem componentes prontos nessa stack como o Tall Stack UI, WireUI, TailwindUI etc que podem agilizar ainda mais o seu desenvolvimento.
Excelente resposta silvestrini! Muito obrigado pelo seu tempo, vou considerar muito.
Gostaria de frisar a Tall Stack UI mais uma vez, pois embora esteja em inglês para toda a comunidade Laravel usufruir, é fruto de um trabalho da comunidade brasileira do PHP.
Quem está liderando isso é o AJ do canal Eu sei PHP no Youtube. Mesmo ainda não estando na versão estável para produção, já venho sempre utilizando nos projetos e salva demais. Toda a parte de interação por meio do AlpineJS e reatividade com Livewire facilitam demais a vida, é basicamente copiar e colar.
Excelente, ainda mais sendo brazuka vale a pena considerar sim! Obrigado man
Não fugindo muito do clichê: depende kkkkk.
Se vc não precisa de uma interface muito personalizada, só precisa que seja funcional, responsiva e agradável, continuar no bootstrap me parace melhor.
Mas se a interface tem que ter uma cara mais única, ou vc precisa mais de flexibilidade o tailwind vai ser uma opção muito boa.
Eu sinceramente nunca fui muito fã de bootstrap, sempre achei que as interfaces ficam sempre com a mesma cara, e como o bootstrap é muitíssimo utilizado, pra mim essa cara é de software genérico. Mas muitas vezes é disso que seu cliente precisa, só precisa ser entregue rápido e de maneira funcional, se vai ter a mesma cara de outros mil sites não é problema.
Mas acho que atualmente já existem alternativas de libs de componentes de UI que usam tailwind que podem acelerar esse processo também, como o DaisyUI. O bom de usar o tailwind é que ao mesmo passo que te dá o componente pronto ele também te deixa livre pra personalizar.
Obs: sobre deixar o HTML sujo, eu sentia muito isso no início, mas acabei me acostumando e nem acho ruim mais. E já ouvi esse mesmo relato de outros dev's. Vc meio que se acostuma
O fato de deixar o HTML sujo pra mim ainda é uma barreira, pois se o componente começa a ficar grande, até o code review fica complicado. Vou analisar essa lib que vc passou. Obrigado pelo tempo gustavomont! Tmj
Eu já usei com o HTML puro e de fato ele deixa o HTML sujo, porem usando com o react e podendo criar componentes reutilizáveis, é de boa.