Como instalar o Tailwind CSS - Setup completo de Tailwind para seu projeto
Вставка
- Опубліковано 4 жов 2024
- Aprenda a fazer o setup completo de Tailwind CSS para o seu projeto!
⭐ Conheça nossos cursos: horadecodar.co...
Tailwind CSS é uma biblioteca de CSS de utilitário que possibilita que os desenvolvedores construam designs responsivos. A instalação é relativamente simples e pode ser feita de várias maneiras, mas a mais comum é através do Node.js e do npm (Node Package Manager).
Primeiro, você instala o pacote tailwindcss em seu projeto com o comando npm install -D tailwindcss. Em seguida, inicialize o arquivo de configuração usando npx tailwindcss init. Esse comando cria um tailwind.config.js no diretório raiz do seu projeto, onde você pode personalizar as configurações.
O arquivo tailwind.config.js também possibilita especificar quais arquivos HTML ou JS devem ser escaneados em busca de classes Tailwind. Você faz isso adicionando os caminhos apropriados no campo content.
Depois de configurar, você pode adicionar diretivas Tailwind ao seu arquivo CSS principal para importar estilos. Essas diretivas (@tailwind base, @tailwind components, @tailwind utilities) importam diferentes camadas de estilo do Tailwind para o seu arquivo CSS.
Assim, com a CLI do Tailwind e a configuração adequada, você pode gerar um arquivo CSS otimizado que contém apenas as classes que você realmente usou em seu projeto, tornando-o rápido para carregar.
Veja tudo em nosso vídeo! E, claro, não esquece de se inscrever no canal do UA-cam da Hora de Codar!
🟣 Discord Hora de Codar: / discord
🔴 Instagram: / horadecodar
🔷 Telegram: t.me/horadecodar
Esse é o melhor video que existe atualmente que ensina corretamente como instalar o Tailwind no projeto, simplesmente fenomenal.
valeu Gabriel!
Galera, pra quem está vendo esse vídeo depois de 03/24, uma coisa mudou. A pasta dist não existe mais, o output.css é criado automaticamente na pasta src, que nós tivemos que criar. Se no seu projeto isso não aconteceu (e a pasta dist ainda está lá), talvez seja por que estou usando o Intellij, daí a estrutura de pastas mude, não sei. Enfim, vídeo foda! S2
Acabei de reparar isso haha exatamente
Realmente não criou aqui, mas ja estou conseguindo usar.
@@silass310 boa, boa
apos algumas horas tentando instalar o tailwind, consegui achar esse video excelente, simplesmente perfeito
Muito obrigado cara, achei que não fosse encontrar nenhum vídeo BR falando sobre a instalação do Tailwind, valeu mesmo!
Muito boa sua explicação! Parabéns pelo vídeo!👏🏽
Eu ainda não comecei a usar o Tailwind, mas já vi muitos comentários positivos sobre ele.😉
vale a pena dar uma testadinha xD
@@MatheusBattisti ✌🏽😉
Otima ferramentas conheci a pouco tempo o Tailwind incrível, faz mais vídeos sobre ele , quando vi o título do vídeo já vim correndo ver o conteúdo kkkk top
sim, pretendo trazer =))
estamos usando em nosso projeto tb
Sempre to apoiando seu trabalho aqui parabens, vou voltar e pegar firme nos estudos, no momento estou estudando Comércio Exterior, mas vou dar um jeito de encaixar meu perfil a area da tecnologia, abraço João!
boa =))
Valeu Matheus, estou no seu curso de react, muito obrigado por ajudar as pessoas que estão entrando nesse mundo do Front-end.
oque esta achando do curso ?
Matheus, conteúdo top de mais, apliquei os estilos em um projeto React com base nesta aula. Vc é 10....
Professor Matheus, veio por meio deste comentário com uma crítica construtiva, tenho acompanhado o seu trabalho por um bom tempo, assistindo aos seus projetos e aulas.Você é um excelente professor, capaz de transmitir conhecimento de forma eficaz e direta, sem enrolação. No entanto, como admiradora do seu trabalho, gostaria de fazer uma sugestão construtiva. Tenho notado que, em algumas ocasiões, seu áudio fica meio baixo por causa do fone de ouvido. Acredito que investir em um microfone profissional, talvez até mesmo um microfone de podcast ou microfone lapela, poderia melhorar a qualidade do áudio em seus conteúdos. "Entendo que ninguém pediu a minha opinião hahaha, mas compartilho isso com o único objetivo de contribuir para aprimorar ainda mais o seu trabalho". Espero que você considere essa sugestão. Obrigada! s2
vim do curso da udemy aula 8 agora eu consegui rsrs valeu professor
Muito bom! Sempre salvando a galera.
Excelente professor! Fica uma sugestão/pedido faça uma vídeo aula mostrando como criar um site básico usando react js e estilizando com tailwind css.
k essa é facil amigo, depois de configurado ai, é tipo bootstrap.
Boa noite mestre faço seus cursos na udemy, mestre precisava muito de um curso com sua metodologia e didática de java web, se possível, faz um curso de java eu compro só mandar o link., fiz vários cursos de node mas só aprende de fato com seu método, parabéns pelo trabalho de excelência que tem feito.
opa! obrigado pela sugestão
Faz um projeto ecommerce, do zero a finalização
Up
Tava quebrando a cabeça aqui kkk obrigado
muito bom parabens"!
a parte do sublinhado pegou, mas a cor não, oq pode estar errado?
VOCÊ É FERAAAAAAAAAAAAAAAAAAAA!!
AAí tem que fazer isso toda vez que for começar um projeto novo em Tailwind? Eu sou nova em programação
Toopp!! traz um prj com vue e node para aprender a integrar os 2 kkk
calor em Floripa??
Fiquei com uma duvida, o meu projeto tem que ficar na pasta src? para o Tailwind funcionar ?
Matheus, depois cria um vídeo atualizado sobre mercado de trabalho, para entrar nesse mundo onde você precisa de muitos contatos para ganhar confiança e experiência. Fechou? Valeu! Adquiri seu curso e já peguei certificado "webpack". Abraço!
opa , valeu pela sugestão =)
Estou fazendo um projeto sozinho e não tinha/tenho tanta prática com CSS, vcs me indicariam fazer o projeto usando somente arquivos CSS, usando algum framework web com código-fonte aberto como o bootstrap ou os dois??
Seus vídeos estão me ajudando muito nessa jornada
Eu estava apanhando porque no meu arquivo, quando cliquei pra completar a linha de linkar o css, veio trocado, e os estilos não estavam funcionando corretamente, veio ao invés de e eu demorei muuuito pra perceber que era isso que estava afetando a aplicação dos estilos.
não acredito que funcinou 5h apanhando só para instalar isso, To até feliz agora
irmao, eu nao consigo mano!
to tentando e da erro em tudo que eu coloco neiowfeiowfheiowhfewifwe
mano o index.html tem que ficar lá na pasta src? pq se não me engano quando vamos usar o github pages o index.html tem que tá ali fora das pastas pra poder funcionar e rodar o projeto. desde já agradeço, tava apanhando um pouco pra fazer um primeiro projetinho com tailwind
Saudações! Já instalei o tailwindcss, porém no meu arquivo output.css a propriedade -webkit-text-size-adjunt e o -webkit-tap-highlight-color. Por favor, podes me ajudar?
Eu vou ter que fazer o mesmo processo sempre que iniciar um novo projeto, certo?
Por que tem elementos que não funcionam? Porém quando fiz um projeto com tailwind junto com o vite tava tudo normal, quando fiz esse configuração o border, height e width não funcionam
Sei que esse vídeo faz alguns meses mas se alguém puder me responder me ajudaria muito.
A única coisa que eu não entendi foi se esse passo a passo é pra instalar o tailwind e poder usar em qualquer projeto depois, ou se a cada projeto que eu quiser usar o tailwind eu tenha que fazer todo esse processo.
Se alguém pudesse me responder me ajudaria muito!!!
é preciso fazer a instalação em cada projeto que for usar o tailwind.
legal, vai ser só essa aula de configuração do tailwind ou vai ser um curso completo?
Sobre o path do content, só o src (/src/**/*.{html,js}) é suficiente para verificar mesmo se os arquivos estiverem em pastas dentro de pastas?
Grato!
MUUUUUITO BOM
gracias saludos desde chile
Posso usar bootstrap e tailwind no mesmo projeto ?
Muito bom
Você recomenda utilizar nos projetos front end com tailwindcss?
se tem a possibilidade, não vejo pq não
é uma biblioteca bem sólida e em constante evolução
Matheus, esse conteudo vai estar também no seu curso de React na Udemy?
Posso colocar, vou tentar encaixar um projeto de react + tailwind
Esse vídeo vai tá no curso de tailwind?
coloquei lá tb, pra atualizar
Vlw.