Estilos CSS
Actualmente, tu página de inicio no tiene ningún estilo. Veamos las diferentes formas en que puedes estilizar tu aplicación Next.js.
Estilos globales
Si miras dentro de la carpeta /app/ui, verás un archivo llamado global.css. Puedes usar este archivo para agregar reglas CSS a todas las rutas de tu aplicación, como reglas de reseteo CSS, estilos globales para elementos HTML como enlaces, y más.
Puedes importar global.css en cualquier componente de tu aplicación, pero generalmente es una buena práctica agregarlo a tu componente de nivel superior. En Next.js, este es el diseño raíz (root layout) (más sobre esto más adelante).
Agrega estilos globales a tu aplicación navegando a /app/layout.tsx e importando el archivo global.css:
import '@/app/ui/global.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}Con el servidor de desarrollo aún en ejecución, guarda tus cambios y prévisualos en el navegador. Tu página de inicio ahora debería verse así:
Pero espera un momento, no agregaste ninguna regla CSS, ¿de dónde vienen los estilos?
Si miras dentro de global.css, notarás algunas directivas @tailwind:
@tailwind base;
@tailwind components;
@tailwind utilities;Tailwind
Tailwind es un framework CSS que acelera el proceso de desarrollo permitiéndote escribir rápidamente clases de utilidad (utility classes) directamente en tu código React.
En Tailwind, estilizas elementos agregando nombres de clases. Por ejemplo, agregar "text-blue-500" convertirá el texto del <h1> en azul:
<h1 className="text-blue-500">I'm blue!</h1>Aunque los estilos CSS son compartidos globalmente, cada clase se aplica individualmente a cada elemento. Esto significa que si agregas o eliminas un elemento, no tienes que preocuparte por mantener hojas de estilo separadas, colisiones de estilos o que el tamaño de tu paquete CSS crezca a medida que tu aplicación escala.
Cuando usas create-next-app para iniciar un nuevo proyecto, Next.js te preguntará si deseas usar Tailwind. Si seleccionas yes, Next.js instalará automáticamente los paquetes necesarios y configurará Tailwind en tu aplicación.
Si miras /app/page.tsx, verás que estamos usando clases de Tailwind en el ejemplo.
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
export default function Page() {
return (
// Estas son clases de Tailwind:
<main className="flex min-h-screen flex-col p-6">
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
// ...
)
}No te preocupes si es tu primera vez usando Tailwind. Para ahorrar tiempo, ya hemos estilizado todos los componentes que usarás.
¡Juguemos con Tailwind! Copia el código de abajo y pégalo sobre el elemento <p> en /app/page.tsx:
<div
className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
/>Si prefieres escribir reglas CSS tradicionales o mantener tus estilos separados de tu JSX, los Módulos CSS son una gran alternativa.
Módulos CSS
Los Módulos CSS te permiten limitar el alcance del CSS a un componente creando automáticamente nombres de clase únicos, por lo que tampoco tienes que preocuparte por colisiones de estilos.
Continuaremos usando Tailwind en este curso, pero tomemos un momento para ver cómo puedes lograr los mismos resultados del ejercicio anterior usando módulos CSS.
Dentro de /app/ui, crea un nuevo archivo llamado home.module.css y agrega las siguientes reglas CSS:
.shape {
height: 0;
width: 0;
border-bottom: 30px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}Luego, dentro de tu archivo /app/page.tsx importa los estilos y reemplaza los nombres de clase de Tailwind del <div> que agregaste con styles.shape:
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';
export default function Page() {
return (
<main className="flex min-h-screen flex-col p-6">
<div className={styles.shape} />
// ...
)
}Guarda tus cambios y prévisualos en el navegador. Deberías ver la misma forma que antes.
Tailwind y los módulos CSS son las dos formas más comunes de estilizar aplicaciones Next.js. Si usas uno u otro es cuestión de preferencia, ¡incluso puedes usar ambos en la misma aplicación!
Usando la biblioteca clsx para alternar nombres de clase
Puede haber casos en los que necesites estilizar condicionalmente un elemento según su estado u otra condición.
clsx es una biblioteca que te permite alternar nombres de clase fácilmente. Recomendamos revisar la documentación para más detalles, pero aquí está el uso básico:
- Supongamos que quieres crear un componente
InvoiceStatusque aceptestatus. El estado puede ser'pending'o'paid'. - Si es
'paid', quieres que el color sea verde. Si es'pending', quieres que el color sea gris.
Puedes usar clsx para aplicar condicionalmente las clases, así:
import clsx from 'clsx';
export default function InvoiceStatus({ status }: { status: string }) {
return (
<span
className={clsx(
'inline-flex items-center rounded-full px-2 py-1 text-sm',
{
'bg-gray-100 text-gray-500': status === 'pending',
'bg-green-500 text-white': status === 'paid',
},
)}
>
// ...
)}Otras soluciones de estilos
Además de los enfoques que hemos discutido, también puedes estilizar tu aplicación Next.js con:
- Sass, que te permite importar archivos
.cssy.scss. - Bibliotecas CSS-in-JS como styled-jsx, styled-components y emotion.
Consulta la documentación de CSS para más información.