Cómo usar CSS en tu aplicación

Next.js ofrece varias formas de usar CSS en tu aplicación, incluyendo:

Módulos CSS
CSS Global
Hojas de estilo externas
Tailwind CSS
Sass
CSS-in-JS

Módulos CSS

Los Módulos CSS (CSS Modules) limitan el alcance del CSS localmente generando nombres de clase únicos. Esto te permite usar la misma clase en diferentes archivos sin preocuparte por colisiones de nombres.

Para empezar a usar Módulos CSS, crea un nuevo archivo con la extensión .module.css e impórtalo en cualquier componente dentro del directorio app:

app/blog/blog.module.css

.blog {
  padding: 24px;
}

import styles from './blog.module.css'

export default function Page() {
  return <main className={styles.blog}></main>
}

CSS Global

Puedes usar CSS global para aplicar estilos en toda tu aplicación.

Crea un archivo app/global.css e impórtalo en el layout raíz para aplicar los estilos a cada ruta de tu aplicación:

app/global.css

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

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

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

Nota importante: Los estilos globales pueden importarse en cualquier layout, página o componente dentro del directorio app. Sin embargo, como Next.js usa el soporte incorporado de React para hojas de estilo e integración con Suspense, actualmente no elimina las hojas de estilo al navegar entre rutas, lo que puede causar conflictos. Recomendamos usar estilos globales solo para CSS verdaderamente global, y Módulos CSS para CSS con alcance limitado.

Hojas de estilo externas

Las hojas de estilo publicadas por paquetes externos pueden importarse en cualquier lugar del directorio app, incluyendo componentes colocalizados:

import 'bootstrap/dist/css/bootstrap.css'

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

Nota importante: En React 19, también se puede usar <link rel="stylesheet" href="..." />. Consulta la documentación de link en React para más información.

Orden y fusión

Next.js optimiza CSS durante las compilaciones de producción fusionando automáticamente las hojas de estilo. El orden de tu CSS depende del orden en que importas los estilos en tu código.

Por ejemplo, base-button.module.css se ordenará antes que page.module.css ya que <BaseButton> se importa antes que page.module.css:

import { BaseButton } from './base-button'
import styles from './page.module.css'

export default function Page() {
  return <BaseButton className={styles.primary} />
}

Recomendaciones

Para mantener un orden predecible del CSS:

Intenta contener las importaciones de CSS en un único archivo de entrada JavaScript o TypeScript
Importa estilos globales y hojas de estilo Tailwind en la raíz de tu aplicación.
Usa Módulos CSS en lugar de estilos globales para componentes anidados.
Usa una convención de nombres consistente para tus módulos CSS. Por ejemplo, usa <nombre>.module.css en lugar de <nombre>.tsx.
Extrae estilos compartidos en componentes compartidos para evitar importaciones duplicadas.
Desactiva linters o formateadores que ordenan automáticamente las importaciones como sort-imports de ESLint.
Puedes usar la opción cssChunking en next.config.js para controlar cómo se agrupa el CSS.

Desarrollo vs Producción

En desarrollo (next dev), las actualizaciones de CSS se aplican al instante con Fast Refresh.
En producción (next build), todos los archivos CSS se concatenan automáticamente en archivos .css minimizados y divididos por código, asegurando que se cargue la mínima cantidad de CSS para una ruta.
El CSS aún se carga con JavaScript desactivado en producción, pero se requiere JavaScript en desarrollo para Fast Refresh.
El orden del CSS puede comportarse diferente en desarrollo, siempre verifica la compilación (next build) para confirmar el orden final del CSS.

Cómo usar CSS en tu aplicación

Módulos CSS

CSS Global

Hojas de estilo externas

Orden y fusión

Recomendaciones

Desarrollo vs Producción

Tailwind CSS

Sass

CSS-in-JS

On this page