React com TailwindCSS: estilizando componentes

Aquecendo os motores - Apresentação

Olá e boas-vindas ao Curso de React com Tailwind! Eu sou Vinícius Cardozo e serei seu instrutor. Vamos juntos aprender mais e desvendar todos os recursos dessa ferramenta.

Para isso, construiremos a aplicação Alura Newsletter que possui como finalidade apresentar os posts da Alura em formato de página Web. Ela colhe os dados de nome e de e-mail da pessoa usuária para em seguida apresentar esses posts. Através dela vamos aprender as ferramentas do Tailwind e suas bases, quais problemas esse framework é capaz de resolver e entenderemos o pensamento que guiou as pessoas criadoras em seu desenvolvimento. Faremos também a integração do Tailwind junto ao ecossistema React.

Quais os pré-requisitos para realizar este curso? É necessário ter um domínio mínimo de React.

Neste curso vamos aprender a:

• construir a aplicação do zero utilizando a ferramenta Vite;
• instalar o Tailwind;
• criar nossos primeiros componentes;
• trabalhar com ícones, imagens e posicionamento de elementos;
• construir um layout proporcional à telas pequenas e grandes ;
• responsividade e acessibilidade;
• estruturar o conteúdo na tela;
• utilizar recursos avançados, como a construção de um design system próprio com cores personalizadas;
• utilizar recursos atraentes e modernos como o tema noturno — um item de acessibilidade que é cada vez mais requisitado.
• utilizar recursos complexos como Hover, Focus, validações de formulário e até mesmo animações dentro da plataforma Web utilizando a Alura Newsletter como pano de fundo.

Vamos embarcar nessa jornada para trabalhar com tudo isso e entender mais sobre o ecossistema do Tailwind. Te vejo lá!

Aquecendo os motores - React com Vite

Começaremos a criar essa newsletter da Alura. O primeiro passo é termos uma aplicação Web para servir como base para o desenvolvimento. Neste projeto vamos utilizar o React.

Existem bibliotecas específicas para criarmos uma aplicação React do zero. Neste projeto utilizaremos o Vite, uma das minhas favoritas. É possível acessar a página oficial do Vite neste link.

Ele possui vantagens se comparado ao flagship de mercado atual, o Create React App (ou CRA), principalmente em relação às otimizações internas. O CRA possui como base do código o Javascript, já o Vite possui scripts em várias linguagens, algumas bem rápidas e mais próximas da máquina, entregando uma melhor performance. No quesito interface, o Vite é muito fácil de usar, e também possui suporte nativo para Typescript.

Acessaremos nosso VS Code, abriremos um terminal através do atalho "Ctrl + '". Em seu interior digitaremos pwd seguido de "Enter" para descobrir em que local estamos. O terminal retornará uma mensagem com o seu local:

Path
----
O_SEU_LOCAL

Depois acessaremos o interior da Área de Trabalho com o comando cd Desktop seguido de "Enter". Neste momento o terminal deverá exibir o caminho Users\SEU_USUARIO\Desktop. Dentro da Área de Trabalho criaremos uma pasta denominada "Alura" com o comando mkdir Alura seguido de "Enter".

mkdir Alura

Navegaremos para dentro dessa pasta através de cd Alura. Neste momento o terminal deverá exibir o caminho Users\SEU_USUARIO\Desktop\Alura. Em seguida digitaremos yarn create vite para inicializarmos a CLI ("aplicação de terminal", em português) do Vite. Ela nos auxiliará na criação da aplicação React.

yarn create vite

Em meio à criação, o terminal nos solicitará que digitemos o nome do projeto. Na frente dessa solicitação digitaremos o nome alura-newsletter seguido de "Enter".

Project name: > alura-newsletter

Em seguida o terminal nos solicitará que selecionemos o framework e a tecnologia utilizadas. Entre as opções selecionaremos React e Javascript.

Select a framework: > React
Select a variant: > Javascript

Pronto, a aplicação está criada. A CLI do Vite criou um diretório com o mesmo nome do projeto, alura-newsletter. Vamos acessá-lo através do comando cd alura-newsletter seguido de "Enter". Neste momento o terminal deverá exibir o caminho Users\SEU_USUARIO\Desktop\Alura\alura-newsletter.

cd alura-newsletter

Em seu interior rodaremos o comando yarn para construir as bibliotecas iniciais e as dependências geradas nesse projeto React.

yarn

Veremos como o processo de *build do Vite é muito mais veloz do que o do React App*: aqui no meu computador levou pouco mais de 19 segundos. Não fosse a gravação deste vídeo, o processo teria sido ainda mais rápido.

Para visualizarmos melhor os arquivos, acessaremos a pasta "alura-newsletter" através do menu superior esquerdo da IDE. Nele selecionaremos o caminho "Arquivo > Abrir Pasta > Área de Trabalho > Alura > alura-newsletter" e selecionaremos o botão "Abrir".

Após abrirmos o arquivo, o VS Code exibirá, através de um explorador à esquerda, toda a arquitetura de pastas que o Vite gerou para o nosso projeto. Antes de prosseguirmos realizaremos uma limpeza nestes arquivos. Abriremos novamente o terminal e nele digitaremos o comando yarn dev. Este é o comando para rodarmos a aplicação em modo de desenvolvimento. Após esse yarn o terminal devolverá uma URI gerada, a qual copiaremos e colaremos no navegador.

No navegador, após carregarmos a URI, veremos uma tela com os ícones do Vite e do React lado a lado, na região central superior. Logo abaixo temos o título "Vite + React". Este é o projeto padrão inicial que o Vite cria para projetos React.

Retornando ao VS Code, podemos fazer alterações com o projeto ainda rodando pois estas serão espelhadas no navegador.

Através do explorador na lateral esquerda acessaremos o arquivo index.html que consiste no HTML base da aplicação. Em seu interior, dentro do corpo da <head> acessaremos a seção <title> e alteraremos o título da aplicação de Vite + React para Alura Newsletter.

    <head>
        // Trecho de código omitido
        <title>Alura Newsletter</title>
    </head>

Salvaremos esse código e voltaremos ao explorador para acessar o arquivo App.jsx através do caminho "src > App.jsx". Em seu interior deletaremos todo o código e na linha 1 criaremos uma const App que recebe uma função seta (arrow function, em inglês) que por sua vez possui entre suas chaves o return de um h1 com a mensagem Hello Tailwind. Abaixo desse bloco deixaremos uma linha vazia e logo abaixo adicionaremos o export default App.

const App = () => {
    return <h1>Hello Tailwind</h1>
}

export default App

Acessaremos o arquivo index.css, e em seu interior selecionaremos e excluiremos todo o conteúdo para em seguida salvá-lo. Em seguida deletaremos os arquivos que não serão usados:

• oapp.css;
• todos os arquivos dentro da pasta assets;
• todos os arquivos dentro da pasta public.

Deletaremos um por vez clicando neles através do explorador e pressionando "Delete".

Retornaremos ao navegador e veremos no canto superior esquerdo da página o texto "Hello Tailwind" escrito em HTML puro, sem estilizações sobre um fundo que também não possui estilização. Esta é uma boa base para realizarmos instalações, observarmos as mudanças e analisarmos os elementos que o Tailwind entrega para a nossa página à medida em que executamos os comandos.

A seguir realizaremos a instalação do Tailwind em nossa aplicação React, utilizando o passo a passo disponível no site oficial do Tailwind, que pode ser acessado neste link. Até lá.

Aquecendo os motores - Instalação do Tailwind

Partiremos para a instalação do Tailwind. A forma mais segura de realizá-la é partindo da documentação oficial do Tailwind disponível neste link. Vamos abri-la e analisá-la no navegador.

Na página da documentação há um explorador à esquerda cujo topo possui um campo de busca. No corpo principal da página, iremos até a seção "Installation" onde encontramos a aba "Tailwind CLI" a qual possui vários tipos diferentes de instalação. À direita dessa temos outras três abas: "Using PostCSS", "Framework Guides" e "Play CDN" respectivamente. Clicaremos em "Framework Guides" e veremos uma lista de tecnologias consolidadas e que dão suporte ao Tailwind. Uma delas é o próprio Vite. Vamos clicar nele para acessar seu conteúdo.

Em seu interior encontraremos instruções divididas em seis etapas para a instalação do Tailwind em projetos React criados com o Vite. Cada etapa possui uma descrição à esquerda e o seu respectivo código à direita.

Se observarmos bem, a etapa um, que consiste em criar o projeto, já foi concluída. Portanto partiremos para a etapa dois, a qual possui os dois comandos abaixo:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Vamos rodar cada comando dessa etapa de forma individual para entender como a aplicação será afetada. O primeiro consiste na instalação de três bibliotecas usando o NPM. Entretanto, por preferência, utilizaremos o YARN.

Dica: sinta-se livre para utilizar qualquer método de gerenciamento de pacotes, seja YARN, NPM, PNPM ou outro. Isso não gera nenhuma mudança prática.

npm install -D tailwindcss postcss autoprefixer

Vamos copiá-lo e retornar ao VS Code. No terminal, pararemos a aplicação com o atalho "Ctrl + C" e substituiremos o comando npm install -D por yarn add -D — onde ambos indicam a instalação de uma dependência de desenvolvimento — seguido do código copiado.

yarn add -D tailwindcss postcss autoprefixer

Após o "Enter" serão instaladas as três dependências. Vamos entendê-las:

• o posstcss e o autoprefixer são bibliotecas acessórias que permitem o reconhecimento e injeção dos estilos do Tailwind por parte do React, e também possuem automatizações para nos permitir realizar configurações via arquivo;
• o tailwindcss possui as lógicas internas e estilizações do Tailwind.

Voltando ao navegador, copiaremos o próximo comando da etapa dois.

npx tailwindcss init -p

Retornando ao terminal, colaremos e rodaremos esse comando.

Vamos entender o código? O npx é um recurso que permite a utilização de uma dependência global do NPM sem a necessidade de instalá-la globalmente na máquina. Utilizaremos a dependência tailwindcss. Já o comando init junto à flag -p abrirão a CLI do Tailwind, gerando dois arquivos na raiz do projeto: postcss.config.cjs e tailwind.config.cjs.

Sobre extensões: A extensão .cjs denota que os dois arquivos recém-criados utilizam como padrão o modo Common Java Script para a exportação do pacote. Se acessarmos o arquivo App.jsx dentro da pasta "src" através do explorador veremos que o comando export default App na linha 5 utiliza o modo ECMAScript Module. Se acessarmos. por sua vez, o arquivo package.json dentro da pasta raiz, veremos na seção "type" que o padrão definido para a aplicação é o "module", ou seja, o ECMAScript Module. Dentro deste campo poderíamos alterar o padrão para common.js, mas neste projeto manteremos o module.

"type": "module",

Se um arquivo utilizar um padrão diferente do informado no package.json, ele deve informar expressamente através da extensão .cjs.

Voltaremos ao site do Tailwind no navegador e buscaremos a etapa três, na qual copiaremos o código abaixo, exibido dentro das chaves de um bloco denominado module.exports = {}:

    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],

Retornando ao VS Code acessaremos o arquivo tailwind.config.js pelo explorador e colaremos esse código acima de theme, no interior das chaves da seção module.exports = {}. Em seguida retiraremos de dentro do trecho "./src/**/*.{js, ts, jsx, tsx}" as referências do Typescript ts e tsx que não serão utilizadas em nosso projeto.

module.exports = {
    content: [
        "./index.html",
        "./src/**/*.{js,jsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Salvaremos o código e retornaremos ao site do Tailwind, onde copiaremos o comando da etapa quatro e colaremos no arquivo index.css que se localiza na pasta "src".

@tailwind base;
@tailwind components;
@tailwind utilities;

Salvaremos novamente o código. Voltaremos ao navegador e verificaremos que o texto "Hello Tailwind" diminuiu de tamanho, indicando que o Tailwind foi instalado com sucesso e está em uso na página da nossa aplicação. Este framework, quando inicializado, carrega componentes de sanitização (ou sanitizers) modificando configurações padrão em algumas tags. Uma delas é o h1 que usamos neste título. Todas as modificações de tags são exibidas igualmente em todos os navegadores, padronizando a visualização da aplicação. Não precisamos nos preocupar com essa mudança neste momento.

Voltando ao site do Tailwind, veremos que as etapas cinco e seis não serão úteis para nós neste momento, portanto não as aplicaremos.

A seguir entenderemos as ideias que fundamentaram o Tailwind e os seus recursos. Nos vemos lá!

Sobre o curso React com TailwindCSS: estilizando componentes

O curso React com TailwindCSS: estilizando componentes possui 160 minutos de vídeos, em um total de 41 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Aquecendo os motores
• Conhecendo os recursos
• Mergulhando no Tailwind
• Trabalhando com formulários
• Publicando o jogo