Тёмный

Como instalar o Tailwind CSS - Setup completo de Tailwind para seu projeto 

Matheus Battisti - Hora de Codar
Подписаться 142 тыс.
Просмотров 14 тыс.
50% 1

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 RU-vid da Hora de Codar!
🟣 Discord Hora de Codar: / discord
🔴 Instagram: / horadecodar
🔷 Telegram: t.me/horadecodar

Опубликовано:

 

26 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 61   
@gabrielbrandao2481
@gabrielbrandao2481 Год назад
Esse é o melhor video que existe atualmente que ensina corretamente como instalar o Tailwind no projeto, simplesmente fenomenal.
@MatheusBattisti
@MatheusBattisti Год назад
valeu Gabriel!
@thisisamerica7490
@thisisamerica7490 9 месяцев назад
Muito obrigado cara, achei que não fosse encontrar nenhum vídeo BR falando sobre a instalação do Tailwind, valeu mesmo!
@Feipli
@Feipli 3 месяца назад
apos algumas horas tentando instalar o tailwind, consegui achar esse video excelente, simplesmente perfeito
@PedroHenriquedosSantos
@PedroHenriquedosSantos Год назад
Valeu Matheus, estou no seu curso de react, muito obrigado por ajudar as pessoas que estão entrando nesse mundo do Front-end.
@remytomaz3335
@remytomaz3335 Год назад
oque esta achando do curso ?
@joaoalveslinguisticaa
@joaoalveslinguisticaa Год назад
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!
@MatheusBattisti
@MatheusBattisti Год назад
boa =))
@alexandramiranda762
@alexandramiranda762 Год назад
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.😉
@MatheusBattisti
@MatheusBattisti Год назад
vale a pena dar uma testadinha xD
@alexandramiranda762
@alexandramiranda762 Год назад
@@MatheusBattisti ✌🏽😉
@DevFFontes
@DevFFontes Год назад
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
@MatheusBattisti
@MatheusBattisti Год назад
sim, pretendo trazer =)) estamos usando em nosso projeto tb
@nayara_s
@nayara_s Год назад
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
@wesleydasilvaconceicao8170
@wesleydasilvaconceicao8170 7 месяцев назад
Matheus, conteúdo top de mais, apliquei os estilos em um projeto React com base nesta aula. Vc é 10....
@Smart-ti
@Smart-ti 10 месяцев назад
vim do curso da udemy aula 8 agora eu consegui rsrs valeu professor
@Luis-Felipe1999
@Luis-Felipe1999 4 месяца назад
Muito bom! Sempre salvando a galera.
@13mvincius
@13mvincius Год назад
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.
@JailsonDev
@JailsonDev Год назад
k essa é facil amigo, depois de configurado ai, é tipo bootstrap.
@valdenilsonsilva6912
@valdenilsonsilva6912 Год назад
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.
@MatheusBattisti
@MatheusBattisti Год назад
opa! obrigado pela sugestão
@silass310
@silass310 5 месяцев назад
Tava quebrando a cabeça aqui kkk obrigado
@RafaelCarlos-ov5by
@RafaelCarlos-ov5by 10 месяцев назад
não acredito que funcinou 5h apanhando só para instalar isso, To até feliz agora
@noname.4391
@noname.4391 9 месяцев назад
irmao, eu nao consigo mano!
@noname.4391
@noname.4391 9 месяцев назад
to tentando e da erro em tudo que eu coloco neiowfeiowfheiowhfewifwe
@maxjhones336
@maxjhones336 12 дней назад
muito bom parabens"!
@ilovejesusforever
@ilovejesusforever Год назад
Faz um projeto ecommerce, do zero a finalização
@emersontrindade299
@emersontrindade299 Год назад
Up
@camilat6197
@camilat6197 9 месяцев назад
a parte do sublinhado pegou, mas a cor não, oq pode estar errado?
@igordantas6988
@igordantas6988 10 месяцев назад
VOCÊ É FERAAAAAAAAAAAAAAAAAAAA!!
@leticiamarques4522
@leticiamarques4522 6 месяцев назад
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
@beatrizmartins7959
@beatrizmartins7959 6 месяцев назад
Acabei de reparar isso haha exatamente
@silass310
@silass310 5 месяцев назад
Realmente não criou aqui, mas ja estou conseguindo usar.
@leticiamarques4522
@leticiamarques4522 5 месяцев назад
@@silass310 boa, boa
@OrdnaelOnaissit-y1x
@OrdnaelOnaissit-y1x Год назад
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!
@MatheusBattisti
@MatheusBattisti Год назад
opa , valeu pela sugestão =)
@MarioMatias-x4t
@MarioMatias-x4t 2 месяца назад
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?
@JulioCesar-lu1ip
@JulioCesar-lu1ip 2 месяца назад
Fiquei com uma duvida, o meu projeto tem que ficar na pasta src? para o Tailwind funcionar ?
@Ruhan-f4n
@Ruhan-f4n 10 месяцев назад
Eu vou ter que fazer o mesmo processo sempre que iniciar um novo projeto, certo?
@alineperella7054
@alineperella7054 11 месяцев назад
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.
@reuelsiIva
@reuelsiIva 11 месяцев назад
Sobre o path do content, só o src (/src/**/*.{html,js}) é suficiente para verificar mesmo se os arquivos estiverem em pastas dentro de pastas?
@ivandias3941
@ivandias3941 Год назад
Toopp!! traz um prj com vue e node para aprender a integrar os 2 kkk calor em Floripa??
@fabiusdev
@fabiusdev Год назад
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
@caiov.rodrigues1788
@caiov.rodrigues1788 9 месяцев назад
Grato!
@JailsonDev
@JailsonDev Год назад
legal, vai ser só essa aula de configuração do tailwind ou vai ser um curso completo?
@edilsonroque6691
@edilsonroque6691 9 месяцев назад
MUUUUUITO BOM
@GiovanaMansolff
@GiovanaMansolff 7 месяцев назад
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!!!
@SrGopp
@SrGopp 7 месяцев назад
é preciso fazer a instalação em cada projeto que for usar o tailwind.
@sebastianpardo4002
@sebastianpardo4002 10 месяцев назад
gracias saludos desde chile
@joaopoliceno8844
@joaopoliceno8844 10 месяцев назад
Posso usar bootstrap e tailwind no mesmo projeto ?
@joaopoliceno8844
@joaopoliceno8844 10 месяцев назад
Muito bom
@denneraladim6190
@denneraladim6190 Год назад
Você recomenda utilizar nos projetos front end com tailwindcss?
@MatheusBattisti
@MatheusBattisti Год назад
se tem a possibilidade, não vejo pq não é uma biblioteca bem sólida e em constante evolução
@pedrohenriquesantos1491
@pedrohenriquesantos1491 Год назад
Matheus, esse conteudo vai estar também no seu curso de React na Udemy?
@MatheusBattisti
@MatheusBattisti Год назад
Posso colocar, vou tentar encaixar um projeto de react + tailwind
@manoeloscar7839
@manoeloscar7839 Год назад
Esse vídeo vai tá no curso de tailwind?
@MatheusBattisti
@MatheusBattisti Год назад
coloquei lá tb, pra atualizar
@manoeloscar7839
@manoeloscar7839 Год назад
Vlw.
@devTainaFarias
@devTainaFarias 2 месяца назад
AAí tem que fazer isso toda vez que for começar um projeto novo em Tailwind? Eu sou nova em programação
@moacirrochadev
@moacirrochadev 3 месяца назад
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
@mateusmota3346
@mateusmota3346 Год назад
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
Далее
Aprenda em 13:37: Tailwind CSS
13:38
Просмотров 38 тыс.
ДЕНЬ УЧИТЕЛЯ В ШКОЛЕ
01:00
Просмотров 297 тыс.
Adding Google Fonts to Tailwind CSS Project
7:05
Просмотров 14 тыс.
3 Tips for Scaling React Apps with TailwindCSS
15:21
Просмотров 41 тыс.
How to Setup Tailwind CSS in VS Code?
7:48
Просмотров 75 тыс.
Recriei a interface do Spotify usando Tailwind
52:36
Просмотров 116 тыс.