O Tailwind CSS é um framework CSS que vem agradando muitos desenvolvedores, por ser de fácil aprendizado, telas responsivas com pequenas instruções e construir telas sem escrever nenhuma linha de CSS ou pouco para fazer alguns ajustes.
Vamos ao que interessa, hoje vou mostrar para vocês como eu configuro meus projetos em React e Tailwind CSS.
Nesse exemplo vou utilizar a ferramenta de construção para font-end Vite, essa ferramenta também é uma novidade por ser bem rápida e ter uma API altamente personalizável usando plug-ins.
Para acompanhar esse tutorial, você deve ter
- Node.js v12.13.0 ou superior instalado no seu PC
- Yarn / npm 5.66 ou superior instalado no seu PC
- Conhecimentos básicos em CSS
- Conhecimento básico de ReactJS
Criando o projeto com Vite.
Primeiro abra seu terminal e digite os seguintes comandos para criar um novo projeto.
Para criar usando JavaScript:
yarn create vite my-react-app --template react
Para criar usando TypeScript:
yarn create vite my-react-app --template react-ts
Esse create é uma configuração básica do seu aplicativo, Ele incluirá os pacotes necessários definidos por padrão no package.json, depois que criar seu projeto vamos acessar a pasta.
cd my-react-app
yarn
O seu projeto está pronto para ser executado. Digite o seguinte comando para iniciar o aplicativo React.
yarn dev
Pronto, seu aplicativo já pode ser acessado no seu navegador de preferencia na porta padrão que o Vite cria: https://localhost:3000/ para visualizar o aplicativo.
Agora que nosso aplicativo React e Vite está funcionando vamos para a parte do Tailwind CSS.
Agora que estamos no diretório do projeto, a primeira etapa é instalar o Tailwind como uma dependência de desenvolvimento.
yarn add tailwindcss -D
yarn add postcss
yarn add autoprefixer
Após a conclusão da instalação das dependências precisamos inicializar o Tailwind em nosso projeto. Isso vai gerar um arquivo de configuração que mencionamos anteriormente, o “tailwind.config.js” que é o arquivo principal do Tailwind em nosso projeto, para gerar o arquivo execute o código abaixo:
yarn tailwind init
Copie esse código para dentro do seu arquivo “tailwind.config.js”:
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Foto exemplo “tailwind.config.js”
Agora crie um arquivo de configuração para o postcss “postcss.config.js” no diretório raiz.
Cole o seguinte conteúdo nesse arquivo:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Aproxima etapa é configurar o ponto de entrada para o Tailwind CSS.
Vamos criar uma pasta “css” dentro da pasta um arquivo “tailwind.css” e adicionar o seguinte código.
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.css
Foto exemplo
Em seguida vamos importar o tailwind.css para o arquivo main.tsx ou main.js se for em javascript da sua aplicação.
Foto exemplo
Agora estamos prontos para usar o CSS do Tailwind em nosso projeto.
Vamos entrar no App.tsx e eliminar todo código padrão e fazer um código nosso e começar a fazer alguma coisa em Tailwind CSS.
Reinicie o servidor yarn dev para evitar erros desagradáveis.
Pronto, agora só colocar o endereço na sua aba de navegação e está tudo pronto 😊
https://localhost:3000/
Nesse exemplo eu coloquei um background laranja e um width de 100%
Link do projeto no meu github, aproveita e da uma estrelinha :)
Link do projeto: aqui
Meu Linkedin: aqui
Documentação do Tailwindcss: aqui
Documentação do Vite: aqui
Top comments (1)
Como limpar as classes que não são utilizadas? mesmo usando só um text-black todas as classes que criar no arquivo e que não são usadas ainda vem junto no bundle