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 imports, 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 Boxicons.

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
num 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 que 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 que 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 Boxicons

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

Esses caras estarão separados
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.js.

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,

".9" de opacidade,
para uma opacidade menor,

ou seja, ".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 tailwind.config.js,
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 + ;" 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 + ;",

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,
clicar aqui,

e vou aumentar esse comentário
para ocupar todo o espaço.

Vou colocar aqui:
"fim header e hero da página".

Se você tiver um problema de toque
como eu tenho, você pode fazer isso,

simplesmente para ele ficar igual.

E aqui vem todo o código
que nós vamos desenvolver.

Então, vou criar
um elemento article,

e esse elemento article
terá uma classe.

Bom, agora começa o seguinte,
começa toda a hipopeia

de você criar um componente
e fazer a estilização com a CSS

do tailwind e com as classes
do tailwind.

Então, nesse começo,

para não ficar aquele
acúmulo de classes,

eu separei por apply.

Então, como eu tenho esse article
com, provavelmente,

uma classe com algum valor,
que eu vou aplicar para ela,

nesse caso, eu vou chamar
de header ou hero,

o que eu vou fazer?

Eu vou criar um apply para ele.

Então, vamos dar uma olhadinha
como que ele vai ficar.

Vou colocar aqui a class Hero.

Essa class Hero será criada
dentro do nosso apply.

Dentro dele, o que nós temos?

Nós temos agora...

Então, criamos esse componente
e nós temos aqui esse header.

Ou seja, nós temos esse cabeçalho.

Esse cabeçalho tem
uma imagem de ícone

e aqui ele tem exatamente
as nossas opções do menu.

Vamos voltar lá e montar
esse código.

Então, nosso código ficará assim.

Deixa eu dar um Shift + Alt + F
para identar.

Olha como facilita
para caramba a visualização

e você tem um código
sempre organizado.

Então, aqui dentro do nosso article,
nós temos essa class Hero.

Essa class Hero será um apply.

Nós criamos o header,
ou seja, uma tag semântica, né?

Que indica um cabeçalho.

Nesse caso, o cabeçalho
aqui do nosso hero,

que também terá uma class
desenvolvida por apply.

Aqui, eu já tenho o ícone.

Então, esse carinha que está
aparecendo aqui,

ele representa o ícone
que nós vamos utilizar,

que eu peguei no Boxicons.

Então, esse cara é exatamente
esse quadradinho.

Percebam que essas
duas classes dele, Box e Box Package,

ou seja, esses dois carinhas,

eles pertencem
à nossa biblioteca de ícones.

Só que eu criei uma classe,
também por apply, que é a icone-logo.

Abaixo dele, nós temos
um menu de navegação, né?

Nós temos um elemento de navegação.

Nós temos a tag ul.

Essa tag eu já coloquei
o flex e o gap em três.

Ou seja, o espaçamento dele em três,
defini as nossas "li's".

Cada uma das "li's"
com as opções de Code,

Developers e Job.

Cada um deles com a classe nav.

Essa classe nav,
ela será desenvolvida via apply.

Se a gente olhar ele na página,
nós vamos ter uma experiência

mais ou menos assim.

Olha, exatamente dessa forma.

Não se parece em nada
com aquela página.

A única coisa que ele tem aqui
é exatamente o nosso menu de navegação

e esse ícone pequeno.

Nós não temos nem a imagem de fundo,
nem o banner de fundo.

Então, na realidade,

a gente tem toda a estrutura
dos componentes, dos elementos HTML.

Basta, agora, gerar os applies
com as classes do Tailwind.

Então, nós vamos lá no nosso arquivo
de estilização inicial,

o arquivo de entrada,

onde nós colocamos todas as diretivas
através daquele arroba,

tailwind e os componentes.

E ali nós criaremos
os nossos applies.

Cada apply representa uma classe
que está dentro do nosso elemento HTML.

Então, agora, nós vamos abrir
o nosso arquivo de CSS, o nosso styles.CSS.

E aqui eu vou colocar a diretiva.

Então, nós temos
o nosso @layer utilities.

Deixa eu fechar essas chaves.

E aqui a gente tem a primeira
formatação dele.

Então, o que nós temos?

Dentro do hero...

Quem que é o hero, né?

O hero é todo esse meu article.

Então, dentro dele,
nós criamos uma fonte,

uma largura dele, ocupando 100%
da altura da tela, né?

O 100VH.

Nós colocamos um w-full
para ocupar 100%.

Nós colocamos um flex, flex_coluna.

Chamamos o nosso bg-hero,
que é a nossa imagem de fundo.

Definimos para ela não repetir
e ela ter o cover, né?

Ou seja, ela ocupar todo o espaço.

Vai ficar mais fácil se você ativar
aqui, por exemplo,

a sua extensão do tailwind.

Então, Tailwind CSS IntelliSense.

Eu vou desinstalar.

Aquela parece que não
está funcionando.

Vou instalar novamente.

Beleza.

Provavelmente agora,

quando você passar
o ponteiro do mouse,

você tem exatamente a descrição
de tudo que eu falei para você.

Então, agora, com essa extensão,
essa extensão instalada,

vai ficar mais fácil
de você visualizar as classes,

o que representa
cada uma dessas formatações.

Se a gente der uma olhadinha
aqui na nossa índex,

nós temos apenas a classe Hero.

Nós temos outros elementos aqui,
como o header,

que tem uma classe menu.

A gente tem o I com a classe A
e com o logo.

E nós temos aqui as navs
com as suas respectivas diretivas

lá para o Apply.

Se nós voltarmos na nossa página,
vocês já vão perceber

que a nossa página
já está ocupando toda a tela, tá?

O conteúdo está aqui bem
pequenininho ainda, certo?

A gente não tem visualização dele,

mas a gente já tem
o nosso componente.

Percebam que esse cara,
ele já está totalmente responsivo, né?

Também, vale ressaltar

que por causa dessa formatação
de largura em 100% e essa com 100VH,

a nossa imagem de fundo
já está ocupando toda a tela.

Outra coisa, aqui no bg-hero,
é exatamente esse carinha

que traz a imagem de fundo

que nós estendemos aqui
no tailwind.config.js, tá?

Então, foi dentro desse Hero
que nós aplicamos o BG,

tracinho e colocamos
a palavrinha hero

para ele reconhecer
a nossa imagem de fundo.

Vamos atualizar e está aqui ela.

O que nós precisamos?

Nós precisamos montar
a outra parte dele, né?

Os outros itens que estão dentro
aqui do header menu,

dentro do icone-logo
e dentro aqui da nossa classe nav.

Então, vamos pegar esse código
e colar aqui.

Então, abaixo do Hero
eu vou colar esses applies.

Shift + Alt + F para arrumar.

Então, meu elemento de menu.

Meu elemento de menu representa
todo o header da nossa página.

Então, esse elemento,

ele está configurado
para ter uma largura de 100%,

uma altura em 64 pixels,
então, 64 pixels de altura do menu.

Nós deixamos ele flex, ou seja,
o container ficou flexível.

Colocamos justify-between
para fazer com que a primeira opção,

ou seja, o nosso logo
fique posicionado à esquerda

e as opções do menu
fiquem posicionadas à direita.

Colocamos um items-center
para ficar centralizado verticalmente.

Colocamos uma margem em 20 pixels,

um padding esquerdo
e direito em 40 pixels.

E aqui, nas telas menores, né,
nas telas que são lg,

eu coloquei um pixel de 20,
um padding x de 20.

Ou seja, eu aumentei um pouquinho
a distância desse padding.

Abaixo do icone-logo, nós temos
os nossos ícones, ou seja,

esse querido aqui,

que é o nosso ícone
buscado no Boxicons.

Nós colocamos ele
com um text-5xl.

Coloquei um slate de 100, ou seja,
vai ficar com uma corzinha branca.

E aqui eu coloquei
uma animação do tailwind.

O tailwind já tem algumas
animações prontas, né,

as animações que são
feitas com keyframes.

E aí, você chama
a propriedade animation

e executa essa animação
que você deseja.

No caso, o tailwind
já tem esse carinha pronto.

Lá na documentação,

basta você dar uma olhada
na parte de animações e transições.

Abaixo dele nós temos a nav.

A nav representa cada um dos nossos
elementos de navegação.

E aí nessa nav eu coloquei
um posicionamento relativo.

Uma margem esquerda em 20 pixels.

A fonte, o peso da fonte em 600.

Uma altura, um espaçamento...

perdão, perdão, voltando...

Um espaçamento
entre as letras de 4 pixels.

E a cor branca,
esse slate é um cinza,

mas com 100 ele fica
uma tonalidade branca.

Então, essas três classes
em conjunto com a classe hero

devem formar isso
daqui no nosso conteúdo.

Então, percebam que o nosso
menu já está montado.

Percebam a animação
que já está acontecendo.

Ah, se você vir aqui dentro
da documentação do tailwind

e colocar aqui animation,
ele já vai te dar...

eu tirei essa animação daqui, olha.

Você tem animate-spin, ping
e você tem essa animação pulse.

Então, eu simplesmente
copiei essa classe

e ele já me deu
essa animação montada.

Por isso que ele fica
exatamente aparecendo

e ficando um pouquinho
mais apagadinho

com um determinado prazo,
um determinado tempo.

Para esse carinha aqui,
para o código,

para o Developers e para o Jobs,

eu achei que ficou
muito simples essa formatação,

esse posicionamento.

Então, eu criei um apply
para eles também.

Então, para as nossas opções de menu,
eu preparei essa formatação.

Shift + Alt + F para arrumar.

Então, eu defini o pseudo-elemento
after, que é um conteúdo

que vai ser inserido
dinamicamente via CSS.

Então, criei um apply para ele
e coloquei o content, né,

que é obrigatório como vazio.

Coloquei a posição absoluta,
ou seja, para ser em relação a ele,

já que a nav tem a posição relativa.

Busquei aqui a cor
desse elemento, branca.

Dei uma altura para ele
de 4 pixels.

Coloquei uma largura de 12 pixels.

Coloquei um left,
o posicionamento dele em zero.

Coloquei um posicionamento
negativo, inferior em -0.5rem

ou 8 pixels, para ele não
ficar tão grudado no link.

Arredondamento da linha.

E o duration, ou seja, o tempo
de transição em 500,

ou seja, em meio segundo.

Quando você passar o ponteiro
do mouse sobre ele,

o que vai acontecer?

Esse apply, ele está executando
exatamente isso.

Ele está montando esse tracinho
que vocês têm embaixo de cada um deles.

Então, esse tracinho veio daqui,
dessa formatação,

dessa pseudo-classe.

Quando passar o ponteiro
do mouse sobre ele,

ele vai deixar de ter aqui
uma largura de 12 pixels.

Ele vai ocupar exatamente
todo o espaço do conteúdo.

Isso significa que passando
o ponteiro do mouse sobre ele,

ou seja, o hover, ele vai aumentar
a largura dele de 12,

para ocupar 100%
da opção do menu.

Isso é muito comum em vários
menus de navegação.

Inclusive, você encontra
esse efeito no menu da FIAP.

Sempre as opções do link,

quando você passa o ponteiro
do mouse no menu principal,

elas vão completar com um tracinho
basicamente igual a esse.

Vamos construir a parte de baixo,

a nossa parte onde
nós temos o hero, na verdade.

Bom, então aqui,
para ficar mais específico,

mais claro para você,
aqui vai ser o meu menu,

vai ser a minha parte de logo e menu.

Vou comentar para não aparecer.

Então, Shift + Alt + F
para identar esse código.

Vou duplicar,
Shift + Alt + seta para baixo.

Vou usar o Alt, setinha para baixo,

para descer até o fechamento
do header.

E aqui eu vou colocar
"Fim logo e menu".

Automaticamente,
eu vou criar a parte do hero, tá?

Então, hero, Ctrl,
ponto e vírgula, comentou,

Shift, Alt, seta para baixo,
duplicou.

E aqui eu vou colocar
o "Fim hero".

Não vou deixar esse
cara desse jeito.

Vamos arrumar esse carinha
para ele ficar igualzinho.

Pronto, beleza.

Vou colar o código
que eu fiz do Hero.

Então, o que nós temos nesse hero?

Nós temos um hero, uma Class Hero,
que também é um Apply,

dentro de um elemento de Section.

um H2 com text-5xl, ou seja,
o tamanho da fonte, 48 pixels.

O P com uma largura de 50%
do tamanho do elemento

aonde ele está posicionado,
que no caso é o nosso hero-section.

E aí, vale ressaltar que ele vai
ocupar 50% dos 100% desse elemento.

E aqui, o nosso leading,
que é a altura da linha em 28 pixels.

Abaixo, eu tenho um elemento A
com a Class "btn" para esse link.

Vamos ver como que ele ficou
na página e ele deve estar por aqui,

todo apagadinho,

porque faltam as formatações
básicas para posicionamento.

Perceba que o text-5xl,
ele já aplicou,

esse tamanho aqui ele já aplicou,
e a classe BTN

a gente não tem ainda
porque é um Apply.

Então, vamos lá colocar esse Apply.

Shift + Alt + F para ele arrumar.

O hero section tem
uma largura de 100%.

Ele tem uma altura de 100vh.

Colocamos o Display Flex
para alinhar os elementos.

Flex-Col para posicionar
um abaixo do outro.

text-slate-100 vai ser a nossa cor,
que vai ficar na corzinha branca.

Alinhamento centralizado, tanto
na horizontal quanto na vertical.

Espaçamento entre
os elementos em 32 pixels.

E o alinhamento
do texto centralizado.

Se a gente for dar uma olhadinha
agora na nossa página,

nossa oficina web está dessa forma.

Basta a gente usar quem?

Formatar quem?

Formatar o nosso Access Now,
ou seja, o nosso elemento de botão.

Mas o restante ele já está
deixando formatado no padrão,

que nós temos aqui
no nosso elemento de desktop.

Então aqui a gente
tem esse elemento.

Vamos fazer a formatação dele.

Nós temos a class "btn".

Então eu vou criar uma diretiva
aqui para ele de ".btn".

Iniciando com o nosso apply.

Para esse cara,
eu vou colocar uma borda.

Então vamos colocar
aqui as bordas.

border-2, por exemplo,

que ela vai me dar
uma borda de 2 pixels.

Então provavelmente
ele já está colocando aqui

uma bordinha de 2 pixels para nós.

Vamos colocar aqui um padding,
provavelmente um padding x,

tanto para o eixo para a esquerda
e para a direita.

Vou colocar um padding x de 2,

que vai dar mais ou menos
uns 8 pixels.

Vou colocar também.

Então já espaçou um pouquinho.

Já espaçou um pouquinho
aqui na lateral.

Dá até para espaçar
um pouquinho mais.

px-4.

Tá bom.

Já espaçou um pouquinho mais.

Vou espaçar ele também
na parte superior.

Então padding Y
vou colocar 4 também.

Sempre juntinho, tá?

Deixa ele buildar aqui para a gente.

Rebuildando.

Beleza.

Então já colocou.

Eu acho que cabe até
um pouquinho mais na lateral.

Então posso colocar aqui
um 8, 32 pixels.

Ficou melhor ainda.

E aqui eu posso
diminuir um pouquinho.

Deixar ele um pouquinho menor.

Coloquei ele com py-2.

Já melhorou.

Vou colocar aqui um rounded.

Então nós temos aqui
a opção de rounded-sm.

rounded-md.

Vou usar esse md.

Já fez o arredondamento
dele aqui.

Toma cuidado para não exagerar, tá?

O rounded-md deu 6 pixels.

Se você quiser aumentar
um pouquinho mais,

você pode colocar um lg,
que vai dar 8.

Ou um xl que deve dar 12 pixels.

Ficar mais arredondadinho.

Ok.

E aqui a gente vai ter
também um hover.

Então, hover dois pontos.

Quando passar o ponteiro
do mouse sobre o elemento,

eu quero colocar um BG.

No caso aqui, eu vou usar
uma tonalidade de azul.

Um Sky, por exemplo, 800.

Bom.

Então, passou o ponteiro do mouse.

O botãozinho ficou no sky-800.

Pronto.

Ficou melhorzinho de você ver agora.

Só que eu entendo que esse cara
podia ter um duration de 500.

Ou seja, ele vai levar 5
milésimos de segundo.

Meio segundo,
para fazer esta transição.

Então, ele vai ficar mais suave
aqui para a gente.

Se vocês observarem,
nosso querido já está responsivo.

Bonitinho aqui para que a gente
consiga utilizar, inclusive,

em outros dispositivos menores.

Feito o hero, o que a gente
vai montar?

Nós vamos montar 3 cardzinhos.

Esses cardzinhos,
eles também estão bem simples

e eu também fiz apply
para todos eles.

Vamos dar uma olhada na telinha
e ver como que eles devem ficar.

Então, depois de montar essa carinha,
nós temos esses 3 carinhas aqui.

Nós temos esses 3 cards.

Esse cara, eu entendo
que ele deve ser um elemento

que vai receber os outros 3 cards.

Cada um desses cards vai
ter a mesma configuração.

Uma imagem, vai ter um título,
uma pequena publicação,

vai ter aqui um título deles, né?

Me basei nas diretivas que nós estamos
importando do tailwind

e aqui um pequeno texto.

Então, é esse carinha que nós vamos
montar, lembrando que as imagens

já estão disponíveis
dentro da nossa pasta de imagens

e você vai receber o endereço
do repositório com esse código.

Beleza?

Vamos para essa montagem.

Então, finalzinho aqui
do nosso header.

Vamos construir quem?

Vamos construir os nossos cards.

Então, vou colocar aqui
área de cards.

Contra o ponto e vírgula.

Vou duplicar com Shift + Alt,
seta para baixo.

Fim, área de cards.

Vou deixar esse cara
um pouquinho melhor da gente ver.

E vou aumentar também, né?

Um clique, seguro o Alt,
clico nos demais.

Vou aumentar um pouquinho.

Pressiono o enter.

E aqui nós vamos
para a nossa área de cards.

Como os cards, eles parecem ser
o conteúdo principal da aplicação,

então o que eu vou fazer?

Eu vou colocar uma main com uma
classe chamada grid-cards.

Então, todos os nossos cards
ficarão dentro desse elemento main,

esse elemento semântico do HTML.

E aí vem os nossos cards.

Então, os cards eu montei
dessa forma.

Vou passar os três cards para vocês.

Então, dá uma olhada.

Todos eles têm a mesma estrutura.

Então, a minha ideia aqui
foi bem simples.

Eu encapsulei os cards, né?

Dentro de uma section.

Então, cada um deles
tem uma section.

Bonitinha, organizadinha aqui,
para que eles sejam clicáveis.

Então, todo o conteúdo das sections,
todo esse conteúdo,

ele está dentro de uma tag A.

E aqui você pode direcionar,
se você for usar esse card

para alguma aplicação sua,
ou para alguma entrega do curso,

você pode direcionar
o link desse cardzinho

para uma nova página
ou uma nova sessão.

Dentro dela, o que a gente tem?

A gente tem as imagens.

Vale ressaltar que nós temos
aqui a imagem card1.

Um Alt pensando na acessibilidade.

E eu já deixei essa imagem
com a classe de rounded.

Ou seja, tem um arredondamento
das bordas em 8px.

Tem um apply aqui
chamado card-title.

Tem um apply chamado card-date.

Tem um apply chamado
card-title novamente.

Ou seja, estou aqui replicando
a mesma classe, reutilizando.

Tenho a card-text,
que é o conteúdo do meu card.

Então, os três cards são iguais.

A única diferença são as classes
que vocês têm aqui formadas pelo apply.

Vamos usar essas classes agora.

Então, aqui vou colar os nossos cards
logo depois do nosso "btn".

Tenta fazer sempre isso, tá?

Sempre traz esse elemento
na ordem dos applies.

Vai ficar muito mais fácil
para você dar manutenção.

E aí eu vou chegar aqui
e vou colar os nossos applies.

Shift + Alt + F para arrumar o código.

E aqui a gente tem a classe card, né?

Que são cada um dos cardezinhos.

O apply do card tem
uma parte responsiva.

Aonde, quando ele estiver
em uma tela que tenha no mínimo 768,

nós vamos ter um display flex,
o alinhamento deles em colunas,

shadow-slate...

Isso é uma sombra
que vai ficar em volta do card.

Shadow-lg é a proporção
dessa sombra.

Então, no caso aqui vai dar
algo em torno de dois pixels.

Nós temos um padding de 1RM,
ou seja, 16 pixels.

Então, padding geral.

Nós temos um padding Y.

Ou seja, apenas para o eixo
superior e inferior.

O eixo Y, né?

Em 24 pixels.

Rounded com 6px.

Espaçamento entre
os elementos do card

com um gap de 2 de 8 pixels.

Um hover, que quando passar
o ponteiro do mouse sobre o card,

ele vai diminuir.

Está em 10%.

Ele vai diminuir
a altura e a largura.

Lembrando que o scale
é proporcional.

E a duração desse
efeito de meio segundo.

Abaixo nós temos o card-title,
apenas com o tamanho da fonte,

peso da fonte e a margem.

Nós temos o card-date,
também com o peso da fonte,

cor do texto,
nesse cinzinho mais claro.

E aqui, esse text-xs seria
a nossa fonte em 12px,

uma fonte menor.

Nosso card-text.

Tem o nosso card,

o conteúdo de texto dele.
na cor grey-600,

que é uma tonalidade de cinza.

Então, provavelmente
nós já tenhamos os nossos cards.

Bom, eles estão formatados.

Mas eles não estão posicionados
um ao lado do outro.

Por que?

Vamos dar uma olhada
no nosso código.

Aqui.

Ah, eu tenho a classe grid-cards.

E eu não fiz a chamada
da classe grid-cards.

Então, do apply de grid-cards.

Eu vou colocar aqui,
Shift + Alt + F.

Pronto.

Faltou o essencial, né?

Deixar ele como flex.

Então, a gente tem aqui
o posicionamento dele em 100%.

Tamanho máximo dele em 1280.

Ou seja, o container vai
ter no máximo 1280 pixels.

Nós temos mx-auto, né?

Para deixar ele alinhado
tanto à esquerda como à direita.

Centralizado pelo eixo horizontal,
na horizontal.

Uma margem superior
e inferior em 40.

Um maravilhoso flex
para fazer o posicionamento.

Flex-Wrap.

Caso não caiba na página,
ele quebra.

E o Justify-Center para fazer
um alinhamento nele vertical.

Provavelmente agora, sim,
os nossos cards estão na posição correta.

Às vezes a gente precisa
prestar um pouco mais de atenção

quando for colocar as classes, né?

Porque vocês viram,

eu simplesmente esqueci
daquela classe lá de definição,

que é justamente a classe
que está posicionando os cards

para que eles fiquem
um ao lado do outro.

Próximo passo agora
é só finalizar com o rodapé.

Esse rodapé está bem simples.

Vai ser um container recebendo
um texto e recebendo três ícones

lá do Boxicons.

O rodapé, ele tem essa barra,
escrito "Oficina Web",

e os nossos ícones aqui
com o padrão de cor

e com o hoverzinho.

Então, abaixo aqui
da nossa área de cards,

nós vamos criar
nossa área de rodapé.

Vou colocar aqui o meu rodapé,
Ctrl + ponto e vírgula para começar,

fazer o comentário,
e aqui eu vou colocar o "fim rodapé".

Vou clicar com Alt,
deixar o espaçamento aqui,

e vou abrir meu conteúdo.

Nós temos o código do rodapé,
que é exatamente isso.

Uma classe footer, que é um apply.

Um h3 com "Oficina Web".

Aqui, para não usar o apply,
porque é bem pequeno,

são apenas duas classes,

eu coloquei a classe
de text-indigo-700 para a cor dele.

Coloquei ele como flex,

e um gap 4 para o espaçamento
dos nossos ícones.

Os nossos ícones
são a chamada lá do Boxicons.

Nós temos apenas para ele,
que eles começam com uma cor,

que vai ser essa cor indigo-700.

Quando passar o ponteiro
do mouse sobre eles,

eles mudam aqui
para essa cor branca,

para esse text-white.

Então, visualmente,
nós já temos isso,

os nossos ícones aqui embaixo.

Basta o quê?

Basta a formatação
do apply para o rodapé.

Então, eu preciso dessa classe
footer, que é o meu apply.

Então, aqui abaixo,
como último apply,

a gente tem o footer,

que está definido com uma cor
de fundo índigo padrão do tailwind.

A largura dele posicionado em 100%.

A altura em 96 pixels.

Um padding em esquerdo e direito em 96
para ter um espaçamento maior.

O texto dele totalmente branco,
o tamanho da fonte em 24 pixels.

Flex para fazer o alinhamento,
centralizado na horizontal e na vertical.

Quando a gente executa essa página,
agora nós temos exatamente isso.

A nossa oficina web
e os nossos ícones mudando de cor

quando a gente altera,

quando a gente passa
o conteúdo do mouse.

Se você chegar aqui
e mexer na telinha,

o seu conteúdo já está responsivo.

Ou seja, a sua aplicação já está
respondendo ao tamanho da sua tela.

Pronto.

A gente conseguiu
montar a pagininha.

Nós utilizamos várias formatações
existentes dentro do framework,

vários recursos dele,
como por exemplo no final o apply.

A estilização com flex,
a estilização dos nossos textos,

imagens de fundo.

Enfim, deu para ter um overview
bem legal sobre o framework.

O tailwind é poderosíssimo
e ele vai te ajudar muito

no segmento da sua profissão.

Vai te ajudar muito no desenvolvimento
front e na criação das páginas.

Então o que você tem que fazer?

Você tem que começar a utilizar cada
vez mais esse framework

para que esses recursos,
essas classes utilitárias

sejam totalmente costumeiras
no seu dia a dia.