Cómo instalar Tailwind CSS en tu aplicación Next.js

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:

Terminal

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:

postcss.config.mjs

/** @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:

app/globals.css

@import 'tailwindcss';

Dentro del layout raíz (app/layout.tsx), importa la hoja de estilos globals.css para aplicar los estilos a cada ruta de tu aplicación.

import type { Metadata } from 'next'

// Estos estilos se aplican a cada ruta de la aplicación
import './globals.css'

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// Estos estilos se aplican a cada ruta de la aplicación
import './globals.css'

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

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>
}

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.