Tailwind CSS

Tailwind CSS es un framework CSS de utilidad primero que funciona excepcionalmente bien con Next.js.

Instalación de Tailwind

Instala los paquetes de Tailwind CSS y ejecuta el comando init para generar los archivos tailwind.config.js y postcss.config.js:

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

Configuración de Tailwind

Dentro de tailwind.config.js, agrega las rutas a los archivos que usarán las clases de Tailwind CSS:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Nota la adición del directorio `app`.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // O si usas el directorio `src`:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

No es necesario modificar postcss.config.js.

Importación de estilos

Agrega las directivas de Tailwind CSS que Tailwind usará para inyectar sus estilos generados a una Hoja de estilos global en tu aplicación, por ejemplo:

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

Dentro del archivo app personalizado (pages/_app.js), importa la hoja de estilos globals.css para aplicar los estilos a cada ruta en tu aplicación.

// Estos estilos aplican a cada ruta en la aplicación
import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

// Estos estilos aplican a cada ruta en la aplicación
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Uso de clases

Después de instalar Tailwind CSS y agregar los estilos globales, puedes usar las clases de utilidad de Tailwind en tu aplicación.

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

Uso con Turbopack

Desde Next.js 13.1, Tailwind CSS y PostCSS son compatibles con Turbopack.