Tailwind CSS // Dicionário do Programador
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- 🚀 𝗛𝗢𝗦𝗧𝗚𝗔𝗧𝗢𝗥 → 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
![ฮักเทื่อสุดท้าย - บอย ศิริชัย [OFFICIAL MV]](http://i.ytimg.com/vi/-1PoPoQ-B-k/mqdefault.jpg)
Construo coisas pra web desde 2001 e o Tailwind CSS foi uma das melhores ferramentas que já trabalhei. Produtividade++
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?
@@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
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
Acredita que pra começar estudar Tailwind, já fiz logo a pesquisa "dicionário do programador tailwind"... eis me aqui!❤
Só 313 mil inscritos? Esse canal já merecia ter passado de milhão. Conteúdo sempre muito bom!
Muito obrigado Cassius!
Fui dormir 4 da manhã lendo sobre Tailwind, e acordo com um Dicionário do Programador sobre Tailwind
Não conhecia, mas parece bem interessante. Xeretar o Tailwind é uma certeza agora kkkkk
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.
Deu uma clariada aqui, to aprendendo tailwind e quero usar junto com react.
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!
Idem
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
Mesma coisa, o grid do bootstrap acho sensacional mas o layout dos componentes já ficaram datados e bem feios.
Sou fã do trabalho de vcs. Muito competentes, conteúdo muito rico, claro, objetivo.
tenho um amor incondicional pelo tailwind é muito bom ver ele se popularizando.
A sensação é trabalhar com abordagem funcional assim como é feito em outras linguagens na construção de componentes visuais. Muito interessante isso.
Amoooooooooooooooo TailwindCSS... e junto com AlpineJS, Livewire e Laravel, é só alegria!!
Façam o seguinte exercício: Enquanto a Vanessa fala olhem o rosto do Gabriel e vice-versa.
Fiz isso já e defini o sinônimo de amor matrimonial
Já fiz... eu racho de rir... huhauaha
Lkkkkkk muito bom
obrigado.... mais nunca vou ver um vídeo de dupla da mesma forma hahaha
Pensei que só eu fazia isso kkkkkkkkkkk
Adoro o Tailwind. Utilmente tenho utilizado bastante.
Gostei desse Tailwind CSS !!! Vou pesquisar e tentar aprender um pouco.
É vem interessante! Usei em 2018-2019, nas troquei por BulmaCSS, não sabia que tinha crescido tanto 👏🏿👏🏿👏🏿
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.
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.
Depois que eu comecei a usar tailwind eu nunca mais quero voltar pro css normal kkkk
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.
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
@@garudadrakon4728 A maioria só segue o fluxo, infelizmente
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.
Isso mesmo! Usar Tailwind sem componentes simplesmente não dá. Não é nem um pouco manutenível
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
Estou usando o Tailwind nos meus projetos. No começo é um pouco complexo mas depois é muito útil
Utilizei em um projeto e achei fantástico!
Tá ai um que eu não conhecia, vou começar a estudar ele
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.
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
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! ;)
faz sentido
novo video: A
eu: toma aqui meu like
Já utilizo o tailwind nos meus projetos pessoas, é bem legal de trabalhar com ele XD
Cara eu amo css
tailwind é perfeito
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?
Claro q dá!!!! Sucesso pra vc!
Você só não vai ter mais tempo quando estiver morto amigo, vai com tudo!!
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.
Amo 🥰
Tailwind é vida
Eu utilizo o tailwind faz tempo, e no meu caso ele funciona melhor que Bootstrap, Materialize e outros semelhantes.
Uso a algum tempo e não largo mais, fica muito simples criar templates
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
Chakra-UI é muito bom, sempre utilizo.
A muitos anos quando o ie reinava eu fiz algo parecido
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...
dicionário programador vite
Chega notificação eu venho no 12 kkkkkkkk
É igual ao LEGO®... mas aí eu fico pensando; "Por fora lindo e por dentro um caos?"
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)
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...
Temos sim, ele tem postado stories no Instagram!
top!!!!!!!!!
tailwind css em determinados layouts fica parecendo css inline
Seria legal falar sobre o Three.js
quando vocês vão fazer um video sobre Vuetify?
fica minha humilde recomendação aqui
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
Cade o video sobre design sytem
É bom ver que a tecnologia que uso alguns anos só chega aqu no Brasili 2 anos depois! Meu Deus...
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 ;)
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.
Bom comentário.
Boa a sua reflexão! Ela acaba sendo (como muitas tecnologias) um trade off.
Muito bom
show
0:27 quando ele fala oi cdfs tudo bem com vcs ,eu me sinto mó inteligente ksksks;-;
Pra que servi o mingw no Visual Studio Code ?
Pow, criei o tailwind há 7 anos atrás e não sabia. "/
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
Vanessa ou Gabriel, qual a música de fundo que vocês estão usando?
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?
Experimenta em alguns projetos, daí terá a resposta
Eu tô curioso pra ver essa mão no código.. kkk
Se voce gosta de html pesado e poluído, siga em frente..
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.
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 :)
@@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.
Bootstrap: am I a...isso mesmo
Primeiro
Lendo a documentação em 3 2 1 0 kkk
FIRST
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.
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.
Tailwind só serve se você utilizar o conceito de componentes, como React, Vue... Vanilla não cai bem.
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.
kkkkkkkkkkkkkkkkkkkk
Eu não sei o tailwind, mas o sass é processado ou pelo servidor ou gerando css estático.
culpe o C por trazer essa facilidade pra programação
@@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.
Perder o controle pq não quis ver uma documentação...
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!
Sei que é invulgar a pergunta mas, vocês já tiveram problemas no relacionamento? Alguma vez
M3 parecem tão perfeitos
pq programador é tudo esquisito?
que disgraça é essa style inline? kkkkkkk
Achei uma porcaria, mas é o que o mercado ta pedindo né..
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...
mas vc pode criar um arquivo custom css e colocar todas as classes do tailwind como se fosse CSS normal
@@luisxfgc Mas ai nesse caso, porque usar Tailwind? Se vai criar um CSS pra usar @apply é melhor escrever CSS logo...
@@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