Um guia para iniciantes em Tailwind CSS em React

Cansado de frameworks CSS opinativos? Procurando uma opção robusta que lhe dê liberdade para criar? Experimente o Tailwind CSS.

Tailwind CSS é uma estrutura CSS utilitária que permite aos desenvolvedores projetar componentes da web personalizados sem mudar para um arquivo CSS. Neste tutorial, você aprenderá como instalar Tailwind CSS no React e como usá-lo para construir uma página React simples.

Por que usar Tailwind CSS?

Já existem muitas estruturas CSS que simplificam a forma como os desenvolvedores projetam páginas da web. Então, por que você deve usar Tailwind CSS?

Frameworks CSS como Bootstrap e Foundation são frameworks opinativos, o que significa que fornecem aos desenvolvedores componentes predefinidos com estilos padrão. Isso limita a personalização e a criatividade, e você acaba com sites que parecem bastante genéricos.

Tailwind CSS, no entanto, é uma estrutura utilitária que oferece controle criativo para criar componentes dinâmicos. E, ao contrário do Bootstrap, você pode personalizar facilmente os designs como desejar.

Outra vantagem de usar Tailwind CSS é que você acaba com um pacote CSS pequeno, pois remove todo o CSS não utilizado durante o processo de construção (o que é diferente do Bootstrap, pois inclui todos os arquivos CSS na construção).

Saiba mais sobre as diferenças entre Tailwind CSS e Bootstrap em nosso artigo sobre o tema.

Desvantagens de usar Tailwind CSS

Tailwind CSS tem uma curva de aprendizado acentuada, mesmo para desenvolvedores experientes. Leva algum tempo para aprender como usar totalmente as classes utilitárias e talvez seja necessário consultar a documentação com frequência. No entanto, depois de se familiarizar com as classes, você achará mais fácil e rápido em comparação ao CSS simples.

A maioria dos desenvolvedores gosta de seguir o princípio da separação de interesses, de forma que os arquivos CSS e HTML sejam escritos em arquivos diferentes. Com Tailwind CSS, você escreve o CSS diretamente na marcação HTML – uma desvantagem para alguns.

Mesmo com essas desvantagens, Tailwind CSS é uma estrutura que você deve considerar seriamente se já estiver confortável com CSS e quiser construir designs com mais rapidez.

Primeiros passos: crie um projeto React

Execute o seguinte comando no terminal para criar uma estrutura de aplicativo React usando create-react-app.

npx create-react-app react-tailwind

create-react-app fornece uma maneira fácil de criar um aplicativo React sem configurar ferramentas de construção como webpack, babel ou linters. Isso significa que você terá um ambiente React funcional em poucos minutos.

O comando acima cria uma nova pasta chamada react-tailwind. Navegue até a pasta e abra-a usando seu editor de texto preferido.

cd react-tailwind

Em seguida, instale o Tailwind CSS e configure-o para funcionar com o aplicativo React.

Use Tailwind CSS em React

Instale Tailwind CSS e suas dependências com este comando:

npm install tailwindcss postcss autoprefixer

PostCSS usa plug-ins JavaScript para tornar o CSS compatível com a maioria dos navegadores. Ele verifica o navegador em que o aplicativo está sendo executado e determina os polyfills necessários para fazer seu CSS funcionar perfeitamente. Autoprefixer é um plugin PostCSS que usa valores de caniuse.com para adicionar automaticamente prefixos de fornecedores às regras CSS.

Inicializar CSS do Tailwind

Execute o comando tailwind init para gerar arquivos de configuração padrão CSS do Tailwind.

npx tailwindcss init

Isso cria tailwind.config.js na pasta raiz que armazena todos os arquivos de configuração do Tailwind e contém o seguinte:

module.exports = {
 content: [],
 theme: {
   extend: {},
 },
 plugins: [],
}

Configurar caminhos de modelo

Você precisa informar ao Tailwind CSS os arquivos que ele deve verificar para ver quais classes CSS estão sendo usadas. Isso permite que o Tailwind identifique e remova as classes não utilizadas e, portanto, reduza o tamanho do CSS gerado.

Em tailwind.config.js, adicione os caminhos do modelo na chave de conteúdo.

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

Injetar CSS do Tailwind no React

A próxima etapa é incluir Tailwind CSS no aplicativo usando diretivas @tailwind.

Exclua tudo em index.css e adicione o seguinte para importar os estilos básicos, componentes e utilitários.

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

Por fim, certifique-se de que index.css seja importado em index.js e que o CSS do Tailwind esteja pronto para uso.

Usando Tailwind CSS para estilizar um componente React

Você criará a página da web simples abaixo e estilizá-la-á usando as classes utilitárias do Tailwind.

Esta página contém duas seções principais: uma barra de navegação e a seção herói (que possui um título e um botão).

Para ilustrar como o Tailwind CSS torna a escrita de CSS mais fácil, tente estilizar a página da web usando CSS simples e Tailwind CSS.

Comece modificando o App.js na pastasrc para remover o código desnecessário.

import './App.css'
function App() {
 return (
   <div className='app'>
   </div>
 );
}
export default App;

Em seguida, adicione o conteúdo da página da web a App.js.

import "./App.css";
function App() {
 return (
   <div className="wrapper">
     <nav>
       <div className="logo">Tailwind CSS</div>
       <ul>
         <li>Install</li>
         <li>Docs</li>
       </ul>
     </nav>
     <div className="hero">
       <h1 className="header">
         Tailwind CSS makes styling React components easier!
       </h1>
       <button className="btn">Get Started</button>
     </div>
   </div>
 );
}

Para usar CSS simples, adicione o CSS a App.css.

nav {
 display: flex;
 justify-content: space-between;
 padding: 16px 36px;
 color: #000;
 box-shadow: 0px 2px 5px 0px rgba(168, 168, 168, 0.75);
}
.logo {
 font-size: 18px;
 font-weight: bold;
}
ul {
 list-style: none;
 display: inline-flex;
}
ul li {
 margin-left: 16px;
 cursor: pointer;
}
.hero {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-top: 64px;
}
h1 {
 font-size: 36px;
 text-align: center;
}
.btn {
 background-color: #000000;
 color: #fff;
 padding: 10px;
 width: fit-content;
 margin-top: 36px;
}

Com Tailwind CSS, você não precisa escrever as regras CSS para cada classe. Em vez disso, você usa classes utilitárias. Estas são classes com escopo definido para uma única propriedade CSS. Por exemplo, se você deseja criar um botão com fundo preto e texto branco, você precisa usar as classes de utilitário bg-black e text-white .

App.js deve ficar assim.

function App() {
 return (
   <div>
     <Navbar />
     <div className="flex flex-col items-center mt-16">
       <h1 className="text-4xl text-center">
         Tailwind CSS makes styling React components easier!
       </h1>
       <button className="bg-black text-white p-2.5 w-fit mt-9 ">
         Get Started
       </button>
     </div>
   </div>
 );
}

Você não precisa importar App.css , pois os estilos gerados pelo Tailwind CSS são armazenados em index.css que você importou em index.js > mais cedo.

Comparada ao CSS simples, essa abordagem resulta em menos código fácil de entender.

Codifique com estilo com Tailwind CSS

Neste artigo, você aprendeu sobre Tailwind CSS, seus pontos fortes, desvantagens e como usar suas classes utilitárias em aplicativos React. Além das classes, o Tailwind CSS também oferece outros recursos adicionais, incluindo a capacidade de criar layouts responsivos e componentes reutilizáveis.

Mas, como mencionamos anteriormente, o Tailwind está longe de ser o único framework CSS do mercado. Qual você usará em seu próximo projeto?