Configuração do TailWind CSS §

---

1. Instalar o pacote tailwindcss, postcss e autoprefixer:

$ npm i tailwindcss postcss autoprefixer

2. Criar os arquivos de configuração do Tailwind a partir do binário dele:

$ npx tailwindcss init -p

Nota

Deve ser criado os arquivos postcss.config.js e tailwind.config.js.

3. Definir os arquivos que serão analisados pelo Tailwind para realizar apenas os imports necessários para a aplicação:

module.exports = {
  content: [
	// Definir os arquivos que utilizam o Tailwind
  ],
  theme: {
	extend: {},
  },
  plugins: [],
}

module.exports = {
  content: [
	"./src/pages/**/*.{js,ts,jsx,tsx}",
	"./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
	extend: {},
  },
  plugins: [],
}

4. Importas as classes utilitárias base do Tailwind no arquivo CSS global:

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

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado