Construindo Interfaces com o Tailwind CSS
Adorado por muitos e odiado por outros, é assim que nós podemos resumir o Taildwind CSS, um framework que conta com um pacote de classes CSS para te ajudar a construir as interfaces de forma muito mais rápida.
Mas afinal, será que o Tailwind CSS é tão ruim assim para ser odiado por vários Devs? É o que nós vamos te responder nesse vídeo aqui.
Nesse vídeo nós vamos do total zero construir juntos uma interface utilizando o Tailwind CSS e também entender a diferença ele e o Chakra UI, uma outra abordagem de estilização.
Compartilhe esse vídeo: • Construindo Interfaces...
Vídeos que você pode gostar:
Testando Aplicações React com Vitest e Testing Library
• Testes no React com Vi...
Solucionando Problemas do Jeito Certo e na Prática
• A Soft Skill que todo ...
Typescript do zero, de Forma Prática
• Tudo que você precisa ...
UI Kit com Storybook e ReactJS
• Documentando o Fronten...
Github Actions do Zero e na Prática
• Github Actions do Zero...
UI Declarativa no React Native
• UI Declarativa no Reac...
✅ Conheça o Long Cycle Developer: dogcode.dev/longcycledeveloper
✅ Saiba mais sobre o OnMount:
dogcode.dev/onmount
dogcode
Comunidade no Discord: / discord
Instagram: @dogcode.dev
#tailwindcss #reactjs
Пікірлер: 30
Luis, sou iniciante ainda. Estava usando styled-component e estou achando o Tailwind bem melhor. Consigo ser mais produtivo com ele.
Gostei cara, interessante como as coisas bem explicadas ficam entendiveis. Parabéns Felipe.
Luis você deu uma ótima aula, obrigado.
Muito legal, sua explicação já tinha ouvido falar, com o vídeo entendi o propósito e gostei da ideia do Tailwind.
Valeu, me ajudou bastante tô começando no react e estava em dúvida de qual lib usar para css, achou que vou de Tailwind
npx tailwindcss init -p ele já cria os dois arquivos "postcss.config.js e tailwind.config.js"
Parabéns pelo vídeo. Estou iniciando no mundo do tailwind e estou construindo um projeto com ele. Poderia fazer um vídeo mostrando como funciona a responsividade no tailwind? Eu ainda estou meio perdido quando utilizo vários breakpoints na mesma div (ex: sm, md, etc). A duvida é como que fica a separação de classes quando quero só no modo small e se quero várias classes diferentes no md, como eu faria. Espero que dê pra entender kk. Abraços.
Olá, existe possibilidades de pegar types do tailwind? Tipo, eu tenho uma prop horizontalAlign, e gostaria de tipar ela com todas as classes de justify-content do tailwind
Acho o Tailwind fantastico, curto muito utilizar ele, até mais do que o Bootstrap. O ChacraUI utilizei em um projeto lá do trabalho com React, achei muito legal e muito facil de usar, mas não curti tanto.
unico que deu certo com tailwindcss vlw , hellow Worlds be welcome
Hehe tailwind é muito massa, só a sintaxe dele é um pouco confusa, porém muito legal! Valeu vizinho! (Sou riosulino haha)
Eu não consigo instalar o Tailwind pelo npm, mas está dando certo pelo cnd, posso continuar ou não é recomendado?
Show, qual seu tema do vs code?
Pelo o que percebi do Tailwind, quanto mais você puder se aprofundar sobre mais produtivo se tornará.
Tentei upar no vercel depois que terminei mas da o erro 404, alguem sabe como arrumar? já tentei tudo que vi na net e nada funcionou
Achei muito bom o tailwind, tenho alguns pontos. Ele é ótimo para projetos menores, projetos pessoais para backends. Grandes projetos, penso eu, não recomendaria, talvez usa-lo para algum card, componet isolado ou algo do tipo. No mais, adorando conhecer na prática o tailwind.
@fernandocoelho1334
7 ай бұрын
Você está errado. Para grandes projetos é que se nota a diferença de ganho de velocidade e aumentando a velocidade de acordo com a sua prática, pois num grande projeto você, se tiver organização, cria os componentes com a identidade visual da empresa ou a que você escolheu para o sistema, desde você faça sistemas como Freelance. Como não tem cores definidas, como no Bootsttap, tem-se mais liberdade na padronização. Eu mesmo vou usar o Tailwind para fazer uns gráficos, onde o cliente pediu uma cor específica e se fosse usar cores fixas, iria ficar horrível. Você vai ajustando as cores de botões e vai deixando aquelas classes já definidas e aí vai fazendo uma espécie de biblioteca sua. Assim você cria as principais tags e depois vai pegando da tal biblioteca, colando. Na própria documentação do Tailwind, já tem alguns componentes prontos, assim tem o Flowbite, que tem bastante componentes prontos, entre outros.
luis, vale a pena ficar usando as medidas em pixels usando -[...px]? a unica coisa q eu não curto são essas medidas pré definidas, mas queria saber se vale a pena usar elas pra mater a proporção do design system deles (não sei se isso de proporção faz sentido, mas é parte dúvida), o que você pensa sobre isso?
@dogcodedev
Жыл бұрын
Faala fera, beleza? px é uma unidade de medida absoluta, isso quer dizer que independente do tamanho da tua tela, o elemento sempre vai se manter com esse tamanho. Tem casos que funciona mas na maioria das vezes é péssimo quando se trata de responsividade.
Sou iniciante e estou amando o Tailwind CSS, qual calculadora vc usa pra fazer a conta dos px, achei diferente, obrigado pelo conteúdo
@ribeiro.evandro
2 жыл бұрын
Não é uma calculadora, mas o Spotlight do MacOS, entre outros recursos, ele faz esse tipo de calculo simples. Eu utilizo o Raycast, que oferece mais recursos, mas no geral, é a mesma coisa.
@jadson_
2 жыл бұрын
@@ribeiro.evandro Uso o windows, será que tem algo para windows?
@ribeiro.evandro
2 жыл бұрын
@@jadson_ acho bem difícil, mas vou fazer uma pesquisa e se achar algo, comento aqui…
@jadson_
2 жыл бұрын
@@ribeiro.evandro vlw, procurei aqui de forma bem vaga e não achei, mas vlw
Essa foi a primeira vez que paro pra ver sobre tailwind e confesso que achei muito verboso e deixa o código muito sujo. Na verdade, o Bootstrap tbm deixa mas foi legal ver que ele trabalha bem com React etc. Valeu pelo vídeo. Mis um inscrito!
@fsn-cursos-online
Жыл бұрын
O que eu acho menos verboso éo Materialize.
muito melhor com tailwind, é que o povo não desgarra das coisas que aprendeu no passado.
for iniciante nao caia no tailwind nao vem.como.todas as class vc q tem q criar
A pronúncia não é "váite". É "víte", mesmo. Significa rápido em francês.
O dilema do tailwind é o codigo sujo, até tem uma extensão do vs code q se chama inline fold q esconde somente as classes das tags. Mas nao entendi a parte da produtividade, pois a quantidade de codigo escrito é praticamente a mesma, ao usar snippets do css temos praticamente os mesmos atalhos. Se vc tiver q aplicar o mesmo css em varias divs vc vai acabar passando isso para um arquivo css. Seila, tenho q estudar mais sobre isso pra ver se vale a pena