Tailwind CSS // Dicionário do Programador

🚀 𝗛𝗢𝗦𝗧𝗚𝗔𝗧𝗢𝗥 → codft.me/HGiEK...
Tailwind CSS é um dos frameworks Front-End que tem se popularizado entre os desenvolvedores front-end, quem o utiliza não se arrepende. Tailwind foi criado com o conceito utility-first, que promete trazer ao desenvolvedor uma vantagem para implementar um layout que seja totalmente personalizável, criado de forma simples, rápida e de fácil manutenção.
📝 𝗟𝗶𝗻𝗸𝘀 𝗖𝗶𝘁𝗮𝗱𝗼𝘀
→ TailwinCSS Playground: ​​play.tailwindc...
📡 𝗦𝗶𝗴𝗮 𝗮𝘀 𝗿𝗲𝗱𝗲𝘀 𝗱𝗼 𝗖𝗗𝗙𝗧𝗩
→ linktr.ee/codi...
📸𝗜𝗻𝘀𝘁𝗮𝗴𝗿𝗮𝗺
→ / codigofontetv
☕ 𝗖𝗹𝘂𝗯𝗲 𝗱𝗼𝘀 𝗖𝗗𝗙𝘀 𝗻𝗼 𝗬𝗼𝘂𝘁𝘂𝗯𝗲
→ codft.me/clube...
▸ 𝗛𝗢𝗦𝗧𝗚𝗔𝗧𝗢𝗥
📢 Vagas e Oportunidades: codft.me/hostg...
𝑵ó𝒔 ❤️ 𝒓𝒆𝒄𝒆𝒃𝒆𝒓 𝒑𝒓𝒆𝒔𝒆𝒏𝒕𝒆𝒔, 𝒄𝒂𝒓𝒕𝒂𝒔, 𝒃𝒓𝒊𝒏𝒅𝒆𝒔 𝒆 𝒎𝒊𝒎𝒐𝒔.
Caixa Postal: 91735 - Cep: 25620-972
Petrópolis / RJ
💻 Edição e Áudio: RW Studio
🔗 Um vídeo do site Código Fonte
#Tailwind #CSS #Front-End

[@davidm.1263]

Cara, quanto mais eu pesquiso, mais eu vejo que eu realmente não sei de nada, tem uns 2 anos que estudo programação e todo dia aparece uma tecnologia nova que nunca tinha visto antes kkkkkkkkkkkkk não cabe mais nada na minha cabeça, programação é um mundo infinito

[@banuina_fps]

Nem se preocupe tanto com isso, tem muita ferramenta que é concorrente de outras, e se vc sabe uma das tecnologias, já resolve muita coisa. Não precisa saber React e Angular, por exemplo. Apenas um dos dois já te dá muita oportunidade no mercado.

[@rodrigoniederauer]

Façam o seguinte exercício: Enquanto a Vanessa fala olhem o rosto do Gabriel e vice-versa.

[@andreciobezerra1198]

Fiz isso já e defini o sinônimo de amor matrimonial

[@81jlgregorio]

Já fiz... eu racho de rir... huhauaha

[@FakeLewis]

Lkkkkkk muito bom

[@WilMaster]

obrigado.... mais nunca vou ver um vídeo de dupla da mesma forma hahaha

[@DioneBatista]

Pensei que só eu fazia isso kkkkkkkkkkk

[@paulomagalhaes54]

Construo coisas pra web desde 2001 e o Tailwind CSS foi uma das melhores ferramentas que já trabalhei. Produtividade++

[@micaelalgarrao6043]

estou estudando css e até, é bem legal fazer as aplicações nele, porém é muito cansativo e nn tão produtivo. É possível trabalhar apenas com tailwind sem css? as empresas usam css puro?

[@BTwoOne_]

@@micaelalgarrao6043 Sim o css puro é bem cansativo e repetitivo, mas pra quem está começando faz parte do processo. Hoje utilizo tailwind e me tornou muito mais produtivo. Depende, as empresas pode utilizar algum framework css ou só css puro. Porém, não existe vantagem em não usar um framework

[@thiagosantosa1]

Na boa o SCSS mata isso com certeza, fora que vc produz menos linhas do SCSS e deixa o código HTML mais limpo com menos classes pra quem for dar manutenção. Hoje em dia é muito melhor vc usar um SCSS e produzir seu código do 0. Digo isso com propriedade pois sou front end HTML em construção de tela desde 2004.

[@diegoinacio1063]

Penso o mesmo, acho muito mais vantajoso criar o SCSS, esses frameworks cheios de classes nos componentes são horríveis, o código fica totalmente sujo, imagina que pânico isso em um projeto gigante kk

[@DotcodeEdu]

Não conhecia, mas parece bem interessante. Xeretar o Tailwind é uma certeza agora kkkkk

[@pedneves2]

Eu tô falando pros devs que estudam comigo e pra olhar pro Tailwind... E eles tudo rindo de mim... Tá aí. Várias vagas lá no Canadá já tão pedindo conhecimento de Tailwind.. Jajá chega aqui.

[@rafaelmrantunes]

Isso, cara. Tem umas features novas que são de explodir a cabeça de tão show, just-in-time, por exemplo. Espere grandes coisas vindo para a versão 3. Sem falar que o site do Facebook, parece que está usando o conceito de utility-first, então não dá pra ignorar.

[@Heni_zion]

Depois que eu comecei a usar tailwind eu nunca mais quero voltar pro css normal kkkk

[@wellingtoncesar65]

Concordo totalmente contigo. Esses que riram da sua cara ao falar sobre tailwindcss vão sentir o golpe logo logo. Não vai demorar muito tempo para que as empresas brasileiras comecem a exigir o tailwindcss.

[@garudadrakon4728]

namoral, o cenário dev no Brasil é simplesmente bizarro oq o povo tem de idolatria pelo HTML, CSS, JavaScript ou outra linguagem popular ao mesmo tempo que abomina o resto não tá no papel

[@Gabriel-qq7lx]

@@garudadrakon4728 A maioria só segue o fluxo, infelizmente

[@martygo]

No primeiro contacto com o Tailwind, eu odeiei. Mas fui obrigado a utilizar em projeto na empresa que eu trabalho já que ela faz parte da stack da empresa e agora estou amando. A integração com o Vue é simplesmente fantástica. Amei!

[@rafaelmrantunes]

Idem

[@flow8bit692]

Mais um framework pra gerar camada de processamento desnecessário na maquina, tudo isso só pra "Diminuir o tamanho do código". Daqui uns tempo programar vai ser tão fácil como montar lego. Daqui uns anos pra me abrir uma página web vou precisar de processador i9 e 16GB de ram.

[@ailuros_]

kkkkkkkkkkkkkkkkkkkk

[@luizAugustoll]

Eu não sei o tailwind, mas o sass é processado ou pelo servidor ou gerando css estático.

[@garudadrakon4728]

culpe o C por trazer essa facilidade pra programação

[@flow8bit692]

@@garudadrakon4728 Mas uma "grande parte" de pessoas que desenvolve web e entra no mercado não sabe C++. As vezes não sabe manipular ponteiros. Um exemplo: bootstrap não foi feito em C, é apenas um monte de js e classes css que tem que ser processado porque o facilitador queria montar um formulário de forma mais rápida, mas aquele código que você baixa e cola no seu projeto é tudo varrido pelo computador e se usar CDN vai ter gasto de banda de internet. Vai acabar igual o Jquery. Talvez não tenha um efeito pesado em projetos pequenos, agora em projetos grande faz toda a diferença em pensar em economia de recursos. É vantagem para o cliente e o servidor principalmente quando tem grande fluxo de acesso e de pessoas usando serviços dentro do app, vai economizar uma grana na infra de rede com essa ideologia mais aí vai depender de muitas coisas inclusive o plano de negócio, Mais aí vem outra contraditória porque economizar tempo é ganhar dinheiro aí desse caso você tem que dosar. E uma coisa estava reparando é o facebook que usa react e transpiladores php com design novo vejo bastantes demora de resposta de ações de eventos e as vezes se embola e de redireciona pra pagina de feed do nada.

[@germanolira6826]

Fui dormir 4 da manhã lendo sobre Tailwind, e acordo com um Dicionário do Programador sobre Tailwind

[@ErosMidkov]

Só 313 mil inscritos? Esse canal já merecia ter passado de milhão. Conteúdo sempre muito bom!

[@codigofontetv]

Muito obrigado Cassius!

[@litzdc1212]

dicionário programador vite

[@jandersonfcosta]

Se voce gosta de html pesado e poluído, siga em frente..

[@jiujis1705]

tailwind css em determinados layouts fica parecendo css inline

[@odonatojunior]

Fui muito resistente ao Tailwind porque achava que era difícil de manter e parecia extremamente bagunçado. Porém depois de estudar e por a mão na massa eu vi algo que pode ser um bom aliado ao tempo na hora de desenvolver o estilo de uma aplicação. Uso o Bootstrap no trabalho, o sistema de grid dele é maravilhoso mas não gosto dos estilos engessados dos componentes, quando eu quero algo diferente tenho que abrir uma folha de estilo separada para as customizações, o que me faz as vezes ter mais vontade de criar meus componentes com o CSS do zero. Espero evoluir minhas habilidades junto dessa ferramenta

[@lucasspicollys8000]

Mesma coisa, o grid do bootstrap acho sensacional mas o layout dos componentes já ficaram datados e bem feios.

[@sinvalfelisberto]

Acredita que pra começar estudar Tailwind, já fiz logo a pesquisa "dicionário do programador tailwind"... eis me aqui!❤

[@tiagotheoliveira]

Já utilizo TailwindCSS a um bom tempo. ~E simplesmente incrível o que podemos construir com ele. Inclusive aprendi muito de CSS pra entender melhor as classes disponibilizadas.

[@cleyton1986]

É igual ao LEGO®... mas aí eu fico pensando; "Por fora lindo e por dentro um caos?"

[@karineds]

Deu uma clariada aqui, to aprendendo tailwind e quero usar junto com react.

[@ToniusPlays]

42 anos e a partir de hoje ficarei em casa sem trabalho, estou com uma boa economia, vontade de aprender e tempo pra me dedicar. Será que dá tempo de começar em uma área nova?

[@pppf_S]

Claro q dá!!!! Sucesso pra vc!

[@pedrovictorsaraiva8705]

Você só não vai ter mais tempo quando estiver morto amigo, vai com tudo!!

[@ToniusPlays]

Estou apaixonado por C, C++, espero que tenha bastante campo financeiramente bom para esta linguagem. Poder unir a linguagem que mais gosta com lado financeiro seria maravilhoso.

[@DiegoArcega1]

Falem sobre o chakra-ui. Tenho 7 anos de experiência e na minha opinião é meu to-go component library. Tailwindcss não é equivalente a material ui ou chakra-ui, tailwind é só pra css, os outros são bibliotecas de componentes pronta

[@diegoinacio1063]

Chakra-UI é muito bom, sempre utilizo.

[@multiservicosreptecno3786]

Faaala casal!!🙄 Vocês tem contato com o Igor Oliveira, do ProgramadorBR? Fazem 45 dias que ele não posta mais em quaisquer de suas redes sociais...

[@codigofontetv]

Temos sim, ele tem postado stories no Instagram!

[@claudsonpaulino]

Uso a algum tempo e não largo mais, fica muito simples criar templates

[@rapha-v]

Eu fui o contrário da maioria dos comentários aqui kkkkkkkk Sempre olhei com bons olhos pro Tailwind sem ter usado. Quando fui obrigado a usar em um projeto da empresa, odiei. Não podia odiar mais....É simplesmente a mesma coisa que escrever estilo inline, só que limitado ao que você colocou no arquivo config. Deixa o HTML sujo pra caramba quando você mistura com o Vue por exemplo, gera muita bagunça pra pouco retorno. Na minha opinião, resolve um problema que simplesmente não existe. Algumas coisas serem utility é maravilhoso no CSS, mas escrever o CSS (preferencialmente com pre-processador) com alguma metodologia é melhor e mais libertador.

[@ailuros_]

Bom comentário.

[@codigofontetv]

Boa a sua reflexão! Ela acaba sendo (como muitas tecnologias) um trade off.

[@ProfessorEdsonMaia]

Sou fã do trabalho de vcs. Muito competentes, conteúdo muito rico, claro, objetivo.

[@juniormartinxo]

Vejo que o Tailwind "tercerizou" o cascading para o componente, ou seja, se você cria um componente com ele, não haverá necessidade de criação das classes comumente utilizada no "html tradicional" e se você fizer alguma alteração no componente, automaticamente toda instância deste componente será alterada na aplicação. Isso é lindo! ;)

[@shiratorr]

faz sentido

[@isabellagouveias]

Chega notificação eu venho no 12 kkkkkkkk

[@luciansantoscaetano]

A muitos anos quando o ie reinava eu fiz algo parecido

[@henriqueFrota90]

Achei uma porcaria, mas é o que o mercado ta pedindo né..

[@gabrieledval]

É vem interessante! Usei em 2018-2019, nas troquei por BulmaCSS, não sabia que tinha crescido tanto 👏🏿👏🏿👏🏿

[@devlucao]

novo video: A eu: toma aqui meu like

[@maykelpereira8474]

Cara eu amo css

[@MatheusDevArt]

Gabriel e Vanessa fiquei com uma dúvida. Na situação do mercado atual, vocês achariam mais proveitoso aprender Tailwind ou bootstrap ? (sem levar em conta preferências pessoais, mas levando em conta demanda e utilização pelas empresas)

[@NandoPuretz]

Amoooooooooooooooo TailwindCSS... e junto com AlpineJS, Livewire e Laravel, é só alegria!!

[@carlosnani]

Gostei desse Tailwind CSS !!! Vou pesquisar e tentar aprender um pouco.

[@pedroroccon]

Sempre gostei do Tailwind. Desde a versão 1.0. No começo foi meio difícil a migração do Bootstrap. Mas depois, vai que vai

[@jhonnyfreire]

Essa abordagem do Tailwind não me agrada muito, me parece estar criando 'inline css', coisa que se fazia na época que a internet era movida a lenha. As classes disponibilizadas são tão mínimas que não vejo uma vantagem tão grande entre usar o tailwind e o css padrão que nós mesmos podemos gerar. Vide a classe flex, qual vantagem de ter uma classe flex de um framework do que nós mesmos criarmos um display: flex? Não sei se vale o acoplamento/vendor lock-in do projeto com um framework com essa abordagem.

[@rafaelmrantunes]

Tailwind só serve se você utilizar o conceito de componentes, como React, Vue... Vanilla não cai bem.

[@rick7242]

Já utilizo o tailwind nos meus projetos pessoas, é bem legal de trabalhar com ele XD

[@guilhermerover7296]

Eu utilizo o tailwind faz tempo, e no meu caso ele funciona melhor que Bootstrap, Materialize e outros semelhantes.

[@antoniocarloslima495]

Adoro o Tailwind. Utilmente tenho utilizado bastante.

[@centraltecsuprimentosparai1831]

Olá pessoal. Sigo vocês faz um tempo e adoro os seus vídeos e suas explicações sobre programação. Resolvi utilizar o tailwind e adorei, pois fica muito mais fácil programar. Só que estou tendo um problema em minha CSP style-src que está bloqueando os estilos embutidos de tailwind. Tentei usar o useMemo dentro dos meus componentes e páginas e ainda assim estou precisando adicionar unsafe-inline na minha csp style-src. Existe alguma forma de utilizar tailwind sem precisar de unsafe-inline na minha csp style-src? valeuuuuuuu

[@Luide22]

FIRST

[@CarlosEduardo-nt8pm]

tenho um amor incondicional pelo tailwind é muito bom ver ele se popularizando.

[@enriquegal2814]

Vocês são ótimos, mas tomara que algum dia mudem de patrocinante, porque essa Hostgator tem a pior avaliação pela comunidade. Ontem caiu por muito tempo, não atendem chamados, deixam na mão a todo mundo e as histórias de serviço ruim são muitas!

[@rclauderi]

Lendo a documentação em 3 2 1 0 kkk

[@GameHard15]

Primeiro

[@manoeltsf]

A sensação é trabalhar com abordagem funcional assim como é feito em outras linguagens na construção de componentes visuais. Muito interessante isso.

[@rafaelmrantunes]

Amo 🥰

[@jlfmga]

Utilizei em um projeto e achei fantástico!

[@DanielRios549]

Tá ai um que eu não conhecia, vou começar a estudar ele

[@andregrossi]

Como algúem fortemente adapto do CSS-in-JS com Styled Components, a abordagem do TailwindCSS PARA MIM não faz sentido e soa como um retrocesso de todo o avanço de separação de concerns que há muito tempo é reforçado e encorajado entre o HTML e CSS. Mas de uns anos para cá muitos frameworks e libs tem quebrado um pouco esse conceito, reagrupando coisas que até então deviam ficar cada uma no seu quadrado (os frameworks JS por exemplo React e Svelte que já trabalhei/trabalho são exemplos claros que é perfeitamente normal manter funções, estilos e lógica pertinentes a uma funcionalidade agrupadas no mesmo arquivo). Mas pelo outro lado, entendo também o apelo e os rápidos benefícios que o Tailwind tem pra quem parte do CSS cru e raiz (ou um pouco mais Nutella com SASS rs) ou que só teve experiência com o Bootstrap e sua nomenclatura um pouco mais rígida e opinionada. Se beeeeeem que o Tailwind também introduz sua nomenclatura específica, então acaba sendo trocar 6 por meia dúzia pra mim... Eu acabei encontrando o sweet spot pra mim no Chakra UI, que mantém a escrita parecida com o que estava acostumado na forma de components, com estilos adicionados via props e tipado com TypeScript. Traz algumas coisas pre-prontas com estilos próprios mas que com poucos overrides você transforma no que quiser (algo que eu vejo que está surgindo agora com o TailwindUI) Para quem quiser entender um pouco do lado "negro" do Tailwind e os problemas que ele pode introduzir a longo prazo: dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90 TL;DR pra prototipação, jogo rápido e projetos pequenos, Tailwind ajuda e agiliza o processo inicial. Mas a manutenção a longo prazo a medida que você precisa algo extremamente customizado e específico além de ter que nadar no macarrão de classes que vai virar o seu HTML, certamente vai trazer empecilhos e dar dor de cabeça.

[@rafaelmrantunes]

Para mim, bater o olho num componente e saber ao mesmo tempo como está estruturado e estilizado é a melhor coisa na hora da refatoração. Mas estou estudano Styled Components, pelo mercado, mesmo :)

[@andregrossi]

@@rafaelmrantunes também acho muito válido e prático de ter acesso rápido a estilização quando o trabalho pede troca constante entre o markup/estrutura e os estilos, mas é que a medida que seus estilos vão evoluindo, é crucial aplicar todas as ferramentas que o Tailwind oferece como o apply ou até mesmo o encapsulamento em um componente separado, reduzindo ao mínimo o numero de classes pra cada elemento; é muito mais tentador e rápido só adicionar o que voce precisa pra resolver ali na hora do que parar, analisar e refatorar pra nao virar um monstro não é mesmo? Eu particularmente só não acho elegante e prático a forma que o Tailwind resolve essa aproximaçao do HTML com o CSS, juntando tudo numa string de classes pre-estabelecidas, um errinho de digitação sequer vc ja quebra o negocio; como as definições ficam todas num pedaço de texto só, não existe nenhuma ferramenta que te ajude a pegar um erro mais rapidamente.

[@macos-brasil1814]

Em 1990 escrever CSS inline era horrível, hoje em dia as pessoas usam o Tailwind e falam como se fosse a invensão da roda rs Eu sinceramente acho que as pessoas deveriam aprender a usar melhor o CSS ao invés de pegar a primeira ferramenta que ve pela frente e usar em todos os lugares. O Tailwind é ótimo... assim como o bootstrap, o Sass, o materalize, o fireweb, o atomic design, styled component... Eu prefiro trabalhar com um dev que saiba usar o CSS de forma correta e bem estruturada do que um dev que sabe tudo de Tailwind e sai configurando cada tag com mil classes utilitárias rs.

[@jeancarlomoraes8644]

Comecei a trabalhar numa empresa nova no final do ano passado. Antes nunca tinha ouvido falar desse tailwind. Agora já tento utilizar ele em todos os meus projetos. No começo é realmente meio difícil de entender o motivo de utilizar, mas com o tempo, e principalmente utilizando as técnicas de componentes, o ganho na velocidade e consistência no desenvolvimento é muito grande.

[@rafaelmrantunes]

Isso mesmo! Usar Tailwind sem componentes simplesmente não dá. Não é nem um pouco manutenível

[@luisxfgc]

tailwind é perfeito

[@ricardoferreira1849]

quando vocês vão fazer um video sobre Vuetify? fica minha humilde recomendação aqui

[@josealysson2166]

que disgraça é essa style inline? kkkkkkk

[@visaodeaguia1960]

Boa noite casal de bênção. Uma dúvida eu fazendo um App a empresa contratada deve me passar o código fonte? Sim.. eu pagando o App todo avista, ou tem algum tempo de carência pra tal empresa me passar o código fonte? Obrigado por responder

[@TheVandoenterprise]

Tailwind é vida

[@Pombaco]

Perder o controle pq não quis ver uma documentação...

[@danielmoura4821]

Vanessa ou Gabriel, qual a música de fundo que vocês estão usando?

[@luishenrique-ni1yy]

0:27 quando ele fala oi cdfs tudo bem com vcs ,eu me sinto mó inteligente ksksks;-;

[@brunofelix5434]

Eu tô curioso pra ver essa mão no código.. kkk

[@luffyfat2]

Pow, criei o tailwind há 7 anos atrás e não sabia. "/

[@ZEN0004]

Pra que servi o mingw no Visual Studio Code ?

[@reiscg]

top!!!!!!!!!

[@MateusHenrique-xp1nw]

pq programador é tudo esquisito?

[@felipegoulart859]

Estou usando o Tailwind nos meus projetos. No começo é um pouco complexo mas depois é muito útil

[@juaooliveiralp]

Cade o video sobre design sytem

[@randerins]

Bootstrap: am I a...isso mesmo

[@LucasSilva-rs3yr]

Seria legal falar sobre o Three.js

[@luizAugustoll]

Achei em muitas partes que ele é mais um padrão de uso do css do que um framework em si, e sim eu vi que ele tem alguns extensores, mas seria vantagem usar ele no lugar do scss?

[@rafaelmrantunes]

Experimenta em alguns projetos, daí terá a resposta

[@ally1708]

show

[@futureappsmobile2416]

Muito bom

[@leonoliverrmusic]

Tailwind parece estranho à primeira vista, mas experimente usar e vai valer a pena. Ao invés de perdermos tempo escrevendo CSS pra usar depois, é só usarmos. Ter esse controle minucioso das classes no nível do elemento agiliza muito o trabalho. Tenho uma série de tutoriais no meu canal mostrando como fazer um site usando Vue.js + Gridsome + Tailwind, desde a criação do projeto até o deploy na Vercel ;)

[@afonsonzango]

Eu só me subscrevi porque vocês fizeram uma coisa que poucos fazem. Ir directamente ao assunto quando começa o vídeo em vez de dar muita volta só para dar a definição. Valeu...

[@marvio_rocha]

É bom ver que a tecnologia que uso alguns anos só chega aqu no Brasili 2 anos depois! Meu Deus...

[@Therealvulture]

Sei que é invulgar a pergunta mas, vocês já tiveram problemas no relacionamento? Alguma vez M3 parecem tão perfeitos

[@gcacars]

Sou totalmente contra. O HTML fica super pesado e lotado de classes. Vc não precisa escrever uma linha de CSS, mas vai escrever várias de HTML. Quando se trabalha com dezenas de times, o povo já consegue sobrescrever o Bootstrap e reinventar a roda. O Tailwind permite fazer isso mais fácil, porém vai ter o problema de consistência no sistema depois. Um .btn-primary no BS vai ter o mesmo estilo em todo o sistema(s). O Tailwind dá espaço pra gosto, e cada dev vai fazer do jeito que acha melhor. Mais fácil trocar a cor do btn do que a classe usada em dezenas de HTML. O problema, geralmente, é que as pessoas não sabem usar o Bootstrap e reclamam...

[@luisxfgc]

mas vc pode criar um arquivo custom css e colocar todas as classes do tailwind como se fosse CSS normal

[@rapha-v]

@@luisxfgc Mas ai nesse caso, porque usar Tailwind? Se vai criar um CSS pra usar @apply é melhor escrever CSS logo...

[@gcacars]

@@luisxfgc o Tailwind permite vc "agrupar" várias classes e criar outra. Mas só resolve uma parte do problema, visto que cada time pode criar seu agrupamento