Tailwind CSS

Tailwind CSS es un framework CSS utility-first completamente compatible con Next.js. Esta guía te mostrará cómo instalar Tailwind CSS en tu aplicación Next.js.

Instalación de Tailwind

Instala los paquetes necesarios de Tailwind CSS:

npm install -D tailwindcss @tailwindcss/postcss postcss

Nota importante: Si estás usando la CLI create-next-app para crear tu proyecto, Next.js te preguntará si deseas instalar Tailwind y configurará automáticamente el proyecto.

Configuración de Tailwind

Crea un archivo postcss.config.mjs en la raíz de tu proyecto y añade el plugin @tailwindcss/postcss a tu configuración de PostCSS:

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

A partir de Tailwind v4, no se requiere configuración por defecto. Si necesitas configurar Tailwind, puedes seguir la documentación oficial para configurar el archivo CSS global.

También existe una CLI de actualización y una guía si tienes un proyecto existente con Tailwind v3.

Importación de estilos

Añade 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:

@import 'tailwindcss';

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

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

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

Uso de clases

Después de instalar Tailwind CSS y añadir los estilos globales, puedes usar las clases utility de Tailwind en tu aplicación.

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

Uso con Turbopack

A partir de Next.js 13.1, Tailwind CSS y PostCSS son compatibles con Turbopack.