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

  • @emersonpinheiro5474
    @emersonpinheiro54742 жыл бұрын

    Luis, sou iniciante ainda. Estava usando styled-component e estou achando o Tailwind bem melhor. Consigo ser mais produtivo com ele.

  • @MrOctanaza
    @MrOctanaza10 ай бұрын

    Gostei cara, interessante como as coisas bem explicadas ficam entendiveis. Parabéns Felipe.

  • @quimicaengenharia
    @quimicaengenharia Жыл бұрын

    Luis você deu uma ótima aula, obrigado.

  • @MrLucaslucal
    @MrLucaslucal11 ай бұрын

    Muito legal, sua explicação já tinha ouvido falar, com o vídeo entendi o propósito e gostei da ideia do Tailwind.

  • @PedroHenriquedosSantos
    @PedroHenriquedosSantos10 ай бұрын

    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

  • @TWtutoriais
    @TWtutoriais3 ай бұрын

    npx tailwindcss init -p ele já cria os dois arquivos "postcss.config.js e tailwind.config.js"

  • @victorribeiro9424
    @victorribeiro94245 ай бұрын

    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.

  • @matheusbittencourt226
    @matheusbittencourt2264 ай бұрын

    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

  • @Zaratustra_88
    @Zaratustra_888 ай бұрын

    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.

  • @DMGlobal22
    @DMGlobal22 Жыл бұрын

    unico que deu certo com tailwindcss vlw , hellow Worlds be welcome

  • @jarielfloriano5616
    @jarielfloriano56162 жыл бұрын

    Hehe tailwind é muito massa, só a sintaxe dele é um pouco confusa, porém muito legal! Valeu vizinho! (Sou riosulino haha)

  • @kaiorodrigo4231
    @kaiorodrigo4231 Жыл бұрын

    Eu não consigo instalar o Tailwind pelo npm, mas está dando certo pelo cnd, posso continuar ou não é recomendado?

  • @brezolinr
    @brezolinr Жыл бұрын

    Show, qual seu tema do vs code?

  • @victorfigueiredo6031
    @victorfigueiredo60314 ай бұрын

    Pelo o que percebi do Tailwind, quanto mais você puder se aprofundar sobre mais produtivo se tornará.

  • @willianbatista2052
    @willianbatista20528 ай бұрын

    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

  • @vitordiamantino7717
    @vitordiamantino7717 Жыл бұрын

    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

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

  • @dortavlogs
    @dortavlogs Жыл бұрын

    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

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

  • @jadson_
    @jadson_2 жыл бұрын

    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

    @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_

    @jadson_

    2 жыл бұрын

    @@ribeiro.evandro Uso o windows, será que tem algo para windows?

  • @ribeiro.evandro

    @ribeiro.evandro

    2 жыл бұрын

    @@jadson_ acho bem difícil, mas vou fazer uma pesquisa e se achar algo, comento aqui…

  • @jadson_

    @jadson_

    2 жыл бұрын

    @@ribeiro.evandro vlw, procurei aqui de forma bem vaga e não achei, mas vlw

  • @fabioaguiar2606
    @fabioaguiar2606 Жыл бұрын

    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

    @fsn-cursos-online

    Жыл бұрын

    O que eu acho menos verboso éo Materialize.

  • @Leanst.
    @Leanst.3 күн бұрын

    muito melhor com tailwind, é que o povo não desgarra das coisas que aprendeu no passado.

  • @simonecristina4023
    @simonecristina4023 Жыл бұрын

    for iniciante nao caia no tailwind nao vem.como.todas as class vc q tem q criar

  • @arqeco
    @arqeco4 ай бұрын

    A pronúncia não é "váite". É "víte", mesmo. Significa rápido em francês.

  • @ricardocarvalhomiguel2684
    @ricardocarvalhomiguel2684 Жыл бұрын

    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