Agora que já temos nosso projeto criado com Vite + React + TypeScript e ajustado com as primeiras limpezas, é hora de configurar o Tailwind CSS, que será nosso sistema de estilização principal.

Instalando o Tailwind CSS

Para instalar o Tailwind no nosso projeto, execute os seguintes comandos no terminal:

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

O que cada pacote faz?

• tailwindcss: é o próprio framework de utilitários CSS.
• postcss: um processador de CSS que permite usar plugins como o Tailwind.
• autoprefixer: plugin do PostCSS que adiciona prefixos de CSS automaticamente (para compatibilidade entre navegadores).

O segundo comando (npx tailwindcss init -p) cria dois arquivos:

• tailwind.config.js: onde personalizamos o Tailwind.
• postcss.config.js: usado pelo Vite para integrar o Tailwind ao build.

Configurando o Tailwind

Abra o arquivo tailwind.config.js e substitua o conteúdo pelo seguinte:

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            fontFamily: {
                nunito: ['Nunito', 'sans-serif'],
                libre: ['Libre Baskerville', 'serif'],
                roboto: ['Roboto Serif', 'serif'],
            },
            colors: {
                surface: '#121212',
                divider: '#d9d9d9',
                'footer-bg': '#292929',
                'footer-color': '#f7f7f7',
            },
        },
    },
    plugins: [],
};

Explicação:

• content: diz ao Tailwind onde procurar pelas classes CSS (importante para o purge funcionar e evitar CSS desnecessário).