Morioh
Login
Sérgio Oliveira

Sérgio Oliveira

9 months ago

Como usar Tailwind CSS com um aplicativo React

Tailwind CSS é uma estrutura CSS utilitária que fornece um conjunto de classes CSS de baixo nível que podem ser usadas para construir designs personalizados. É popular entre os desenvolvedores porque é flexível, leve e fácil de usar.

Neste tutorial, aprenderemos como usar Tailwind CSS, uma estrutura CSS utilitária, para estilizar seu aplicativo React com facilidade. Este tutorial cobrirá tudo o que você precisa saber, desde a instalação até o uso.

Primeiro, abra seu terminal e digite os seguintes comandos para criar um novo projeto.

#using NPX
npx create-react-app tailwindreact-app

#using NPM
npm init react-app tailwindreact-app

#using yarn 
yarn create react-app tailwindreact-app

create-react-app é a ferramenta oficial de construção do React para criar novos projetos React. Ele aproveita  o webpack  e  o babel  e reduz o incômodo de configurar e configurar os processos de construção de projetos, permitindo que você se concentre em escrever o código que alimenta seu aplicativo.

A seguir, instale o Tailwind e suas dependências:

cd tailwindreact-app

npm install tailwindcss postcss-cli autoprefixer -D

Precisamos inicializar o Tailwind CSS criando as configurações padrão. Digite o comando abaixo em seu terminal:

npx tailwind init tailwind.config.js --full

Este comando cria  tailwind.config.js  no diretório base do seu projeto; o arquivo contém a configuração, como nossas cores, temas, consultas de mídia e assim por diante. É um arquivo útil que ajuda com conjuntos predefinidos de propriedades que ajudarão na necessidade de renomear certas convenções ou propriedades, se necessário.

Agora atualize tailwind.config.js :

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

Como configurar o PostCSS?

A documentação do PostCSS afirma que:

“PostCSS é uma ferramenta para transformar estilos com plugins JS. Esses plug-ins podem limpar seu CSS, suportar variáveis ​​​​e mixins, transpilar sintaxe CSS futura, imagens embutidas e muito mais.”

Por que autoprefixador?

É necessário instalar o Autoprefixer junto com o Tailwind CSS porque o Autoprefixer geralmente rastreia  caniuse.com  para ver quais propriedades CSS precisam ser prefixadas. Conseqüentemente, Tailwind CSS não fornece nenhum prefixo de fornecedor. Se você está curioso como um gato em relação ao  PostCSS  , navegue até a  documentação deles.

Crie um arquivo de configuração PostCSS em seu diretório base manualmente ou usando o comando:

touch postcss.config.js

Adicione as seguintes linhas de código ao seu arquivo PostCSS:

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.config.js'),
        require('autoprefixer')
    ],
};

Porque PostCSS é necessário para limpar nosso CSS, daí esta configuração.

Atualizar scripts em package.json

Agora navegue até o seu package.jsonarquivo no diretório raiz e substitua os “scripts” pelo seguinte:

"scripts": {
    "start": "npm run build:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
},

Crie sua pasta de estilos

Crie uma pasta chamada estilos  dentro da sua pasta src  . É aqui que todos os seus estilos seriam armazenados.

Dentro da pasta de estilos  , crie um arquivo tailwind.css  e um arquivo index.css  .

/* src/styles/tailwind.css */

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

Importar main.css

Você deve excluir os  arquivos index.css e  app.css no diretório raiz do projeto e remover as instruções de importação nos  arquivos Index.js e  App.js , respectivamente.

Agora você está pronto para importar o tailwind para seu arquivo index.js:

import './styles/main.css';

Agora, em seu app.jsarquivo, vá em frente e adicione o seguinte código:

<div className="text-red-500">
     Codegeek
</div>

Agora é hora de executar nosso projeto:

npm run start

Neste tutorial você aprendeu como usar Tailwind CSS com um aplicativo React.

Obrigado pela leitura !!!

1.05 GEEK