Iniciando seu projeto React com Vite e Tailwind CSS

O Setup do Tailwind CSS não é algo tão simples, esse post é para auxiliar vocês a iniciarem o seu projeto front end.

Começando no terminal

• npm create vite@latest front-end -- --template react
• cd front-end
• code .

No terminal do VS Code

• npm install -D tailwindcss postcss autoprefixer
• npx tailwindcss init -p --full

Utilizando a flag --full o arquivo tailwind.config.js já vem todo preenchido com um padrão, só precisamos inserir o content

content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ],

Podemos excluir os arquivos App.css, logo.svg e substituir o código de dentro do index.css

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

E agora é só iniciar o nosso projeto React com Tailwind CSS

export default function App() {
    return (
        <div className="flex justify-center items-center h-screen text-2xl bg-gray-800">
            <div className="p-64 m-4 bg-blue-600 border-2 border-blue-700 rounded-full shadow-xl">
                <p className="text-3xl text-white">Hello</p>
            </div>
        </div>
    );
}

Seja feliz :)