Qual framework Front é melhor? O que eu não gosto no Tailwind CSS e o que eu gosto 

E fica a dica fixa aqui pra ver o vídeo do @Felipe Fialho ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-L78ENSEHXLE.html

Um dos melhores canais de tecnologia! Segue firme ai mano! Sensacional!

Comecei a usar tailwind na empresa que entrei alguns meses atrás. No começo é realmente mto estranho, mas depois que vc entende de verdade como funciona, e conhece a parte de extensão dele tudo melhora. É mto mais rápido, fácil e acho que o mais importante é não ter que pensar em nome de classes para cada coisa...rsrsrs Enfim, concordo que saber o css antes de usar tailwind é fundamental, e pensar num layout seguindo o "padrão" de medidas do tailwind vai ajudar demais.

Como iniciante na área eu posso dizer que saber construir um layout com CSS puro e primordial pra avançar no conhecimento, se quiser aprender framework e biblioteca, ok, mas antes disso saiba fazer um layout CSS na raça e você terá menos dor de cabeça.

Apesar da gente ter lançado vídeos do mesmo tema sem ver a opinião do outro é engraçado como elas são extremamente parecidas haha 😁

Ótimo vídeo! Muito completo! Meus parabéns =)

Parabéns pelo vídeo, Mario! Com certeza venho me inspirando muito na sua carreira para construir a minha. Ansioso para os próximos vídeos!

Hoje eu utilizo apenas o Tailwind (com a lib classnames), é dessa forma que construo componentes. Comecei, claro, no CSS alguns bons anos atrás, usei Styled-components, Emotion, Theme-ui, Chakra, Bootstrap... Mas é com Tailwind que me sinto mais produtivo. Eu sempre começo do micro, botões, inputs, links, títulos, e vou construindo componentes em camadas: um form de login que tem dentro o componente título, alguns componentes de intput, um botão, etc. Só vou construir a primeira página quando 100% dos componentes previstos em layout estão prontos. O único problema que vejo no Tailwind é que ele é muito verboso, um simples botão precisa de muitas classes para funcionar. Um componente de botão com variantes e tamanhos fica enorme. Mas mesmo assim é o framework que pra mim é o mais natural de escrever, muito intuitivo para quem entende CSS. Agora concordo totalmente contigo, aprenda CSS antes de partir para os frameworks. O CSS não é nenhum bicho de 7 cabeças, só é chato de manter sem ferramentas.

Esse lance que vc falou do CSS, eu dou graças a Deus porque lá tras quando eu comecei a aprender CSS, eu aprendi na unha, CSS puro, logo depois fui pro SASS, mas ele é muito parecido né, então parecia que eu estava escrevendo CSS mesmo

Cara na realidade quando tu mencionou ai a parte de customização é onde chegou no ponto. Tailwind parecia para mim uma confusão de classes inline, um caos, mas quando eu me prontifiquei a migrar do Vue2 pro Vue3 eu decidi dar uma chance pro Tailwind também. Inicialmente não gostei, mas não parei de estudar. Quando eu entendi a parte de customização (no caso trabalhando direto no tailwind.config.js) ai eu não parei mais. Acho que o atalho pra entender a proposta do tailwind está ai.

Cara, seu canal é sensacional, tá cada vez melhor. Muito obrigado!

Comecei a usar o TailwindCSS e seu vídeo e comparações foram muito esclarecedoras

Uma dica que eu sempre utilizo em meus projetos é nunca “sujar” os componentes html com as muitas classes necessárias do tailwind. O que eu faço é separar numa folha nova os meus @apply criando novas classes usando dois traços (representando uma classe customizada em meu projeto) , por exemplo .btn-primary e dentro eu tenho as varias classes do tailwind deixando minha aplicação limpa desses utilitários que realmente são muitos para compor o componente final.

acredito que você tocou em um dos pontos mais importantes pra qualquer desenvolvedor que é procurar entender mais sobre o que está usando e porque está usando. com esse conhecimento todo o resto do caminho fica mais fácil.. abraço

Cara eu acho que pro front html normal, o tailwind compensa se usar os @apply, criar uma única classe personalizada e no application.css definir as classes que compõem aquele componente específico. Para front baseado em componentes, acho muito válido o tailwind

Que visão maravilhosa. Achei muito foda esse vídeo e sua visão, além de muito importante, parabéns.

Concordo com você @Mario Souto quando temos que aprender a TAILWIND além de CSS como uma nova forma de programar CSS e não somente estilizar, estou iniciando em TAILWIND recentemente e relutei pois ter em mente um Sistema com N páginas e todo a maioria do CSS embutido no HTML página por página, fica complicado mesmo tendo como configurar um arquivo config padronizado, mais como saber se dará certo se não tentarmos. Gosto de debates inteligentes que nos faz pensar, ganhou um incrito.

Eu trabalho com Vue, é incrível o quanto é fácil fazer as coisas com esse framework.

Eu trabalho num projeto next atualmente, e uso tanto o tailwind quanto o styled-components, o tailwind eu uso pra trabalhar com responsividade enquanto o styled para criação de componentes individuais.

Acabei não lendo os comentários, mas se alguém já falou, desculpem a repetição. Mas um grande diferencial com tailwindcss é utilizando o @apply e melhor ainda se estive utilizando Svelte/SvelteKit. Aí sim vc vai ter uma diferença e tanto.

Sobre organização do tailwindcss, hoje eu utilizo dentro do arquivo css para os meus componentes (tutorial na própria página do tailwind) e assim com o uso do @apply no css, crio uma classe e organizo todos os pontos e brakepoints e então utilizo essa classe no meu componente (uso scss para o aninhamento de classes😁) e é isso, dessa forma eu organizo o código e dentro do componente tudo fica mais limpinho.

Todas as classes que envolvem breakPoints eu coloco em uma nova linha, tipo, todas de md: em uma linha , sm: em outra, e assim por diante…

Eu acredito que a componetização e as diretivas @apply são bastante úteis pra questão de manutenção do Tailwind...

Vue tem uma camada que precisa de plugin no navigador para ver os arquivo que algo que toda vez tem configurar,entretanto o veu tem uma work standate feito pra otimizar o codigo e a estrutuda do veu que algo legal.Gostei muito desse video,estou fazendo um libary de game em js e vai ter um modulo de Ui game que vai servi para web tb nome é nandraki.

Aodrei o vídeo e seu questionamento porque ele foi o meu a tempos atras. Gosto da ideia do Tailwind por que sou "o chato" que não curte CSS dentro do JS. Mas fora isso, a parte de extenção e padronização permite criar "componetes" de css, ou seja se eu tenho um componente botão eu consigo definir uma classe "botão" com todos os estilos (ou tolkens) do framework e só aplicar essa classe no html final. Achei isso mágico e segue uma ideia de componente reutilizavel dos frameworks JS. E eu ainda posso extender a classe criando variações. Enfim, gosto muito da ideias do tailwind e queria que tivesse tido um video desse quando eu tava estudando sobre. rs Adoraria ver mais conteúdo sobre tailwind aqui no seu canal! Abraço!

Como tudo tem suas excessões, comigo foi o inverso, tailwindCss me ajudou e muito a entender melhor o css aplicado através dos “acrônimos”. MASSSS só pq a doc dele é bem bacana. Se a doc fosse ruim, talvez eu teria uma opinião totalmente contrária sobre ele. Top o vídeo, parabéns, curti. 👏🏽👏🏽👏🏽

Gostei de sua explicação, uso o semantic UI, quando vi esse tailwind achei muito trabalhoso, escreve muita coisa pra sair um botão.

Eu comecei a brincar com Tailwind agora (depois de 4 anos de área). Gostei muito, já que é bem parecido com minha forma de escrever css. Na minha opinião, o Tailwind é uma forma bem eficiente de escrever css declarativo, já que as classes são basicamente as propriedades css.

2023 e esse vídeo continua muito relevante e excelente!

caraaca o jeito que e ele fala rapidao e sempre exemplificando e muiito daora

Gostei do vídeo , achei bem completo a respeito dos frameworks. Eu ja trabalhei com bootstrap e senti a mesma coisa a respeito da customização de classes , é mais penoso kkkk , nesse sentido achei mais legal o Materialize CSS por ser mais limpo.

Estou começando a ver o Chackra UI muito interessante!

Que cenário é esseeeeeee! Muito bom rapaz!

Eu utilizei o TailwindCSS, e achei muito estranho no começo e falei "prefiro mil vezes escrever o CSS puro" mas um tempo usando eu comecei a perceber facilidades que temos com ele, principalmente quando temos que criar algo pelo JavaScript, que vai ser repetido diversas vezes na pagina. No meu projeto eu tinha que criar uns cards de produtos, e era muito mais simples utilizar o Tailwind do que criar um monte de classes no CSS para estilizar. Ele suja sim um pouco o arquivo HTML, mas compensa utilizar ele no JavaScript.

Eu estou criando um Design System com Styled Components, então eu só declaro o estilo uma vez e todos os componentes podem herdar o estilo, além disso possui as variantes.

A experiencia de utilização do vue é incrivel,

a melhor coisa que tem é usar Styled Components com o Styled System, fica muito mais fácil de fazer o responsivo, além de ficar visível no .jsx o que está sendo feito de responsividade, sem a necessidade de ir até o arquivo de estilo para saber isso

Muito bom. Parabénsss.

Muito bom vídeo Mario!!! E eu sou da galera, se é q existem outras pessoas assim, que gostam mais de usar o css normal e acredito que a utilização do Shadow DOM é uma ótima solução para alguns problemas no css, além de utilizar Web Components como um todo (tecnologia que acho que é muito poderosa e pouco reconhecida, mas não vem muito ao caso)

Eu também jQuery foi meu primeiro! Comecei utilizar essa semana o tailwind sou da época do style inline, Estou apaixonado 😍️! Acredito que as cores fontes etc... ideal é uma definição global no CSS, agora em alinhamento estrutura adorei o tailwind.

Em questão das contidades de class poderia criar um class js que possa imprimir no body com variavel pre pronta tipo: já dentro da class js. Seria uma ideia boa.

Conheci teu canal agora com a imersão da alura e curti muito, to fazendo a imersão com tailwindcss em vez de styled component, porque to estudando para minha empresa e to querendo me aprofundar no assunto. Sobre essa 'poluição' na tela de escrita, tem como tu criar classes especificar já com estilos pré-determinados e limpar muito o código e reutilizar, só to achando pouco maleavel a parte de flex deles

Comecei com CSS cru, e depois de poucas páginas vi que a nomenclatura das minhas classes era uma aberração, e meu código estava virando um spaguetti. Tentei adotar a metodologia BEM, mas foi outro fracasso. Tailwind é a melhor solução possível para a forma como os estilos são implementados no HTML.

Você usa alguma coisa para qualidade de código, plugin VsCode? sonarQube? Algum outro ?

To usando svelte e tailwind e nunca tive uma experience de desenvolvimento tao boa.

Qual aprender primeiro, framework CSS ou um framework JS?

Mano, falou tudo aqui... Cada um sabe o melhor pra seu trabalho, mas tentei usar Tailwind, achei que tem muitas funcionalidades e tudo mais, mas o HTML começa ficar confuso. Isso pra mim que sou inexperiente

Adoro CSS e to aprendendo tailwind e não é nada complicado, mas ainda não sei se gosto ou não.

O Wordpress com a mudança do editor para o Gutemberg, precisa urgentemente de algo como o Tailwind, que possa ser customizado, para que os blocos do editor possam se encaixar visualmenteno layout do tema.

Fortalecer conteúdos que agrega, por gentileza tem com você fazer um vídeo que imputa os dados do cadastro para o email

Eu já dei uma mexida com Vue pra um projeto que um amigo me chamou pra ajudar e achei organizado de escrever a parte visual com aquele Bootstrap vue, mas é muuuito verboso e pra inserir código JS no meio pra fazer teste é meio ruim pq não é todo lugar que aceita. Não sei identificar ele emrelação ao ângular já que nunca mexi com ângular, mas eu não gostei kkkkk

Eu utilizo mais o Bootstrap para responsividade é mais prático mas os componentes eu prefiro fazer no css do 0

fala do tailwind-styled-components

O taiwlind é melhor que o bootstrap ou ainda vale a pena utilizar o boot?

Olá! E o Chakra UI ? To vendo pessoal falar em fazer classes para componentes como botoes...o Chakra já tem primary etc e pode-se estilizar o tema com as cores do projeto. Algúem poderia falar sobre o chakra ui? estou tentando usar o Tailwind ou Chakra

Sim, faltou falar sobre @apply definindo classes ao invés de criar class cheios de classes apenas uma classe recebe herança de outras!

Muito bom!

conheci um cara na minha facul que parecia ser super profissa, 30 anos de mercado, quando fui ver tava chutando tanto em framework pra fazer o trabalho de forma mais simples que a prova que era fazer uma landing page com html e css puro o cara sofreu... 30 anos sem se questionar da nisso ai...

W3css, aprendi muito no w3schools E eles tinham esse w3css pra justamente trabalhar com a respnsividade

Nunca tinha ouvido falar desse xstyled, me parece muito com CakraUI, fiquei interessado. Você utiliza em produção? E recomenda em larga escala?

uso muito uma lib chamada chakraui muito boa!

eu faco com styled compoenents com sintaxe sass

19:05 Acho que essa barreira vai ser a mais difícil. Design system está evoluindo para outro caminho.

E não criticando aqui(mas já criticando, mas sabendo que acho que não foi o caso) Mas essa repulsa que a galera tem, ainda mais com o que tu disse de "a maioria tá usando o Tailwind sem saber css", já acontecia no Bootstrap, mas ninguém ligava, alguém deve ter começado um rant pra cima do Tailwind(talvez por culpa do próprio jeito meio arrogante do Wathan) e a galera foi no hype Jurava que já tava inscrito kkkk Agora, inscrito! o/

Vue é bom demais, recomendo.

Será que só eu fiquei incomodado com spotify piscando

Porque usar tailwind ao invés de bootstrap?

A ideia do tailwind não é inovadora, mas o que fez ele ganhar atenção foi justamente a boa documentação e exemplos demonstrativos na página. Creio que seja pelas boas exibições da ideia que fez ele ganhar tanta popularidade. Pra quem já mexe a muito tempo com CSS sabe o quão trabalhoso é criar nomes de classes etc. Sinceramente eu acho que nomes "semânticos" são válidos para os DEVs, mas conforme a equipe muda e o projeto toma outro caminho, os nomes começam a perder alguns sentidos, a tentação em renomear alguns é grande. Para iniciantes, eu recomendaria justamente não usar o Tailwind, mas criar o seu próprio. Eu particularmente sempre tive o hábito de criar algo semelhante com nomes de classes que o emmet usa. Mas o tailwind foi além dessa ideia adicionando tamanho cores etc. Na criação seria fácil não ficar dependente documentação dele além de ser um excelente treinamento. Esses dias estava pensando em como seria usar o melhor dos dois mundos, usando um nome simples button-blue, e conseguir herdar outras classes sem declarar efetivamente no arquivo de produção, algo como usar um arquivo externo por exemplo: .button-blue { flex, // display: felx p-16, // padding: 16px blue-600 // background: #0000ff; } Ainda não consegui implementar totalmente, mas é uma visão que teria o benefício de um código semântico e ao mesmo tempo uma customização organizada caso houvesse uma complexidade além do básico. Excelente vídeo Souto, um tempão que não via o canal, foi bom retornar.

Soutinho, você sempre esquece de colocar os links, mencionados no vídeo, na descrição do vídeo... ahahahahaha

Sou fã do chakra ui

Faço css na mão mesmo

Eu realmente não gosto dessa ideia de funcional css. Polui muito o HTML, desenvolvedores novos acabam não aprendendo muito de css. Ps: eu já coloquei no lint pra quebrar se alguém usasse float

Eu uso tailwindcss

Sass e a mente é isso que uso pra fazer css haha

boa soutoooo

Segundo

fico impressionado desse medo da galera de CSS

Eu gosto do tailwind 😥

Eu não consigo suprimir minha vontade de vomitar

A parada é que o Tailwind resolveu o CSS, só que é mais feio do que bater em mãe.

TailwindCSS > *

so eu que vejo que a explicação dele e confusa como ele ? explicação simplificada e o CSS totalmente padronizado e sendo automatizado , eliminando o aprendizado dos fundamentos , pros apresados em aprender (achar que aprendeu) o frame e sensacional

Sobre o que comentou nos 20:30 Existem duas soluções pra essa parte do tamanho do class é usar o prettier que quebra cada classe como uma linha, oooou... usar o WindiCSS, que é bem similar, e veio com uma feature chamada Attributify, que permite usar ele exatamente como esse XStyled que você comentou windicss.org/posts/attributify.html