vimeo.com/.../1083873052

Agora que nós já conhecemos
as classes utilitárias,

conhecemos todo o poder
de formatação do framework Tailwind,

seria bem legal nós criarmos
um projetinho

e aplicarmos as classes
e os conhecimentos que foram passados

nesses vídeos para vocês.

A ideia é construir uma pequena página
onde nós tenhamos alguns componentes

já previamente prontos.

Esses componentes e essa página,

ela será estilizada através
do framework tailwind.

Eu já tenho alguns arquivos
aqui separados

e esses arquivos estarão
disponibilizados

junto com o código
dessa oficina no link

que vai aparecer
na descrição para vocês.

Vamos dar uma olhadinha então
no que nós vamos desenvolver.

Então eu criei essa pastinha
Oficina Tailwind,

que será a pasta onde estarão
todos os nossos arquivos do projeto,

todas as nossas dependências
e essa pastinha eu vou jogar aqui

no nosso Live Server para facilitar
a visualização do nosso conteúdo

e, obviamente, para a gente
desenvolver o código.

Dentro da pasta de imagens, nós temos
uma imagem que vai ser um banner.

Então, esse cara vai ser
o plano de fundo de uma seção hero.

Nós vamos ter três cards.

Nós vamos ter a visualização
desse conteúdo também aqui no celular,

ou seja, quando ele estiver pronto,

o tailwind vai renderizar esse carinha
para nós no celular dessa forma.

E a mesma coisa aqui no desktop.

Com o nosso conteúdo
que será aplicado,

nós teremos acesso a essa página
montando uma pequena landing page.

Essa landing page você pode
adaptar para qualquer tema

que você esteja estudando,
ou então, de repente,

para alguma entrega que você
está fazendo dentro do curso.

Para que a gente tenha todas
as opções disponíveis,

eu vou fazer passo a passo a instalação
do Tailwind nesse projeto

e aí a gente começa a consumir
as classes e os elementos da HTML

que nós vamos montar.

Então aqui na documentação
do nosso tailwind,

nós vamos na parte dos Docs

e logo de cara você cai
na instalação dele.

Lembrando que nós não estamos
consumindo nenhum desses métodos.

Nós estamos fazendo
a instalação através do CLI dele

para ter todas as dependências
do projeto.

Automaticamente,

nós vamos estartar o nosso projeto
lá dentro do nosso VS Code.

Então, a pastinha onde está o projeto,
eu vou clicar aqui no terminal.

Ele vai localizar a pasta,

então, percebam que você tem
exatamente a mesma pastinha aqui.

e aí eu vou dar o comando da npm.

"npm init -y" para criar
o nosso projetinho

e gerar automaticamente
o nosso arquivo de configuração.

Pronto.

Gerou o nosso arquivo
package.json

que nós vamos utilizar
dentro da aplicação.

Primeiro passo é estartar
o nosso projeto.

Então nesse arquivo você vai passar
todas as dependências,

você vai ter todas as relações
que são necessárias

para fazer o framework
ou até mesmo outras aplicações

funcionarem dentro do projeto.

Simplesmente o que a gente
vai fazer é instalar o tailwind

dentro da aplicação.

Então eu vou copiar o tailwind aqui,
essa linha de tailwind

e vou jogar essa linha
aqui dentro do nosso terminal.

Copiar essa linha aqui
e vou jogar essa linha

dentro do nosso terminal.

Ele vai começar a fazer
a instalação do tailwind

e aqui vocês vão perceber

que no nosso package.json,
que foi gerado anteriormente,

ele já colocou a dependência
do tailwind.

Isso significa que o seu tailwind
já está pronto para funcionar

dentro dessa pasta.

Então agora a gente vai fazer
as demais configurações

para criar o projeto
da forma correta.

Voltando no site, nós vamos copiar
a linha para iniciar o tailwind.

Quando ele iniciou o tailwind,

ele criou aqui o arquivo
de tailwind.config.js

que é toda a parte de formatação
e toda a parte de extensão

dos nossos conteúdos.

Voltando lá, ele pede para nós
configurarmos o endereço

dos nossos arquivos.

Então, aqui dentro
do tailwind.config.js

que foi gerado agora,
nós vamos mudar a linha de content.

Então, eu vou copiar
essa linha de content daqui

e vou alterar aqui
o nosso tailwind.config.js.

Então, simplesmente ele gerou
esse carinha em branco

e nós vamos passar o content
indicado lá pelo framework.

Nessa linha, você está indicando
que dentro do seu projeto

tem uma pasta chamada src
e todos os seus arquivos .html e .js

estarão dentro dessa pasta.

Então, tudo que for
consumir o tailwind,

ele vai procurar dentro dessa pasta,
inclusive nas suas subpastas.

É interessante, então,
que agora nós façamos a criação

desse src com as outras
pastas dependentes.

Então, posso fechar
o tailwind.config.js.

Posso fechar aqui
a minha pasta de imagens

e aqui eu vou clicar
na oficina, tá?

Vou clicar bem aqui

na pastinha da oficina
de tailwind

para marcar todo o projeto.

Aqui eu vou fazer a criação
da pasta src.

Essa pasta src vai receber todos
os meus arquivos da aplicação.

Quando eu quiser colocar
no ar a minha aplicação,

essa página, quando
eu quiser publicar,

eu vou pegar essa pasta
e jogar, ou seja,

fazer o deploy dela,
para que seja visualizado o conteúdo.

Agora, o que nós vamos fazer?

Nós vamos arrastar a pasta
de imagens para cá,

criar a pasta de css e criar
o nosso arquivo index.

Então, eu vou arrastar
a pasta de imagens para cá.

Tá, ele está dizendo que eu vou
mover e yes, quero mover.

Então, criou aqui dentro
dessa src, né?

Recebeu as imagens
que nós tínhamos,

percebeu que você tem
total acesso a ela,

sem problema algum, tá?

Dentro dessa src,
eu vou dar um clique direito nela.

Eu vou criar uma nova pasta,
que vai ser a minha pasta de styles,

ou melhor, a minha pasta de css.

Vamos criar uma pasta de css.

Os dois no mesmo nível,
a imagens e a css.

E também aqui, olha, no service,

vou dar um clique direito,
criar um novo arquivo,

que vai ser a minha index.html.

Então, percebam
a dependência deles, né?

Está tudo dentro dessa pastinha src,

que vai ser a nossa pastinha
com os nossos recursos.

Dentro da pasta css,
o que a gente precisa?

Ele está dizendo que a gente precisa
criar um arquivo que ele chama aqui

de input css, que vai ser
o nosso carinha

que vai fazer a chamada
de todas as diretivas do Tailwind,

ou seja, o Base,
o Components e o Utilities.

Então, vamos criar essa pasta.

Então, aqui dentro da pasta css,
new file, vou criar o meu styles.css,

que é o nome
que eu costumo utilizar.

O framework está dizendo aqui
que é input css,

não tem problema nenhum,

você pode atribuir o nome
que você quiser,

basta lembrar desse nome.

Nosso caso aqui, vou selecionar
esses três elementos,

ou copiar aqui também, tá?

Tanto faz.

Caso selecionei,
vou copiar, dar um Ctrl + C,

e vou jogar as marcações
dele aqui dentro.

O VS Code vai deixar algumas linhas
onduladas, mas isso é normal

porque ele não se dá bem
com esses importes, tá?

A importação dessas diretivas.

Vale ressaltar que esse arquivo
que nós estamos usando

será necessário para que a gente
consiga criar os nossos apply.

É, exatamente isso.

Eu bolei uma oficina onde nós vamos
usar vários applies, ou seja,

vamos ter várias classes,

justamente para não ter
toda aquela quantidade de código,

de classe do tailwind
dentro das tags.

Algumas outras formatações
serão aplicadas diretamente,

vocês já vão ver
como que ela vai ficar.

Então, meu arquivo de utilities,
de styles, montadinho.

Por enquanto, vamos deixar ele aqui.

E aí, o que vai acontecer?

Eu vou copiar essa linha
onde ele está indicando

o caminho do nosso tailwind, né?

A execução do nosso tailwind,

ou seja, o arquivo dentro
da pasta source,

o input aqui que ele chamou,
e o arquivo de saída.

Então, esse carinha aqui

vai ser o nosso arquivo
original de formatação.

A saída, ou seja, a formatação
que será usada na sua aplicação,

vem nesse carinha.

Então, eu vou copiar ele.

E aqui, nós vamos fazer o seguinte.

Dentro aqui do nosso Package.json,
vocês têm essa área de scripts, tá?

Ou seja, a gente cria essa área
para montar scripts que serão executados

durante a aplicação do projeto.

Então, eu vou selecionar
esse conteúdo aqui,

ou seja, abertura e fechamento
das aspas.

Vou selecionar todo esse conteúdo.

Vou apagar esse conteúdo e colar
o que eu trouxe lá do tailwind.

Esse script, ele está
com o nome de teste,

mas nós costumamos colocar
esse cara com o nome de Dev.

Então, vou chamar esse carinha,
esse script de Dev,

mas como eu já citei anteriormente,
ele pode receber qualquer nome.

Aqui, nós precisamos fazer
uma atualização das nossas pastas.

O que vai acontecer?

Vamos dar uma olhadinha
na estrutura.

Nós temos o "tailwind -y",

ou seja, eu estou indicando
o arquivo de entrada,

o arquivo de input.

Então, nós temos a pasta src,
como ele está dizendo aqui.

Só que aqui na nossa estrutura
nós temos um css, ou seja,

uma pasta css que não está definida,
que não está explícita aqui.

Então, eu preciso colocar src/css.

O nosso arquivo não é um input,
é o styles.css.

Lembrando que esse arquivo styles.css
é o arquivo que tem as diretivas.

Então, vejam, eu passei para cá,
exatamente para cá, essa estrutura,

ou seja, esse arquivo,
ele está na pasta de src,

dentro dela na pasta css,
o arquivo styles.css.

O "-o", ou seja, o arquivo de saída,
o arquivo que será buildado,

percebam que eu não tenho ele aqui,

esse "-o", vai indicar o caminho
do arquivo que eu quero que seja gerado.

Eu até vou deixar esse output,
mas dá uma olhada,

eu tenho a pasta css aqui.

Então, eu vou colocar css/output.css.

Nós temos aqui o "--watch", que vai
fazer com que ele fique olhando, né?

Assistindo toda a nossa estilização,

todo o nosso processo
de criação do arquivo.

Basicamente, está pronto.

O que eu preciso fazer?

Eu preciso rodar esse
script que foi criado.

Então, eu vou lá no terminal
e rodar esse script, ou seja,

o script que eu chamei de dev.

Nós vemos aqui, e aí a gente
vai dar um "npm run dev".

Ou seja, esse dev aqui
é exatamente esse carinha,

que é o nosso script
que será executado.

Vou pressionar o enter.

Ele vai dizer que ele está
aguardando, tá?

Nesse momento ele
não encontrou nenhuma classe,

não foi detectada nenhuma classe
dentro dos nossos arquivos, né.

A gente não tem arquivo ainda,
mas ele está aqui assistindo

tudo que nós vamos fazer.

Então, eu vou fechar o package,
vou aqui na minha index,

vou criar o meu arquivo
de estrutura.

Vocês vão perceber que ele vai
ficar rebuildando esse carinha aqui.

Vou aqui no meu html.language
e mudar para um pt-br,

por causa do idioma, do conteúdo.

Vou trocar o title.

Dentro desse title,
eu vou colocar Oficina Web.

E aqui no corpo da nossa página,
eu vou fazer o primeiro teste

para ver se o tailwind
está funcionando.

Vou colocar um h1 e vou colocar
assim: "Olá, mundo Tailwind".

A gente precisa lembrar

que nós temos um arquivo
de saída que foi gerado, né.

Esse é o arquivo que vai ter
a formatação do nosso CSS.

E perceba que nós temos
aqui algumas configurações

que já foram aplicadas
ao seu arquivo de saída.

O arquivo que vai formatar
a sua aplicação.

Então, vocês têm
algumas classes auxiliares,

vocês têm algumas variáveis
que estão dentro do seu projeto.

Ele também já tem um reset dele
para deixar o seu código mais enxuto.

Lembrando que ele vai buildar

gerando apenas as classes CSS
que você utilizar.

Então, eu preciso vincular esse output
no meu arquivo index.

De que forma?

Aqui na seção head.

Eu vou colocar aqui,
"Linkando a CSS".

Com ponto e vírgula.

Deixa eu só arrumar isso daqui
que ficou meio estranho.

"Linkando a CSS".

E aqui eu vou usar a tag de link.

Link.

E eu vou fazer referência a quem?

Ponto, barra,
ele já achou a pasta CSS.

Vou linkar com o meu
arquivo output.css.

Isso significa o quê?

Se eu colocar aqui uma class
e utilizar, por exemplo,

um bg-red-900, ok?

Então, ele buildou.

E provavelmente, quando eu for
lá na minha pagininha,

ou quando eu for abrir
esse carinha na minha pagininha,

abrir de que forma?

Você vai dar um clique direito.

Vai abrir aqui no Live Server.

Ou então, você pode
vir aqui embaixo.

Aqui nessa partezinha inferior,
mais precisamente.

E dá um clique nesse Go Live.

Tanto faz.

Ele vai trazer a sua página.

Veja que eu já tenho
esse fundo vermelho bem escuro.

Já é uma formatação dele.

Se você não aplicou
nenhuma formatação,

provavelmente o seu conteúdo
estará dessa forma.

Ele estará apenas com a letrinha
bem pequenininha,

posicionada na parte superior
esquerda do seu navegador.

Agora eu tenho certeza

que o meu tailwind
está funcionando corretamente

dentro da minha aplicação.

E agora basta a gente
criar a página.

Para deixar uma melhor experiência,
nós vamos consumir algumas coisas.

Então, eu separei uma fonte
que será utilizada dentro do projeto,

uma fonte do Google Fonts.

E nós vamos consumir alguns
ícones aqui dentro da aplicação

de uma biblioteca
muito legal chamada Box Icons.

Vamos dar uma olhada
nesses caras e preparar

para ele receber esses elementos.

Eu já posso até esconder
minha pasta, meu explorer

e baixar um pouquinho o terminal.

É importante que esse
terminal esteja aberto.

Eu posso tirar o meu "Olá, mundo".

E aqui eu vou começar a pegar
as minhas referências.

Então, a primeira coisa
que eu quero é o meu Google Fonts.

Então, eu vou colocar aqui
uma chamada do Google Fonts.

Vou aqui na minha aplicação.

Eu já deixei o browser
do Google Fonts aberto.

Então, aqui nós temos
as 1.807 famílias de fontes

que você vai escolher.

Eu peguei a fonte Montserrat.

Essa fonte.

Então, você tem os styles dela.

Eu vou pegar com todos os styles.

Vou dar um clique em Get Font.

Vou aqui na parte para colocar
essa fonte no meu código.

E aqui, você tem a parte onde você
vai colocar no head do seu HTML

a chamada do Google Fonts.

Vou copiar esse código.

E aí, eu vou colar esse código aqui.

Então, vou dar um Ctrl + V.

Seu código, provavelmente,
ficou um pouquinho bagunçado,

como o meu ficou, né?

Não ficou organizado.

Então, eu vou dar um clique direito.

Vou formatar o documento.

Ele Fez a identação
do nosso código, tá?

Então, clique direito,
formatar o documento.

Ou você podia usar o atalho
Shift + Alt + F,

que vai fazer a mesma formatação.

Então, aqui eu estou
com a fonte Montserrat habilitada.

Como nós já sabemos, o tailwind,
ele tem três padrões de fonte, né?

Então, nesse caso, eu estou
falando para ele:

"Olha, use uma nova fonte,
use essa fonte no projeto".

Então, o que a gente vai fazer?

A gente vai estender essa fonte

lá no nosso arquivinho
de configuração do tailwind.

Então, o nosso código
vai ficar mais ou menos assim.

Vamos abrir aqui
o nosso tailwind.config.js.

Aqui na parte do extend,
nós vamos colocar o seguinte.

Então, aqui no extend, eu vou colar
esse código do Font Family.

Então, o que eu estou dizendo
para ele?

Eu estou dizendo que agora a fonte
Sans, que é a fonte padrão,

vai utilizar o padrão Montserrat,

que é a fonte que eu estou trazendo
aqui do Google Fonts.

Deixa eu dar uma quebra de linha,
aqui um View, Word Wrap.

Assim, vocês conseguem ver melhor

toda a linha que eu trouxe
lá do Google Fonts.

Então, aqui você tem
essa fonte Montserrat,

que foi atribuída ao nosso elemento.

Isso significa o quê?

Se você colocar algum conteúdo aqui
no body, no H1, usando Montserrat,

bom, e eu colocar uma class aqui
para ele, de um text, por exemplo, xl...

4xl, 8xl, para deixar
um pouquinho maior.

O que vai acontecer agora, quando
eu volto na minha página,

ele está usando a Montserrat
um tamanho grande.

Então, é essa fonte
que virou o padrão.

Virou o padrão por quê?

Virou o padrão porque eu estou
substituindo a sans dele,

com o fallback de fontes
que ele traz, por essa Montserrat.

Fonte instalada, e vocês viram
que é bem facinho.

Eu vou consumir lá no Google Fonts,

pegar o link e jogar aqui
dentro do meu extend.

O quê a gente vai fazer?

A gente vai consumir
alguns ícones também.

Esses ícones eu vou fazer via CDN,
para mostrar para vocês

que também podemos usar CDN,

mesmo estando
usando o nosso tailwind.

Vou fechar um pouquinho
o meu tailwind.config.js.

Vou lá no meu navegador

e eu vou consumir os ícones
dessa biblioteca, chamada Boxicons,

que é uma biblioteca bem legal.

Ele tem uns traços bonitos
dos nossos ícones.

E ela é bem simples
de ser utilizada, de ser colocada.

Então, o quê a gente vai fazer?

Aqui no link do Boxicons,
boxicons.com,

eu vou aqui na parte de uso dela.

Ele vai explicar para mim
como que ele pode instalar.

Você pode fazer a instalação,
inclusive, via npm e consumir por lá.

Mas nós temos aqui
a configuração como uma fonte, né?

Porque vai ficar
mais fácil essa fonte.

Então, esse link aqui,
nós simplesmente vamos selecionar.

Bom, então eu selecionei
essa partezinha do início dele,

do link, até o fechamento,
lá no final.

E esse carinha, eu vou jogar aonde?

Eu vou jogar dentro do meu Head, tá?

Para ser utilizado.

Eu costumo fazer o seguinte.

Eu costumo dar prioridade
ao carregamento do Google Fonts.

Se bem que ele já está
usando esse preconnect,

então ele vai fazer
um carregamento mais rápido.

Por isso que é interessante usar
sempre a função de link, né?

Para você trazer fonte do Google.

E aqui eu vou colocar
o meu Boxicons.

Só um comentáriozinho,
para ficar bem claro para você

o que a gente está fazendo.

E aqui eu colo a minha referência.

Beleza?

Se você quiser fazer um teste
para ver se está funcionando,

e eu garanto que já está,
o que a gente pode fazer?

A gente pode vir aqui nele, tá?

Por exemplo, pegar esse castle aqui.

Quero pegá-lo no formato de fonte.

Você não precisa se preocupar
com essas configurações.

que essas configurações de cor,
de tamanho.

Como é uma fonte, nós vamos
fazer isso tudo via tailwind.

Vou clicar nesse carinha.

E só para testar, vou jogar aqui, olha.

No lugar do meu Montserrat,
que eu sei que já está funcionando.

Vou colocar o meu ícone, tá?

Mas deixa eu tirar do H1,
que é mais bonitinho, né?

Aqui sim eu consigo colocar
um text-8xl para fonte.

No caso, para o meu ícone, né?

Que está sendo tratado
como uma fonte.

Vamos lá na página, tá?

O nosso castelinho
já está funcionando.

Então, veja, ele já está aparecendo.

Seu Boxicons está funcionando.

Caso você não coloque essa linha,

obviamente ele não tem
como buscar essa referência

e provavelmente
o castelinho desaparecerá.

Então, vamos voltar com a referência.

e eu vou tirar esse carinha daqui
para começar o conteúdo da página.

Então, eu já tenho as referências
dos elementos,

das aplicações que eu vou
utilizar além do Tailwind.

O que a gente vai fazer?

A gente vai dar uma olhada no layout
e vou explicar para vocês

como que eu imaginei
a criação desse layout.

Vai receber aqui um outro container,

onde eu vou ter o meu
menu de navegação,

vou ter essa pequena logo
que eu estou tirando lá do box icons

e aqui esse menu
com essas três opções.

Esses caras estarão separados, né,
porque eu vou utilizar

o Flexbox do Tailwind para fazer
o posicionamento deles.

Aí nós teremos aqui embaixo
essa oficina web

que também será
um outro container

e depois o Flex vai posicionar
os elementos aqui para nós.

Vale ressaltar e você
deve ter percebido

que nós temos uma imagem
de fundo também.

Essa imagem de fundo
nós vamos fazer a referência dela

lá no extend do nosso
arquivo de configuração.

Então, vamos olhar aqui
o nosso terminal de config.

Aqui no extend eu vou usar,
vou chamar essa imagem,

que é a imagem banner hero.

Eu quero que você perceba
também o seguinte,

aqui ela está um pouquinho
mais clara e aqui ela está

um pouquinho mais escura,

porque eu coloquei
um gradiente no código

para que ele fique
um pouquinho mais escuro,

facilitando a leitura do conteúdo.

Essa imagem banner hero, então,
será inserida aqui no Tailwind config.

Para isso, eu fiz o seguinte código.

Deixa eu só configurar
ele para ficar bonitinho e pronto.

Então, o que acontece?

Eu coloquei aqui dentro do extend
a minha propriedade de background image,

onde eu tenho uma classe
chamada hero.

Essa classe, na realidade,

o que vai acontecer?

Ela vai receber, essa imagem,
vai receber o linear gradiente

que eu montei, que deixou
ele bem escurinho, ou seja,

esse carinha aqui é o responsável
por deixar a imagem

um pouco mais escura.

Então, é um gradiente
de uma tonalidade de azul

com quase opacidade total,
ela é totalmente opaca, basicamente,

ponto Nobre de opacidade,
para uma opacidade menor,

ou seja, ponto 6.

Então, ela está um pouquinho
mais transparente.

Vale ressaltar que eu montei
esse linear só porque eu achei

que a imagem estava muito clara

e, provavelmente, ela iria complicar
a leitura do nosso conteúdo.

As cores que eu estou usando,
você pode utilizar,

você pode também alterar.

Inclusive, você pode
mexer nessa opacidade,

deixando ela mais clara,
ou se você preferir,

ainda mais escura.

Ao lado dele, nós temos uma URL
que está trazendo exatamente

a minha imagem banner hero,
que é esse carinha aqui.

Então, ela vai ficar mais escura,
graças a essa parte do código,

e ela vai ser inserida,
ela será inserida,

graças a essa parte do código.

Posso fechar o meu TendConfig,

posso fechar o meu banner hero,

e agora eu vou começar
a criação desse elemento aqui.

Então, dentro do nosso conteúdo,
eu vou colocar aqui um comentário,

criando o header e o hero da página.

Eu não quero que esse comentário
apareça, vou dar um CTRL,

ponto e vírgula para comentar,
e para ficar bem claro para você

aonde ele começa e onde ele termina,
eu vou duplicar esse componente,

esse comentário, na realidade,
CTRL, ponto e vírgula,

vou abrir um pouquinho de espaço,
e aqui, eu vou até fazer o seguinte,

vou deixar esse comentário maior, tá?

Então, vou clicar aqui,
vou segurar a tecla alt,

vou clicar aqui,
vou segurar a tecla Alt,

clicar aqui, segurar a tecla Alt,