Tailwind CSS realmente deixa o código sujo? 🤔
ฝัง
- เผยแพร่เมื่อ 13 พ.ค. 2021
- Este vídeo tem 2 propósitos: primeiro é uma demonstração básica do que é a Tailwind CSS (www.tailwindcss.com) e o segundo é desmistificar os comentários de que ela deixa o HTML sujo e difícil de trabalhar.
Curso Aprenda a Testar Aplicações Javascript: javascript.tv.br
Remote2Hire: bit.ly/remote2hire - วิทยาศาสตร์และเทคโนโลยี
Tenho gostado bastante do Tailwind.
Acho que a história dos desenvolvedores com ele (inclusive a minha) é sempre muito parecida:
1. "Nossa que código sujo"
2. "Até que não é tão ruim assim"
3. "Tailwind? Tô usando pra tudo"
Sou fã de escrever regras de estilo na unha mas ultimamente tenho achado isso muito impraticável na hora de fazer projetos, abrir meus olhos pro Tailwind agora foi uma coisa muito boa.
@Viajante aprendiz Melhor a se fazer é aprender o básico de HTML e CSS antes de aprender o Tailwind. Caso contrario acho que vai surgir vários problemas referente ao básico de CSS no caminho. E vai tirar o seu foco do aprendizado do Tailwind.
O htm fica completamente poluído, mas usando os @apply para criar classes semânticas e mais objetivas, é só amor heuaea
Porque impraticável?
As classes realmente não são complicadas quando se para pra estudar o Tailwind. Mas ai que tá, é só uma camada a mais do que estudar CSS e usar um pré-processador pra chegar no mesmíssimo resultado, e ainda podendo chegar ao pixel perfect muito mais facilmente.
Se usar Tailwind no HTML fica sujo pra caramba. E usar o @apply ao meu ver não tem sentido, porque não escrever CSS logo se já está num arquivo CSS? Abstração? Mas alcança-se um resultado melhor ainda com um pré-processador te dando liberdade de criar seus próprios utilitários e usar da mesma forma que o @apply.
O CSS em si já é utilitário se você parar pra pensar. Usar opacity-50 (Tailwind) ou opacity: 0.5 (Vanilla) é a mesma coisa. Se você teve que nomear uma classe, você faria o mesmo com CSS. Na MINHA opinião, é um trade-off perdido
Tailwind é apenas uma forma diferente de aplicar o CSS, uma forma diferente de organização. O BEM, por exemplo, também é uma abstração e ainda assim é muito utilizado. SASS também. O mesmo vale para JS e React ou Vue. No final, para mim e muitos outros que gostam de Tailwind, é uma abstração que nos torna produtivos. Não estou preocupado se faz sentido. Minha meta é entregar mais rápido, de forma sólida e com uma boa UX. E com Tailwind, assim como foi com Bootstrap antes, eu consigo me preocupar só com o que me interessa: Javascript, componentes e comportamento! E assim como eu, há milhares! Abração!
Concordo, acho que ser produtivo na verdade é questão de angulo, e o tailwind não deixa mais ou menos produtivo, acho que pra um bom profissional de front acaba dando na mesma, e digo mais acho que é ainda mais seguro a escria no css é mais segurança do começo ao fim do que ter que decorar uma lib inteira pra fazer as mesmas funções
Sua didática só cresce, obrigado mestre.
Me salvando mais uma vez com suas explicações diretas e direitas. Obrigado irmão!
Mestre Ved... sempre uma aula. Obrigado professor. Show!
Você é show! Que didática maravilhosa! Obrigado pelo vídeo!
Baita conteúdo Vedovelli. Parabéns!
Genial, tanto o conteúdo como a sua apresentação. Obrigado.
Excelente vídeo, como sempre. Seus materiais são sempre de excelente qualidade.
Parabéns pela iniciativa ótimo vídeo, bem explicado!
Sensacional!
Ótimo conteúdo.
Parabéns!
👏🏽👏🏽👏🏽👏🏽👏🏽
Como sempre, um ótimo video.
Estou usando tailwind num projeto em nextjs. Uma maravilha.
Parabéns vedovelli, vídeo muito bom!
Agradeço seu compartilhamento de conhecimento! Parabéns! 🎈🎉🎊🍾
Estou aprendendo CSS agora e adorei essa instrução! Obrigado!
Caramba! Que vídeo maravilhoso! Vou testar e começar a usar esse cara nos projetos pessoais 😃
Excelente aula!!! Muito obrigado!
Olá Fabio, a sua didática é excelente!
Parabéns!
Maravilhosa explicação. Grato!
Suas dicas foram muito elucidativas e bem didáticas, com isso me cativou como inscrito e já me incentivou a utilizar o TailwindCSS. Muito obrigado. Não custa nada tentar o que parece ser bom.
Ótimo vídeo, meu amigo! Simples, rápido e objetivo! Parabéns!
Mestre, primeira vez que assisto ao seu canal, e simplesmente MARAVILHOSO!!! vou maratonar todinho!
simplesmente fantástico amigo, fantástico !!
Fabio Vedovelli sua didática é impressionante em todo lugar que eu apresento seus vídeos o pessoal fica feliz com a facildiade de aprender contigo.
Estava receoso para utilizar, o vídeo já me deixou mais tranquilo. Obrigado
Parabéns Fabio, excelente vídeo
po amigão, que exposição boa sobre o assunto, sua explicação é muito clara e direta, obrigado pelo vídeo!
Aulão hein Ved!!! Vc ja me levou pro Laravel, agora está levando para o Tailwind. Forte abraço!
Que vídeo incrível, Fábio. Estava justamente pensando se era possível fazer algumas das coisas que você fez agora e me sinto ainda mais convicto de como o Tailwind é uma ferramenta é maravilhosa. Muito obrigado!
Tava pesquisando sobre isso esses dias e encontrei esse video maravilhoso, agora vamo na busca de entender o styled components
Vídeo muito esclarecedor e claro. Me ajudou bastante.
Como sempre sensacional
Cara, que ótimo esse vídeo! Agora aprendi a trabalhar com tailwind usando componentes e classes próprias com tailwind e css juntos! Muito Obrigado!
Vídeo excelente, deu pra aprender bastante coisa nessa aula.
Parabéns, Vedovelli! pelo ótimo conteúdo!
Confesso quando conheci o tailwindcss logo me assustei com muitas informações no html, mas depois que comecei a utilizar e conhecer a ferramenta melhor, não consigo deixar - lo. rsrsrs.
Muito bom, ganhou o inscrito! Continue o trabalho bacana :)
Muito bom Fábio! O tailwind tem me chamado a atenção. Vou começar a usar.
Valeu irmão, começando agora com tailwind já me inscrevi no seu canal e ativei o sininho rsrs só fiquei triste por ter demorando encontrar esse canal.
O vício de usar Tailwind ta tão grande, q eu comecei a usar no React Native. E sobre o vídeo, mas uma vez parabéns! Ótimas dicas.
Esta ficando top o Tailwind no React Native
Qual biblioteca usa? Estou com receio pois não encontrei nada oficial...
@@doug203 usei a tailwind-rn
Sensacional Ved!!! Partiu Tailwind.. Continue o bom trabalho!!
7 boa a explicação, gostaria de ver mais aulas sobre tailwind. Parabéns.
show, eu nao usava pois achava muito dificil, mas esse video abriu minha mente, obrigado
Que fodaaaaaaaa! Eu já amava tailwind e quando vi essa questão do "@apply" 🤯🤯
Que coisa linda ver essa praticidade, principalmente para o responsivo, muito obrigado pelo vídeo man, conteúdo fodaa!
Conte pros amigos!!! Ajude o canal a crescer!!
Único vídeo que me animou a usar Tailwind. Obrigado.
Excelente video! Com a versão 12 do angular dando suporte a integração com Tailwind eu comecei a pouco implementar e vira um vício.
Nossa que massa! Isso sim faz toda diferença.
Baita aula! Eu tinha a impressão também que ficaria, agora vendo o uso do @apply e essa @layer components ficou perfeito.
Vou experimentar em algum projeto com React. :)
Muito bom!! Não sabia desse sistema de agrupamento em classes com o apply!
Adorei seu vídeo! Acabei de conhecer seu canal, ganhou mais um inscrito!
Muito bom Vedovelli. Tailwind é muito bom, e me ajudou bastante a entender melhor a própria css…
Mestre Vedovelli, faz tempo que não vejo vídeos seu, quando comecei com Laravel foi assistindo seus vídeos.
show de bola, muito bom estou me adaptando, Tailwind CSS facilitou muito para mobile
Obrigado, tirou minha dúvida.
Muito bommmmmm como sempre!
Esse @apply resolveu o problema. Perfeito!
Obrigradíssimo pelo excelente vídeo, foi um divisor de águas, depois de muita procura, finalmente um vídeo mostrando na prática os benefícios do framework e com uma excelente didática, parabéns .... Não pretendia utilizar o tailwind, mas, depois deste vídeo, certamente já penso utiliza-lo para produção.
Fico muito feliz!
Grande Vedovelli mais uma vez defendendo os frameworks que gosta, grande aula! Me mostrou o Tailwind de uma forma diferente
Excelente video parabens! Amo a Tailwind
Fantastico!!! Solta pra nos uma serie projetinho usando o tailwind....
Fantástico grande Vedovelli! Já tinha ouvido muita gente falar a respeito dessa "sujeira" da Tailwind e após essa aula foda estou pensando em começar usar. Parabéns dinossauro.
Curto demais o Heroicons do Tailwind Lab também!
Só uso ele agora!
To criando uma extensão pro chrome e tanto o TWCSS quando o Heroicons bons demais!
Que aula, camarada!
Sensacional!!!!
Ainda não comecei a usar mas vendo dois vídeos seus estou bastante curioso. Vou acabar testando em um projeto pessoal Laravel, Inertia e Vue
Ótimo video !
Vim pelo twitter do Diego Fernandes, parabéns pelo conteúdo!
Esse vídeo abriu meus olhos kkkkk Nunca mais reclamo de código sujo. Agora é só amor ao Tailwind 😍
Ótimo vídeo, dismistificando aquele mito de que Tailwind CSS suja seu código. Hehehe, adorei.
Fantástico, a única coisa que não entendi bem foi a medida (rem) que eu sinceramente nunca usei. Vou procurar saber mais!
Muito bom Fabio, eu não conhecia Tailwind...
Excelente 👏👏😁
parabens pelo video, deu para ter uma ba noção sobre o tailwindcss. Um outro aspecto interessante que vc destacou é que open source pode ser proprietario, mas achei um pouco simplista ate incorreto associar a questão de ser proprietario só por ser uma lib não nativa, pq a questão do ser proprietario ou não tem relação a licensa de distribuição. Tenho certesa que vc compreende isso e só quis avançar sem precisar explicar esse ponto em especifico, mas acho muito importante fazer esse destaque.
God job man...🚀🚀🚀🚀🚀
Show de bola
Ainda não usei o Bootstrap para ter uma base de como ele funciona, mas o Tailwind está mais perto do que eu fazia nos meus projetos, onde eu já havia abstraído essa ideia de classes utilitárias, mas de forma muito mais simples (só as flexs, positions, grid, forms e inputs, o resto eu fazia na mão mesmo hehe)
Confesso que de começo está bem complicado pegar o jeito, mas acho que é questão de tempo até lembrar tudo hehe
Sua explicação é excelente. O tailwind faz coisas "mágicas". Porém, acho que quando se aplica essas classes inline o html fica mesmo muito sujo. Essa opção de encapsular tudo e jogar no CSS usando o @apply no meu entendimento acaba indo ao contrario do que o tailwind se propõe. Para essas soluções já existem recursos que, ao meu ver, fazem esse trabalho, como os pré-processadores SASS e LESS por exemplo.
Mas de novo, tailwind é sim interessante e vai de cada um usar ou não. Obrigado pelo tuto! Abç.
Excelente Ved!!
Muito bom!
Eu tinha esse "preconceito" com Tailwind antes, mas depois que usei uma vez, agora não crio mais nada sem ele kkk
Não sabia do @layer, já vou aplicar aqui
Brigadão!!
Top ... obg !!
Uma aula de resposividade !
Muito bom!! O problema agora é passar meus projetos de bootstrap pra tailwind, pq na hora de dar manutenção é a maior tristeza por não estarem em tailwind rs
show de bola
Acho que vou implementar em um pequeno projeto agora.
Vou deixar o styled-components de lado ao menos nesse projeto.
Acho que precisamos ter mente aberta sobre essas tecnologias que facilitam muito o desenvolvimento. Antigamente, por exemplo se você quisesse fazer um site, você teria que codificar muiito, muitas linhas de código. Hoje tá mais simples que antigamente. Imagine no futuro. Então a tendência sempre é facilitar e deixar mais simples.
Realmente a tailwindcss evoluiu muito durante o passar do tempo, eu confesso que ainda não utilizo e não pretendo utilizar tão cedo. rs
Venho do nosso amigo angular e trabalho muito com sass, então quem trabalha com funções avançadas do sass vai entender o que estou falando. Por outro lado está ficando cada vez mais interessante conhecer o tailwind para dar os primeiros passos e este seu vídeo é um ótimo trabalho para desmistificar algumas famas que o tailwind já superou a um tempinho já.
Parabéns pelo vídeo Vedovelli, quando puder faça mais vídeos sobre tailwind.
Opa estava olhando seu video, e estou tentando gostar deste 'Tailwind', mas cara muito complicado, costumo usar o 'Semantic UI' e sinceramente não consigo entender como tem tanta gente que fala deste 'Tailwind'. Embora esteja tendo muita dificuldade vou continuar tentando.
vendo vc mexer me pareceu fácil!
No começo eu também estranhei, mas decidi insistir e hoje não consigo usar outra ferramenta, tamanha é a minha produtividade.
muito bom, não me interessei no inicio, pq achava realmente que o código ficava muito sujo, mas depois dessa explicação me interessei bastante
Mission accomplished
Esse código é muito Flutter no bom sentido. Bom vídeo.
Eu achei que aquele círculo na esquerda era uma gota d'água na minha tela. kkkk
Cheguei aqui a partir de um PR da RocketSeat por sugestão do Diego. Muito bom o vídeo
Que legal! O PR é público? Se sim, mande o link!
Sim, Fábio! O PR da Rocketseat se refere a Perguntas e Respostas. É uma série que eles tem na qual respondem perguntas enviadas pelos usuários do canal. Alguém perguntou sobre Tailwind e o Diego na resposta indicou vídeos seus
Só dar uma olhada no canal deles. É tudo aberto. Rocketseat no TH-cam mesmo
Foi no vídeo de ontem, 19/05
show!!!
Eu acho a ideia muito boa. Mas preferia criar uma baseada no emmet, ao meu ver faz mais sentido, bg-200, por que não bg200 que é nativo do vcode auto-completar.
A novidade que achei muito interessante é a parte dos breakpoints e também a de criar classes embutidas não conhecia essa vantagem.
agora comecei a gostar disso ai
Boas Vedovelli!
Vídeo interessante mas, eu acredito que a forma com que vc pensa na hora de criar interfaces cada um vai gostar de uma forma, eu por exemplo prefiro CSS-in JS, é meu gosto pessoal.. normalmente evito trabalhar com classes.. mas o principal ponto de eu não gostar tanto do tailwind é que na maioria das vezes eu vejo projetos com tantas classes e algumas delas de forma desnecessária, que acaba trazendo uma complexidade maior na manutenção.. acredito que o fator q faça com que isso ocorra é o fato de quem está iniciando no desenvolvimento e começa com um tailwind, a pessoa aprende a como pensar de forma tailwind.. e não pensando como css de fato.. o que é um problema.
Já com relação a código sujo, isso vai de como o dev organiza seu código..
Porém ressalto, se vc aprende CSS vc aprende qualquer framework de css, o importante sempre é saber o que vc está fazendo e N só sair jogando classes e testando o que funciona ou o que não funciona.
Então minha opinião é que isso vai de de pessoa pra pessoa, de time pra time.. os conhecimentos devem estar alinhados tmb pra uso de qualquer ferramenta, se N se faz desnecessário qualquer ferramenta, não só o tailwind
Muito bom, parabéns!
Gostaria de ver a aplicação do Tailwind em formulários.
Sugestão anotada!
Já dei um like e nem assisti =D. Boa Ved!!!
Ahh, a ideia eh mto bacana, mas não consegui gostar de tanta classe no html. Realmente é uma grande biblioteca utilitária, mas é tanta classe que meu TOC ativa pra limpar xD
Btw, ótimo video, muito esclarecedor!!!
Ótimo conteúdo, eu realmente pensava que tailwind devia ser só mais um framework css que deixa o html cheio de classes, adquiri esse preconceito utilizando bootstrap
Legal, estou viciado mundo ficou aberto com tailwind
Gosto da tailwind e essa parte de poder separar as classes em um arquivo foi um dos motivos de optar por ele em alguns projetos. Mas algo que não gosto mesmo nele é como o css final é gerado, isso quando inspecionar o elemento no navegador. Ali realmente creio que fica muito complexo de entender e fazer alguns ajustes diretamente no navegador pra ver como fica.
Com este ponto eu concordo e vc me deu inclusive uma ideia de vídeo para mostrar esta parte. É importante salientar que Tailwind não é bala de prata! Obrigado