Consejos de Estilos

Aquí hay algunos consejos de estilos que pueden ser útiles.

Puedes simplemente leer las siguientes secciones. ¡No es necesario hacer cambios en nuestra aplicación!

Usar la biblioteca clsx para alternar clases

clsx es una biblioteca simple que te permite alternar nombres de clases fácilmente. Puedes instalarla usando npm install clsx o yarn add clsx.

Por favor revisa su documentación para más detalles, pero aquí está el uso básico:

• Supongamos que quieres crear un componente Alert que acepte type, que puede ser 'success' o 'error'.
• Si es 'success', quieres que el color del texto sea verde. Si es 'error', quieres que el color del texto sea rojo.

Primero puedes escribir un módulo CSS (ej. alert.module.css) así:

.success {
  color: green;
}
.error {
  color: red;
}

Y usar clsx de esta manera:

import styles from './alert.module.css';
import { clsx } from 'clsx';
 
export default function Alert({ children, type }) {
  return (
    <div
      className={clsx({
        [styles.success]: type === 'success',
        [styles.error]: type === 'error',
      })}
    >
      {children}
    </div>
  );
}

Personalizar la configuración de PostCSS

Por defecto, sin configuración adicional, Next.js compila CSS usando PostCSS.

Para personalizar la configuración de PostCSS, puedes crear un archivo en el directorio raíz llamado postcss.config.js. Esto es útil si estás usando bibliotecas como Tailwind CSS.

Aquí están los pasos para añadir Tailwind CSS. Primero, instala los paquetes:

npm install -D tailwindcss autoprefixer postcss

Luego, crea un postcss.config.js:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

También recomendamos configurar las fuentes de contenido especificando la opción content en tailwind.config.js:

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    // Para el mejor rendimiento y evitar falsos positivos,
    // sé lo más específico posible con tu configuración de contenido.
  ],
};

Para aprender más sobre la configuración personalizada de PostCSS, consulta la documentación de PostCSS.

Para comenzar fácilmente con Tailwind CSS, revisa nuestro ejemplo.

Usar Sass

Por defecto, Next.js te permite importar Sass usando las extensiones .scss y .sass. Puedes usar Sass a nivel de componente mediante Módulos CSS y las extensiones .module.scss o .module.sass.

Antes de poder usar el soporte integrado de Sass en Next.js, asegúrate de instalar sass:

npm install -D sass

¡Eso es todo por esta lección!

Para aprender más sobre el soporte integrado de CSS y Módulos CSS en Next.js, consulta la Documentación de CSS.