TailwindCSS e NextJS

Para usar os utilitarios de CSS da framework TailwindCSS, instalamos os seguinte modulos:

npm install -D tailwindcss postcss autoprefixer

Depois iniciamos o Tailwind:

npx tailwindcss init -p

Temos que adicionar os seguintes tipos no ficheiro tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

E adicionamos as seguintes diretivas de CSS para cada layer da framework TailwindCSS no ficheiro globals.css:

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

A partir daqui é possivel usar as classes da framework no conteudo da app.

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}