Criando um projeto ReactJS com Vite e configurando o TailwindCSS

O Vite é um novo construtor de aplicativos web que visa alto desempenho e configuração zero. Ele utiliza a importação de módulos nativos do JavaScript, o que permite uma inicialização muito mais rápida do que os tradicionais bundlers como o Webpack.

O TailwindCSS, por sua vez, é uma estrutura CSS utilitária que simplifica o processo de estilização de aplicativos web. Com uma abordagem baseada em classes, o TailwindCSS facilita a criação e customização de estilos sem a necessidade de escrever CSS do zero.

Passo a passo

1. Crie um novo projeto ReactJS utilizando o Vite:

npx create-vite my-react-app --template react

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

cd my-react-app

3. Instale o TailwindCSS:

npm install tailwindcss

4. Crie o arquivo de configuração do TailwindCSS:

npx tailwindcss init

5. Abra o arquivo tailwind.config.js e adicione as configurações desejadas:

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

6. Importe o TailwindCSS no arquivo principal do projeto:

// src/main.js
import 'tailwindcss/dist/tailwind.min.css'

7. Utilize as classes do TailwindCSS em seus componentes React:

// src/App.js
import React from 'react'

function App() {
return (

Meu Aplicativo React com TailwindCSS

)
}

export default App

Com esses passos, você estará pronto para começar a desenvolver seu projeto ReactJS com Vite e estilizá-lo utilizando o TailwindCSS de forma simples e eficiente.