fala Mestres beleza no vídeo de hoje nós vamos falar aqui sobre T Wind CSS no nextjs nós vamos ver aqui como instalar né as configurações que a gente precisa ali para baixar e instalar no projeto já deixar o projeto interpretando aí o te ind e brincar um pouquinho com algumas classes ali mas o foco da aula não é de fato o não é uma aula de te Wind né e sim de como usar no next Beleza então antes da gente ir pro vídeo gostaria de pedir que você deixe um like no vídeo se inscreva no
canal também acompanha a gente nas redes sociais os links estão todos aí na descrição meu nome é jancer sou desenvolvedor aqui na Mestres e bora lá para mais um [Música] conteúdo então Cá estamos nós do nosso projeto projeto next que a gente vem desenvolvendo aí ao longo das aulas eh e esse projeto um detalhe aqui é que ele tem um diretório src mas dentro dentro dele nós estamos usando o app directory né que seria a a versão mais nova aí do o diretório mais novo do Next né que antes era o src directory que é
é um pouco diferente tá se eu não me engano isso aqui começou veio no next 13 Nós já estamos no next 14 Então eu estou usando aqui o app directory se você estiver usando uma outra configuração de diretórios você vai se atentar a isso na hora de configurar o teu ind mas também é detalhe tá eu tenho aqui um arquivo com basicamente os dois comandos que a gente precisa aqui eu tenho que instalar né o tnd CSS port CSS e o auto prefixer né É só rodar aqui no terminal na raiz do projeto né ele
vai fazer a instalação e depois de instalado a gente roda Esse comando aqui ó npx tem o índice SS init traço P ele vai inicializar o tnd e vai criar os arquivos de configuração pra gente que no caso é o tnd config e o port CSS config tá então no te in CSS nós vamos editar isso aqui ó o content e aqui nesse content basicamente eu vou indicar onde é que está o conteúdo Eh o meu tailwind né onde que eu tô de e escrevendo o tnd ali né quais arquivos dentro de quais diretórios então
eu tenho aqui ó já salvo as Strings que eu usei para configurar que também é o que eles indicam ali na documentação mas basicamente você aponta né no caso aqui eu tô apontando pro app directory né todos os arquivos JS typescript jsx tsx e mdx e pro diretório pages e components né então Suponha que você tenha a arquitetura sem o src né que o app ficaria na raiz então você teria que fora o diretório app diretório Pag components que aí você organizaria no meu caso aqui como eu tenho esse src dentro de src eu coloco
n components aqui eu criaria né o Pag e eu organizaria dessa forma se fosse o caso aí do da arquitetura né Isso aqui vai depender da arquitetura que tá o seu projeto então você vem aqui e passa esses diretórios apontando aí para onde que você tá usando o t Beleza então com isso aqui feito salva o arquivo eu já vou fechar isso aqui e com esse arquivo de configuração feito aqui a gente já pode vir aqui no no meu caso né Eu tô no app directory eu já tenho aqui um arquivo né de CSS Global
Então nesse arquivo de CSS Global a gente vai fazer alguns imports aqui do tailwind porque o arquivo de CSS Global ele é usado a gente importa ele aqui na raiz né no layout.txt então basicamente esse CSS que eu importo na raiz ele vai ser aplicado em todas as rotas né em todo o projeto então como eu já estou importando esse arquivo né de CSS Global aqui nele Logo no início eu vou fazer esses imports aqui ó do base compon e utilities do tailwind tá então eu salvo isso aqui e agora como eu já eh estou
já instalei né o t configurei ele e declarei aqui no meu CSS Global agora as minhas componentes elas já conseguem né o te ind já consegue eh o te ind já funciona né que basicamente ele vai interpretar as classes que eu vou definir os meus elementos e vai ter um estilo específico para aquela classe Tá então vamos aqui já na Raiz Ó já que nós estamos na raiz aqui do do do projeto né ou ou seja no Home eu vou rodar aqui o npm Run Dev né pra gente inicializar aqui o nosso servidor eu já
tô com um browser aqui Vamos carregar aqui a home ã esse Card eu vou deixar comentado vamos brincar só com esse H1 aqui e como vocês podem ver né é bem simples né o Next em si ele já já tem e Tod esse suporte aí então a e a configuração também pro pro twind não é complicada tá então aqui por exemplo nesse meu H1 como eu passei aqui para ele né um Class name aqui eu já posso começar a passar as classes e do tailing então então se eu passar aqui um text TRS V deixar
um TR né 3xl que seria para definir o tamanho né Fonte size a gente já começa a ver a os estilos se aplicando né então beleza eu eu quero mexer no tamanho eh o tipo da fonte né Fonte bold vamos salvar aqui a gente pode voltar no Browser tá bold né então eu posso definir o texto para se alinhar ao centro né text Center e aqui já seria né o o que que cada classe do tnd faz né então a gente já começaria a estilizar usando essas classes aí lembrando né que nós temos aqui Tail
Wind CSS eh nós temos a documentação né documentação do do tailing em si e das classes V pegar aqui ó o que que significa classe né então tem a lista aqui de classes eh a gente pode clicar e ver o que que cada uma faz enfim para entender melhor o um pouco de tnd né porque querendo ou não as classes lembram o CSS mas tem aí os seus detalhes que a gente precisa ã aprender né então aqui se eu passar um text Blue 500 que seria aí para o meu texto ficar azul né então aqui
dessa forma a gente já pode aplicar o t de usar as classes né do T nas nossas componentes os nossos elementos tudo dentro aí desses diretórios que nós indicamos aqui no conteúdo no content da configuração do teid Beleza então para essa aula é isso tá eu espero aí que eu tenha ajudado qualquer dúvida pode deixar um comentário logo abaixo e é isso aí muito obrigado e até a [Música] próxima
