You don't use Tailwind for THIS reason?! (Myths about Tailwind CSS)
āļāļąāļ
- āđāļāļĒāđāļāļĢāđāđāļĄāļ·āđāļ 5 āđāļĄ.āļĒ. 2023
- Recently, Diego came here to talk about two new developments in the React universe, and one of them sparked a lot of discussion ð
Since Tailwind became the standard styling tool for Next.js, various controversial opinions have emerged, leading to new conversations on this subject.
Whether you like this change or not, the truth is that you will need to better understand what will happen and what to expect in the development of your React projects from now on.
And Diego shows you a glimpse of what's coming and brings more clarity to your next choice in today's video.
Para nÃģs designers, o padrÃĢo 4pt grid e 8pt grid ÃĐ sensacional! Layout consistente, fÃĄcil de trabalhar e com resultado satisfatÃģrio.
Sensacional o esclarecimento. Confesso que quando eu comecei a aprender o tailwind - e junto dele o SASS - eu optei por priorizar o SASS justamente porque da "poluiçÃĢo visual" no HTML proporcionado pelo tailwind, mas os seus argumentos foram bem esclarecedores e a coisa faz mais sentido pra mim agora! VÃdeo irado!
A produtividade que o tailwind proporciona ÃĐ fenomenal
discordo, craque, sobretudo pois muita das vezes vc tem que pesquisar que classe seria aquele comando.
â@@leoalves5005isso no inÃcio quando estÃĄ aprendendo, mas depois se acostumar ninguÃĐm ficar fazendo isso nÃĢo kkkk
@@leoalves5005 eu nÃĢo abro a docs do tailwind tem provavelmente uns 4 meses e eu utilizo o framework todo dia. VocÊ começa a entender como tudo funciona em um mÊs praticando. ÃĐ extremamente intuitivo e alÃĐm disso tem um intelissense muito bom
eu fico perdido, acho q ÃĐ falta de costume
â
vÃdeo top , sou acostumando a usa saas e css in js e comecei recentemente a usa tailwind para testa, aprender como se usa , e ta sendo muito massa , e "fuçando" nas propriedades, descobrir /aprendi propriedades do css que nÃĢo sabia como foi falado no vÃdeo . todos temos preferencia de libs, mas devemos coloca a situaçÃĢo ,contexto em primeiro lugar e ver qual ÃĐ a mais adequada para o projeto em questÃĢo
PÃī Diego que daora, vc ÃĐ minha referÊncia na programaçÃĢo, o tailwind era a Única coisa que discordava de vc, mas esse vÃdeo abriu os olhos pra algumas coisas!
Comecei a usar justamente hoje pela praticidade, aà sai esse vÃdeo e tira a maioria das minhas dÚvidas ð
Hoje em dia prefiro performance do que certa "organizaçÃĢo", atualmente estou pra iniciar um novo projeto, estava com dÚvidas sobre o que usar tailwind ou SASS, esse vÃdeo me ajudou bastante vÊ alguns pontos legais que vale apena. A outro ponto ÃĐ documentaçÃĢo do tailwaind ÃĐ muito bem organizada e tem tudo lÃĄ bem fÃĄcil de achar e bem explicado como funciona isso tambÃĐm ajuda bastante.
Que vÃdeo satisfatÃģrio! ð
DiegÃĢo, primeiramente, parabÃĐns pelo vÃdeo... VocÊ menciona, no final do vÃdeo que tem os seus defeitos, quais seriam eles? Mais por curiosidade mesmo, pois estou começando a conhecer.
Utilizei num projeto pessoal recentemente e achei interessante. React ÃĐ um forte candidato para alguns projetos futuros no trabalho.
Seria legal fazer um vÃdeo tambÃĐm sobre o Vanilla Extract CSS, estou utilizando ele e confesso que de começo ÃĐ meio confuso mas jÃĄ estou me adaptando. Tinha essas opiniÃĩes sobre o Taillwind mas vou utilizar em algum projeto meu pra ver como me adapto!
O vÃdeo ficou sensacional. Trouxe diversos pontos que implicam na utilizaçÃĢo do Tailwind, diferente de algumas pessoas que gravam simplesmente reclamando, sem aprofundamento algum.
valeu pelos esclarecimentos ð
Tailwind ÃĐ uma ferramenta muito boa que traz uma produtividade muito grande, e aconteceu comigo a mesma coisa, eu sabia muito bem flexbox porem nÃĢo sabia Grid mas eu conseguia utilizar a classe de grid do tailwind normalmente. De tanto usar o grid do tailwind eu aprendi a usar Grid do css normal, no mais Ãģtimo video DiegÃĢo!
@diego obrigado por me apresentar o Tailwind! NÃĢo vivo sem mais nem no reactjs nem no native.
Uso Tailwind e Styled-components. Vejo cada projeto e os benefÃcios de cada "estilizador" para decidir por um ou outro. Isso quando nÃĢo vou no css com sass.
O CVA foi uma novidade muito boa para mim.
Vou usar em algum projeto para aprender mais
Cara... Muito legal esse teu vÃdeo... Eu jÃĄ criei alguns apps em React Native e seguia o seguinte padrÃĢo, declarar uma constante fora do componente que recebia um StyleSheet.create que por sua vez tinha um objeto com as classes CSS em questÃĢo. Depois no componente eu associava as classes criadas nos componentes filhos devidos (View, TextInput, etc)... Essa era a organizaçÃĢo que conhecia. Mas agora estou focando no React, o que me levou ao cenÃĄrio do Next.JS, que me levou ao cenÃĄrio do TailWind e quando vi aquele monte de classes aplicadas diretamente nas tags eu pirei e achei muito bagunçado kkkkkkkkkkkkkkk NÃĢo era algo que eu estava acostumado, mas ao ver o seu vÃdeo me deu uma visÃĢo mais geral da coisa e bastante contexto pra pensar... Muito obrigado
Eu uso utilizo bastante o tailwind css nos meus projetos , e com ele me ajudou bastante na produtividade nos CÃģdigo das minha aplicaçÃĩes , ele me auxilia em varias classe que crio, e principalmente tenho uma autonomia maior na manutençÃĢo do CÃģdigo
Show eu tinha uma visÃĢo diferente sobre tailwind, mas ele ÃĐ muito pratico
Sensacional seu parecer sobre o tailwind, sou designer confesso que estou bastante resistente em usar, acho que estava com todas as objeçÃĩes que vocÊ citou... haha! PorÃĐm, a equipe de programadores que faço parte, estÃĄ implementando como padrÃĢo o tailwind entÃĢo estava aqui engolindo seco, mas acho que com seu video percebo que ÃĐ uma tendÊncia mesmo e com algumas ferramentas vou conseguir me adaptar e talvez passar a gostar dele no futuro.
Uso no react native styled components mas sem dÚvida tenho curoisidade no tailwind. Vou aprender em algum momento. kkkk
Sempre me dei bem usando o styled-components. Esses dias precisei fazer um teste tÃĐcnico e me pediram pra usar Tailwind. Fiz de cara feia, mas fiz e a ferramenta estÃĄ aprovadÃssima, de fato ÃĐ bem mais produtivo e em meia hora de cÃģdigo jÃĄ nÃĢo precisava mais ficar toda hora olhando a documentaçÃĢo.
Mas uma coisa ainda nÃĢo mudou, o cÃģdigo fica mais sujo sim hahaha. Mesmo reduzindo ao mÃĄximo os componentes. Fiz uma tabela que tinha funçÃĩes, chamada à API, estilizaçÃĢo e html tudo no mesmo componente e ficou uma zorra.
Hhaahhahaha "fiz de cara feia"
Foda
@@TutoMaster se nÃĢo me engano, existe uma extensÃĢo que esconde as classes tailwind do html e sÃģ exibe se vocÊ quiser.
Vejo o tailwind como uma ferramenta fantÃĄstica. à bem como o Diego falou, ele te traz um arcabouço de opiniÃĢo e padronizaçÃĢo que muitas vezes nÃĢo temos ou nÃĢo pensamos no inÃcio de um projeto.
SÃĢo motivos considerÃĄveis para se optar por essa biblioteca.
Mas como eu gosto de discordar... Kkkk
Existem alguns motivos pelos quais eu nÃĢo curto muito usar essa lib, principalmente em projetos que tendem a ganhar muita proporçÃĢo. Vou citar os principais pontos:
1 vocÊ precisa decorar as classes do tailwind e precisa entender a interoperabilidade entre elas quando juntar mais de uma no mesmo elemento
2 vocÊ fica refÃĐm de uma biblioteca (nÃĢo que eh nÃĢo goste de usar bibliotecas, mas fazer as coisas "na unha" tem seu valor)
3 sim, eu nÃĢo gosto de ver elementos de HTML ou componentes com uma quantidade considerÃĄvel de classes css
4 no fim tudo vira css, se vocÊ começar de cara com tailwind, sua curva de aprendizado dobra ou triplica (sim, vocÊ vai ter que aprender css puro ao mesmo tempo que decora as classes do tailwind)
As outras coisas sÃĢo muito mais de gosto do que relevantes (na minha opiniÃĢo).
Sei que os amantes do tailwind vÃĢo me criticar, mas verdades sejam ditas. Com qualquer coisa pronta que vocÊ pega e usa, em algum momento vocÊ vai encontrar o limite de produtividade obtido no inÃcio do projeto e sempre vai ser em um momento em que nÃĢo tem tempo (nunca tem) de refatorar pra algo diferente.
Em meus projetos procuro analisar sob trÊs pontos pra optar por tailwind ou qualquer outra api de componentes prontos.
Se eu tenho tempo pra começar o projeto pensando nessas decisÃĩes de padronizaçÃĢo?
Se esse padrÃĢo jÃĄ existe? Ou seja, eu tenho uma grade de componentes pensados e desenhados e, tenho pelo menos uma ideia bem definida do resultado final (com relaçÃĢo a estilo e layout...), mesmo que em baixa fidelidade...
E se o projeto nÃĢo ÃĐ apenas um sistema que leve aà no mÃĄximo um ano pra ser desenvolvido e depois seja sÃģ manutençÃĢo? Ou seja nÃĢo serÃĄ um sistema ou software pequeno
Se a resposta pra pelo menos essas trÊs perguntas for um nÃĢo bem redondo, com certeza tailwind, chackra ou material ui serÃĢo fortemente considerados.
Mas isso aà ÃĐ o bÃĄsico, existem inÚmeras questÃĩes que deveriam ser levadas em consideraçÃĢo mas que muitas vezes no dia a dia a gente negligÊncia e vai pelo caminho que nos sentimos mais confortÃĄveis.
Por Último expresso minha humilde opiniÃĢo quando digo que nÃĢo gosto do caminho que o react estÃĄ seguindo, quando ele "força a utilizaçÃĢo de next e declara que seu padrÃĢo de estilizaçÃĢo vai ser o tailwind" . à a mesma histÃģria de passar a esconder mais a documentaçÃĢo de Components e dar evidÊncia pra hooks.
Compartilho do mesmo ponto de vista.
Eu particularmente sou mais produtivo utilizando CSS, e de quebra nÃĢo fico refÃĐm de uma biblioteca.
Uma pergunta, sou iniciante e jÃĄ fiz alguns (12) projetos com somente CSS totalmente responsivos, qual o prÃģximo passo vocÊ pensa que seja o ideal agora? Ver o Sass? Tailwind ? Outro ? Agradeço desde jÃĄ, abc
SÃģ discordo de o TW ser _"um arcabouço de opiniÃĢo"_ , visto que o apelo dele ÃĐ justamente o de ser um framework *nÃĢo opinativo* , mas voltado a utilidade
Tailwind ÃĐ muito bom e tem mais produtividade em alguns casos, assim como o ChakraUI tambÃĐm tem, principalmente na hora do responsivo, tailwind facilita muito. O Único ponto negativo da minha experiÊncia com tailwind ÃĐ ter que repetir alguns prefixos como "hover:uma-coisa hover:outra-coisa" ou no caso dos breakpoints "sm:p-2 sm:m-2 sm:rounded", mas de resto, acho tudo bem intuitivo e produtivo.
Eu sou novo em programaçÃĢo, mas ainda bem que jÃĄ estudei bastante tailwind, e gosto muito dessa biblioteca. NÃĢo sei ele de forma avançada ainda, mas o bÃĄsico jÃĄ estudei.
Se tu ÃĐ novo recomendo aprender primeiro o css puro...
Essa questÃĢo do "theme" ÃĐ interessante.
Pq eu usava o tailwind mas nao o uso do Theme nem de esquemas "meus".
Mas quando precisei utilizar as cores corretas de uma empresa, precisei criar as variÃĄveis e entendi a facilidade da ferramenta pra essas questÃĩes.
Tenho quase 2 anos como programador utilizo laravel como framework. Falando sobre minha Stack no front e isso aqui e uma dica de produtividade. Caso vocÊ nunca utilizou ou sente que o tailwind e lento e queria algo mais padronizado e mesmo assim personalizÃĄvel. Utilize o Mui Ui bem completo e jÃĄ tem muita coisa pronta para entregar um produto padronizado e bem otimizado. Ãbvio se quer algo muito personalizado vÃĄ de tailwind ele facilita bastante alguns conceitos css.
Particularmente prefiro utilizar o Bootstrap, faz eu perder menos tempo criando componentes do que se utilizasse o Tailwind. Mas jÃĄ utilizei ele e vejo algumas vantagens, como a personalizaçÃĢo de cores e fontes, tipo um bg-[cor] do que ter que fazer um cÃģdigo css a parte sÃģ pra isso.. Agora concordo, se estiver utilizando React, Vue ou algo do tipo, e componetizando tudo... deve ser bem mais ÃĄgil usar o Tailwind (nunca gostei do styled_component, acho ele limitante, e jÃĄ testei o bulma.css tbm)
Uma ferramenta sensacional!
TambÃĐm aprendi Tailwind para usar em um projeto que peguei jÃĄ andando. E tambÃĐm estranhei aquele monte de CSS junto do HTML.
Descobri depois que daria para separar usando ferramentas do prÃģprio PostCSS e fica tranquilo!
VocÊ diz utilizando @apply? Qual a diferença disso com CSS se nÃĢo o fato de adicionar uma abstraçÃĢo a mais? Eu ainda acredito que o tempo gasto aprendendo tailwind poderia ser utilizando aprendendo a escrever CSS melhor estruturado.
gosto demais desse estilo...
DiegÃĢo, traz pra o canal do TH-cam como criar um streaming de videos com NodeJS e React, mas tem que ter rotas autenticadas com JWT ou alguma ferramenta de autenticaçÃĢo. ð
Atualmente, estou utilizando o MantineUI, tendo experimentado vÃĄrias bibliotecas, incluindo o Tailwind. Na minha opiniÃĢo, o MantineUI se destaca como uma opçÃĢo incrivelmente superior, e eu recomendo que quem ainda nÃĢo conhece dÊ uma olhada, pois vale a pena!
Tailwind na cabeça! O resto ÃĐ sÃģ o resto.
â@@Ramon_Oyster_Cult Isso ÃĐ uma perspectiva limitada de ignorantes chauvinistas que nÃĢo tÊm capacidade de enxergar outras tecnologias, fixando-se em uma Única ideia como absoluta, sem considerar argumentos.
Por gentileza, quais pontos vocÊ considera superior?
Em termos de desempenho, o Mantine utiliza o PostCss, ao contrÃĄrio do Emotion (CharkaUI entre outras...). Isso resulta em um ganho de desempenho significativo, alÃĐm de possibilitar a personalizaçÃĢo de componentes em um nÃvel mais baixo. AlÃĐm disso, ele interage bem com outras bibliotecas, como o Tailwind.@@igorpestana8608
Tailwind para fazer media query eh uma maravilha!!!! Esse foi um dos principais motivos para comecar a usar Tailwind sempre. A produtividade voa.
Top, o audio nÃĢo estÃĄ como o de costume, mas conteÚdo show e concordo totalmente.
Um feedback, tambÃĐm nÃĢo gostei desse modelo de audio.
ParabÃĐns pelo conteÚdo da Rocketseat, sempre acompanhando!
Achei o TailwindCss interessante, mas gostei mais de usar o ChakraUI. Ambas sÃĢo de mais, mas Chakra eu achei sensacional!
Eu tambÃĐm prefiro ChakraUI por dois motivos. O primeiro ÃĐ que quando uso um componente fo Chakra ele jÃĄ vem estilizado.. o mÃĄximo que preciso fazer ÃĐ alterar uma colorScheme ou algo assim. E o segundo motivo ÃĐ que a parte de acessibilidade jÃĄ vem pronta. Eu nÃĢo preciso usar uma outra biblioteca sÃģ para lidar com isso
realmente o chakra ui ÃĐ sem dÚvidas mto produtivo
â@@viniciusdurvalinodesouza4170 Sim verdade, tem essas outras duas caracterÃsticas dele que tambÃĐm achei massa!
Cara eu sempre fui de backend e analytics, CSS sempre foi meio dolorido kkkk. React + Next com ChakraUI me ajudam muito a fazer algo legal em menos tempo e sem passar tanta raiva kkkk
sem duvidas chakra ui ÃĐ realmente mais produtivo e mais legÃvel, PORÃM, ÃĐ muito mais pesado, em projetos leve vc n nota diferença, mas em projetos pesados, faz uma diferença de experiÊncia
sou backend, estou desenvolvendo um pouco meu conhecimento em front, e estou pensando em aprender tailwind, o video foi bem esclarecedor!!
Tailwind e Styled Components, minha recomendaçÃĢo.
Bom sou iniciante, atualmente estou estudando Vue e nas aulas ÃĐ utilizado Tailwind, de todas essas questÃĩes mencionadas, a que havia me chamado atençÃĢo foi a estilizaçÃĢo inline no HTML, que sempre foi desaconselhado desde quando comecei a estudar programaçÃĢo, nÃĢo entendi bem como aqueles sites separam as classes do Tailwind do HTML mas vou dar uma olhada...
NÃĢo sou designer, mas achei muito interessante o TailwindCss.
Pode ser usado com os Framework de Backend em Js, quanto tambÃĐm com os Framework Python (Django, Flask e FastAPI), o que abre um leque de opçÃĩes, podendo ser integrado com outros Framework de Front, como AlpineJs, HTMLX, etc.
Boas, estou a trabalhar como backend software engineer a mais de 11 anos e nos Últimos meses descidi começar a voltar ao estudo do Frontend com VueJs, Javascript, Typescript,... e lÃģgico, alguma cena relacionada a CSS. Comecei com Bulma e cheguei a fazer alguns projetos, que resultou buÃĐ, porÃĐm nos Últimos meses comecei a estudar o TailwindCSS e tenho gostado muito. Eu sei que ele tem um foco, mas tem me feito aprender e relembrar o CSS3 (livro que eu li quando estava na faculdade e junto com o jQuery e HTML5. O mais surpreendente foi descobri que ao longo desses anos nÃĢo mudou tanto o HTML, e CSS, pelo menos no core.
Obrigado e continue com o excelente canal.
gosto bastante de usar StyledComponents junto com classcat
Sou designer e depois que aprendi usar 8point grid tudo mudou, nunca mais precisei me preocupar em ficar calculando melhor padding pra nada kkkk. Tailwind ÃĐ maravilhoso âĪ
Depois de utilizar tanto e acostumar com CSS-in-JS, ÃĐ hora de dar uma aprofundada e uma melhor 'olhada' para o tailwind. Com estes pontos citados no vÃdeo e mesmo sempre tendo um pÃĐ atrÃĄs com ele, nÃĢo tem como mais 'ignorar' ele.
jÃĄ passei por vÃĄrios modos de estilizaçÃĢo, meu primeiro contato com Tailwind foi quando apliquei para uma vaga de emprego, tinha ouvido falar e visto muito pouco, de certo ponto foi muito boa minha experiÊncia, pois como jÃĄ imaginava ele me deu mais produtividade, o que pode se dizer ÃĐ algo bom, pois pude focar mais esforço nas funcionalidades solicitados no teste.
Muito bem colocado Diego! Tailwind nada mais ÃĐ que css com um design system embutido, e diga-se de passagem, um design system que nÃĢo ÃĐ qualquer designer que da conta de fazer... hÃĄ uma ciÊncia por traz de cada combinaçÃĢo de cores, tamanhos e espaçamentos, tudo foi estudado para que vocÊ tome decisÃĩes mais rÃĄpido e tenha um resultado consistente, quem quiser uma leitura recomendo o livro RefactoringUI dos criadores do prÃģprio tailwind.
à muito comum as pessoas compararem com bootstrap, mas eles nÃĢo tem NADA a ver. HÃĄ uma diferença entre design SYSTEM, onde voce tem padrÃĩes de cores e tamanhos pra utilizar, e um design THEME onde a ferramenta jÃĄ tem opiniÃĩes especÃficas de como um botÃĢo ou um card, por exemplo deve ser, que ÃĐ o caso do bootstrap.
Estou trabalhando com Tailwind a mais de 1 ano e ÃĐ a melhor experiencia que jÃĄ tive com front-end. à praticamente o Typescript do CSS. Fiz projetos com design totalmente Únicos e com muita velocidade. Outro ponto muito importante do Tailwind ÃĐ a performance, jÃĄ que voce esta repetindo as mesmas classes, o bundle enviado pro cliente ÃĐ o menor possÃvel, ÃĐ muito fÃĄcil atingir notas perfeitas no lighthouse se SEO for importante pro projeto. O plugin do prettier e a extensÃĢo do vscode tambÃĐm trazem uma experiencia de desenvolvimento sem igual.
Tive pouco contato com o tailwind mas a primeira impressÃĢo quando vi o projeto foi que vocÊ precisa criar os componentes com as classes dele. E depois usar eles prontos.
Para produtividade o tailwind ÃĐ muito bom, jÃĄ utilizei tailwind em varios projetos, mas o meu favorito continua sendo styled-components.
Acho o Tailwind fantÃĄstico! Nos meus projetos sempre procuro usÃĄ-lo!
Eu utilizo muito Material-UI quando nÃĢo o sass, porÃĐm ao conhecer o Tailwind, sinto vontade em começar a utilizar em meus projetos substituindo o Material-UI, por dar a impressÃĢo de mais liberdade na estilizaçÃĢo.
Muitos usam os dois juntos
joga esses videos como podcast no spotfy
Uma outra vantagem muito mas muito escondida ÃĐ que se vocÊ utilizar o plugin do tailwind para o prettier, suas classes serÃĢo organizadas na mesma ordem em que ela estÃĢo declaradas no arquivo CSS.
Mas por que isso importa? Porque se as exatas mesmas classes estÃĢo sendo usadas em ordens diferentes em um elemento A e um elemento B, com a expectativa que o resultado final seja diferente, bem... esse nÃĢo vai ser o caso. O que define o que vai ser aplicado ÃĐ a especificidade e o que for declarado por Último no arquivo CSS. A ordem das classes no HTML nÃĢo determina nada.
Essa padronizaçÃĢo de organizaçÃĢo das classes evita problemas que atÃĐ o maior entusiasta de CSS deseja voar longe.
Tailwind organiza em ordem de importÃĒncia, de como as classes impactam o componente. E ÃĐ, de fato, a forma correta de se organizar pois escrevendo CSS vocÊ deve escrever as classes de maior impacto em cima e as de menor em baixo.
eu tenho um certo de preconceito com essas ferramentas desde a ÃĐpoca do bootstrap 3 kkkkkk eu sou do team Sass e atualmente uso o css modules com Sass nos meus projetso React e Nextjs, mas confesso que estou prÃģximo de começar a estudar Tailwind , conhecimento ÃĐ sempre vindo na nessa ÃĄrea!!
eu tambÃĐm sou dessa ÃĐpoca kkk, sÃģ que meu ponto ÃĐ diferente, eu comecei a usar Chakra-UI e agora nÃĢo vejo muito sentido em usar o Tailwind ð , apesar de eu jÃĄ ter dado umas testada.
@@raulvictorrosaa Eu ainda nÃĢo usei nenhum desses Frameworks atuais, continuo relutante, mas irei testar todos em algum momento hahahaha por enquanto continuo com o sass a todo o vapor kkkkk
@@GustavoSiqueira18 Eu apliquei o Chakra-UI em um projeto no trabalho, aà acabei tendo contado todos os dias com a ferramenta, apesar disso estou querendo aplicar o Tailwind em alguma coisa pra ter a certeza se gostei ou nÃĢo.
uso bastante com o react native, ÃĐ bem melhor do que as outras libs.
Eu recentemente testei o chakra ui, achei interessante a proposta deles e mais fÃĄcil de configurar que o tailwind.
Trabalho com tailwind hÃĄ pelo menos uns 2 anos e ate hoje nunca me deixou na mao, supriu em 100% das necessidades. Atualmente integrei o DaisyUI e ele tem se mostrado muito eficaz e simples na utilizaçÃĢo
Gostaria de ver uma lib como o Tailwind utilizando os nomes de classes compatÃveis com o emmet.
Eu gosto de trabalhar com design tokens.
Gosto muito quando o Diego traz essas bibliotecas que parecem fantÃĄsticas e eu nunca tinha ouvido falar, seria legal ter algo trazer ainda mais dessas libs
Eu nÃĢo conheço nada sobre o Tailwind mas atÃĐ agora ele me parece um utilitÃĄrio CSS.
E quanto usar valores mÚltiplos de 4 para espaçamentos, SIM! isso ÃĐ uma heurÃstica no design que tambÃĐm pode ser usada em um arquivo utilitÃĄrio CSS , e isso ÃĐ definido muito antes do cÃģdigo pelo design do projeto. Mas tenho que conhecer mais essa ferramenta.
depois que eu descobri o nativewind, quase nÃĢo precisei mais usar styles pra nada, muito top
2:55 o problema ÃĐ que ele nÃĢo pega todas. Grid, por exemplo, ainda ÃĐ bem limitado em tailwind
Sempre que mexo com Grid em um cÃģdigo talwind eu preciso misturar estilo inline com classes tailwind
Sobre o desafio do Diego: construir um masonry grid layout responsivo usando apenas tailwind
Disclaimer: eu ADORO tailwind. à meu goto sempre que penso em estilizaçÃĢo no front e definitivamente me deixou mais produtivo. PORÃM, reconheço que existem limitaçÃĩes sim
SoluçÃĢo: nao use grid rsrsrsrs
Fiz esse teu desafio aà sÃģ com Tailwind. VÊ se ÃĐ isso aqui:
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
@@devcoelho tÃī meio longe de um computador agora =/ vocÊ chegou a subir em algum lugar?
Pra servir de referÊncia: masonry grid ÃĐ tipo um feed do Pinterest
@@devcoelho Se caÃsse um CR pra mim eu fechava e fingiria que nÃĢo vi kkk Bagulho feio demais
@@devcoelho acabei de testar aqui. NÃĢo ÃĐ bem isso pq o masonry grid do pinterest tem que manter a largura dos itens e variar apenas a altura, sendo que as imagens podem ter dimensoes diferentes entao os card tem que ter sempre o mesmo tamanho e sÃģ se realocarem de acordo com o espaço disponÃvel. mas ta parecido!
JÃĄ utilizei o tailwind em projetos grandes, gostei, foi bem produtivo realmente. Foi o primeiro nessa pegada que experimentei devido a exigÊncia do projeto que trabalhei (internacional, empresa grande). PorÃĐm, eu nÃĢo consigo gostar dele mais do que gosto de trabalhar com Chakra UI no React / Next.js. o Chakra eu consigo, pessoalmente, ser muito produtivo e a manutençÃĢo ÃĐ sem dor alguma. Chega a ser gostosa, mesmo bastante tempo depois. Vejo o mercado em maioria indo para tailwind, principalmente para quem atua hÃbrido, tanto mobile, quanto web, assim como eu. Eu vejo e entendo as vantagens. NÃĢo tenho chakra ui no mobile e Nativebase ÃĐ legal de trabalhar mas nÃĢo substitui o meu chara ui ou o prÃģprio tailwind (em performance ainda), entÃĢo eu uso sass / styledcomponent, sou basicao no mobile. Fora isso, voltando a web, gosto muito de trabalhar com Sass com BEM Sintax, e de certa forma o chakra permite eu pensar mais css puro do que o tailwind na minha opiniÃĢo e gosto pessoal tbm. Mas, se nÃĢo for trabalho solo ou projeto pessoal, eu defendo que precisamos aprender todos e usar o que for melhor para o projeto / equipe.
Veja o MantineUI
O Tailwind ÃĐ excelente para reaproveitamento de fonte desde os Design Tokens atÃĐ os Templates quando se pretende desenvolver seus prÃģprios Sistemas de Design. PorÃĐm iniciar um projeto sem reaproveitamento com pequenas modificaçÃĩes recomendo o Radix.
Tailwind Variantes tbm ÃĐ uma lib interessante.
Particularmente nÃĢo gosto do Tailwind, porÃĐm nÃĢo tem como negar suas enormes vantagens, acaba salvando muito o projeto que estou atualmente, pois muitos lÃĄ nÃĢo mexeram tÃĢo afundo com CSS e ter essa facilidade na hora de escrever a estilizaçÃĢo proporcionada pelo Tailwind realmente ajuda.
Conheci o Tailwind em uma NLW do ano passado.
Simplesmente me apaixonei e desde entÃĢo nÃĢo parei mais de usar kkkkkkkkkkkk
VocÊ disse nesse vÃdeo tudo e mais um pouco do que eu digo/comparo o uso do tailwind para pessoas que tem a desconfiança do "quem usa tailwind nÃĢo aprende CSS".
Cara nessas horas fico feliz de ter ido pra flutter, ÃĐ mt mais simples e entrega tanto
Experimentem Chakra UI sem dÚvidas o melhor que jÃĄ usei, agiliza muito o desenvolvimento principalmente para fazer o responsivo
To de boa
Bootstrap ou Tailwind ? No meu conhecimento por mais que nÃĢo mexi muito com Tailwind acredito serem libs muito semelhantes, existe alguma vantagem diante a outra ou tem alguma preferencia na escolha de um novo projeto?
Sou testemunha de tailwind e fui salvo por ele, acredito que terÃĄ um espaço maior no mercado, muito mais pela produtividade e facilidade de manutençÃĢo tambÃĐm.
O tailwind aliviou minha raiva de trabalhar com detalhes no css do front. NÃĢo fico sem! E acho Ãģtimo deixar um componente em um Único arquivo. à atÃĐ mais lÃģgico.
Ta, me convenceu ðð
eu curto usar o emotion, uso o cx entre outras props dele.
acho que um problema ÃĐ ter que aprender uma coisa que vc ja sabe fazer com css. Vc ja sabe usar font-size:1rem, mas tem que aprender como fazer isso com uma class do tailwind. O que eu acho importante ÃĐ o dev procurar conhecer o maximo que puder, pq dificilmente em uma carreira de dev vc vai usar sÃģ 1 tipo de tecnologia/lib/framework
uso Bootstrap acho que desde que comecei a programar pra web... comecei nele na versÃĢo 3, nÃĢo tenho o que reclamar, sem falar que me dou muito bem com ele... mas gostaria muito de aprender o Tailwind, nem que seja sÃģ pra ampliar a base de conhecimento
A maioria das classes sÃĢo bem parecidas no tailwind, se voce ja sabe bem bootstrap rapidinho voce pega o Tailwind
O meu problema ÃĐ q tenho um monte de componentes jÃĄ estilizados com Styled Components, inclusive com regras de temas e toda uma documentaçÃĢo no Storybook, trocar para Tailwind seria muito trabalhoso e nÃĢo vejo vantagem
Tailwind ÃĐ sensacional, principalmente na performance
Vc jÃĄ fez algum comparativo de performance pra eu dar uma olhada em como isso afetou o seu fluxo de trabalho?
Eu gostaria que o chakra UI tivesse o sucesso, a visibilidade e diversidade de plataformas que o tailwind tem. âĪ Amo Chakra UI. Amo CSS em geral.
eu utilizo e gosto bastante tambÃĐm.
Minha experiÊncia com Tailwind, tive que começar um projeto com Next Js e tailwindâĶao começo achava super chatoâĶcÃģdigo sujo, enfim, sÃģ que ao final percebi que desenvolvi mais rÃĄpido cada telaâĶaà fique com tailwind atÃĐ em React Native e fiquei aÃâĶmas a semana passada, tive que pegar um projeto React com CSS puroâĶe tenho que ser honestoâĶnunca tive tantas saudades de uma tecnologiaâĶcomo senti por tailwindâĶ
Atualmente eu utilizo Styled Components, mas em breve darei uma chance ao Tailwind
Existe um Styled-components-tailwind para utilizÃĄ-lo da mesma forma
ð
Venho usando Material UI por quase 2 anos e agora o Mantine UI, que à proposito ÃĐ uma maravilha, mas acho que vou dar uma chance pro* Tailwind, ÃĐ realmente sensacional.
meu deus!! acabei de ver o mantine ui aqui...
ÃĐ como estar num sonho ðĪĐðĪĐ
o negÃģcio ÃĐ completinho demais
@@gustavorizzon1704 Cara, ÃĐ sensacional, a parte dos hooks entÃĢo? à um sonho mesmo. ðĪĐ Ao que parece pouca gente conhece, ouço muito pouco sobre ele.
Esse "sujo" da pra resolver com um plugin do prettier que faz o sort nas classes e deixa mais organizado.
Hoje nÃĢo me arrependo de ter trocado o sass pelo tailwind.
O papo ÃĐ o seguinte se vc tem boletos para pagar tu vai usar atÃĐ lapis de cor kkkk lembre se usuario final nao vai fica questionando se vc usou x ou y framework ele nÃĢo sabe nem o que ÃĐ isso kkk o importante e entregar na data e se garantir na manutençÃĢo o resto que crÃtica ferramenta e pq nao ta tendo boleto pra pagar kkk
Essa ediçÃĢo ta massa em... "Tailwind fever" kkk
Also realmente o tailwind ele n te dÃĄ muita flexibilidade em coisas muito especÃficas do css, mas como sÃĢo muito especÃficas e sÃĢo usadas apenas uma vez dÃĄ pra vc add uma class costumizavel nos utils do tailwind e usar ele com o sistema poderoso do tailwind(lembrando que sÃĢo poucos casos)
eu era hater, agora to usando e to atÃĐ curtindo de escrver as classes. e de fato mesmo manjando muito de css a gente acaba aprendendo mais ainda com as classes do tailwind com o preview que ele da do css por tras dos panos. Mas eu ainda prefiro continuar usando ferramentas prontas de ui, como mui, bootstrap, antd na minha empresa, pq la ÃĐ mt genÃĐrico e nÃĢo precisa ser tÃĢo criativo quando se usa taiwind. agora em next, ai a melhor opçao sera de fato o tailwind
Pra mim, que ainda nÃĢo uso o Tailwind, o que mais pegou foi a barreira de entrada. Sao milhares de classes... Fui criar um projeto usando Tailwind o tempo que eu gastava procurando na documentaçÃĢo qual classe era o que, eu jÃĄ tinha escrito o css. Sei que a longo prazo ÃĐ o inverso, vc conhecendo as classes vai agilizar muito o desenvolvimento, mas pra quem quer começar ÃĐ desanimante. Sem contar, que pelo o que eu vi, as vezes vc coloca uma classe pra colocar uma borda, outra pra cor na borda , outra pra por radius. Aà vc vÊ q jÃĄ existe uma q ÃĐ as 3 juntas. Show! Aà quero colocar um box shadow, aà vc vÊ q tem outra q ÃĐ as 4 juntas e vira um card .... Isso se aplica pra qualquer coisa que vocÊ queira fazer e vai escalando
sou iniciante em programaçÃĢo, estou aprendendo tudo fiz alguns projetos simples inclusive o gratuito da rocketseat com o mayke brito no caso peguei a base do html, css e um pouco de Js , dai fui fazer um projeto usando tailwind e nÃĢo consegui com o tailwind fazer funcionar o modo light, tive que recorrer ao bÃĄsico do maykao kkkkk.
Depois que utilizei Tailwind e pego algo com css normal ou css in js sinto MTA diferença, Tailwind agora ÃĐ como um ÃmÃĢ.
Eu torci um pouco o nariz quando vi o Tailwind e comecei a utilizar hÃĄ pouco tempo... No inÃcio ÃĐ um pouco ruim ter que ficar com a documentaçÃĢo aberta procurando as classes para utilizar. Mas pensando por outro lado, quando vocÊ aprende CSS ÃĐ exatamente isso... ninguÃĐm nasceu sabendo todas as propriedades do CSS, entÃĢo acho que ÃĐ questÃĢo de adaptaçÃĢo mesmo.
Outra desculpa que eu mesmo dava e nÃĢo vi sendo abordado no vÃdeo ÃĐ a respeito da reutilizaçÃĢo do mesmo estilo em outras partes do HTML, como por exemplo um botÃĢo que aparece mais de uma vez na pÃĄgina. Mas na verdade isso ÃĐ atÃĐ uma desculpa ultrapassada que sequer faz sentido quando se trabalha com ferramentas como React ou qualquer outra biblioteca de componentizaçÃĢo. Acho que ÃĐ uma desculpa vÃĄlida somente nos casos de nÃĢo usar componentes.
VocÊ falou sobre o Tailwind simplificar algumas coisas do CSS porque uma classe à s vezes encapsula algumas propriedades de maneira fÃĄcil. Outro bom exemplo sÃĢo as classes de animation do Tailwind: animate-spin, animate-pulse, animate-bounce.
Confesso que vai ser difÃcil largar, estou gostando cada vez mais.
Pessoalmente nÃĢo sou muito chegado ao TW, isso pq eu gosto muito de mexer com CSS puro, brincar com pseudo-classes, pseudo-elements, animaçÃĩes, fazer coisas especificamente em atributos adicionados dinamicamente a alguma tag html ou atÃĐ mesmo desenhar com css.
Criei alguns snippets pra inicializar padronizado meu CSS com fonts, colors, timers, spaces, sizes, tudo separado e eu vou apenas utilizando as variÃĄveis.
O CSS tem avançado bem nos Últimos tempos tambÃĐm, mas eu entendo que nÃĢo sÃĢo todos que fazem isso, principalmente quem tÃĄ iniciando.
Mas eu entendo o ponto e as vantagens de usar o TW, e estou me forçando a usÃĄ-lo mais.
Ele agiliza muito o trabalho,
ele jÃĄ trÃĄs cÃĄlculos que vocÊ precisaria escrever no seu CSS,
ele facilita para caso de pessoas novas entrarem na equipe,
ele poupa tempo na criaçÃĢo de um novo projeto, com seus padrÃĩes jÃĄ definidos (e/ou um arquivo criado pela equipe para definir padrÃĩes muito fÃĄcil de ler),
ele poupa o seu trabalho de ficar inventando nome de classes(apesar disso deixar organizado, as vezes ÃĐ complicado ter tantos nomes).
A maior parte das classes sÃĢo nomeadas com o que ela faz, isso torna fÃĄcil a utilizaçÃĢo do TW.
Ainda tenho algumas dÚvidas perante ao TW, mas com o tempo, a doc e alguns vÃdeos eu vou sanando e aprendendo a converter meu CSS em TW. ð (Ah, e tambÃĐm com a extensÃĢo no VSC "Tailwind CSS IntelliSense")
Nunca usei, vou tentar ð
Gostaria de saber se tem algum jeito de deixar o css padrÃĢo sem ter que copiar todas as classes de um elemento pra outro.
Seria uma boa prÃĄtica enfiar vÃĄrias strings de classe tailwind num array e chamar dentro dos elementos que quero deixar igual? Se nÃĢo for assim, qual seria a saÃda pfv?
Trabalho com front-end hÃĄ mais de 20 anos. Sou, como jÃĄ ouvi vocÊ dizer em outros vÃdeos, "do tempo das tabelas". Bom, recentemente tive um, digamos, contratempo com toda a equipe de front-end para o aprimoramento da responsividade do nosso projeto atual. Para esclarecer, nÃĢo estamos usando Tailwind, mas Bootstrap (por opçÃĢo). E esse contratempo se deu pelo fato de que a equipe estava copiando fielmente o cÃģdigo gerado pelo Figma, que apesar de trabalhar com Flexbox e unidades relativas, gera cÃģdigo em unidades absolutas (px), vai entender! E isso trouxe muita discussÃĢo em torno dos padrÃĩes de espaçamento, tamanhos de fontes, estilizaçÃĩes e afins. Uma quantidade infindÃĄvel de "nÚmeros mÃĄgicos" foram aparecendo no CSS e, daÃ, muita dor de cabeça. Dor de cabeça que poderia - e deve - ser evitada quando se tem um design system consistente e declaraçÃĩes de padronizaçÃĢo do tema bem definidos. Este Último algo que o TW se propÃĩe a fazer muito bem.
Belo post!!! Vou te fazer uma pergunta honesta... Bootstrap quando surgiu foi um divisor de ÃĄguas! Se tornou um exemplo, se tornou atÃĐ um padrÃĢo se vc estÃĄ iniciando um projeto. Acredito que vocÊ, assim como eu, jÃĄ teve problema em lidar hoje em dia com um cÃģdigo mais legado que tem bootstrap < 5 pra todo lado.
Pergunta:
- HÃĄ um risco de daqui 5 anos estarmos passando por problemas parecido por termos adotado TW hoje?
@@fagner-sa eu acho que esse risco a gente corre com qualquer lib, framework e atÃĐ mesmo linguagens. Tudo evolui muito rÃĄpido e sempre vai aparecer algo novo que pode comprometer sua adoçÃĢo. O TW ÃĐ um framework absolutamente "nÃĢo-opinativo" e, como o prÃģprio Diego bem disse, replica praticamente todas os parÃĒmetros CSS em forma de classes. Dito isso, tirando sua parte de configuraçÃĢo - que por si sÃģ pode parecer bastante intimidadora para iniciantes -, nÃĢo acredito que tenhamos problemas com cÃģdigo legado, a nÃĢo ser que a especificaçÃĢo do CSS mude consideravelmente - o que eu tambÃĐm nÃĢo acredito.
Acredito que o principal erro estÃĄ em sua equipe de front seguir fielmente o que estÃĄ no Figma! Respondendo o amigo ali em cima, mesmo que se atualize, basta vocÊ deixar sua lib referente a aquele projeto, o Bootstrap apesar de tudo, da suporte para todas as versÃĩes.
@@tainancamargo4165 Concordo quanto à equipe, mas discordo quanto a versÃĢo do Bootstrap, que da versÃĢo 5.x em diante mudou algumas nomenclaturas de classes.
@@ed1nh0 Realmente, e uma das grandes mudanças pro bootstrap 5 foi a retirada do jquery que exemplifica a questÃĢo de legado do colega acima.
No inÃcio da minha carreira eu tambÃĐm nÃĢo curtia usar esses mÃĐtodos âprontosâ de estilo, mais hoje eu vejo muito mais vantagens usando do que nÃĢo usando, hoje eu uso muito o chakra ui e minha produtividade aumentou muito e meu valor na empresa que trabalho sÃģ aumentou, depois de 8 anos escrevendo css (e sempre gostei) hoje vejo sÃģ como um âatrasoâ no projeto. Enfim respeito quem nÃĢo curti, mais recomendo.
Salve meu bom, eu estava passando dificuldade com o Tailwind para usar o calc do css, nÃĢo consegui encontrar uma resposta, mas de resto, ÃĐ uma tech muito boa mesmo.
eu uso desse jeito p-[calc(100vh_-_60px)]
@@ir4nbala Obrigado meu mano, funcionou aqui. ðĪ
Eu amo tailwind principalmente com a diretiva @apply.
Meus projetos todos sÃĢo com CSS Module, SASS e Tailwind.