Tutorial de como instalar Tailwindcss em um Projeto React.js de VITE

Se você está familiarizado com o desenvolvimento web, provavelmente já ouviu falar sobre Tailwindcss. Este é um framework de CSS que permite criar designs bonitos e responsivos de forma rápida e eficiente. Neste tutorial, vamos mostrar como instalar o Tailwindcss em um projeto React.js usando VITE como nosso scaffolding tool.

✨ PASSO A PASSO ✨

1. Primeiro, instale o VITE em seu projeto React.js. Se você ainda não tem o VITE instalado, pode fazer isso usando o seguinte comando:

   
npm install -g create-vite


2. Após instalar o VITE, crie um novo projeto React.js:

   
create-vite react my-tailwind-project


3. Navegue até o diretório do projeto:

   
cd my-tailwind-project


4. Instale o Tailwindcss e suas dependências:

   
npm install tailwindcss postcss autoprefixer


5. Crie o arquivo tailwind.config.js na raiz do seu projeto com o seguinte conteúdo:

   
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}


6. Crie um arquivo postcss.config.js na raiz do seu projeto com o seguinte conteúdo:

   
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}


7. Abra o arquivo vite.config.js na raiz do seu projeto e adicione o seguinte código para configurar o Tailwindcss:

   
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

   // https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
css: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
})


8. Por fim, reinicie o servidor de desenvolvimento:

   
npm run dev


Com isso, o Tailwindcss deve estar instalado e funcionando em seu projeto React.js de VITE. Agora você pode começar a criar interfaces bonitas e responsivas de forma mais rápida e fácil.