Pagina de Programación

⬅ Anterior Menú Siguiente ➡

Lección 10. Integración de estilos CSS.

Los proyectos de Next.js nos permiten la integración de los estilos CSS de diferentes maneras.

Podemos revisar la documentación oficial de Next.js:

https://nextjs.org/docs/app/getting-started/css.

Next.js permite la implementación de estilos CSS, de diferentes maneras:

Módulos CSS
CSS Global
StyleSheets Externas
Tailwind CSS
Sass
CSS con JS

Veamos como funcionan.

Módulos CSS._

Los módulos CSS tienen un alcance local de CSS mediante la generación de nombres de clase únicos. Esto le permite usar la misma clase en diferentes archivos sin preocuparse por las colisiones de nombres.

Para a utilizar módulos CSS, debemos crear un archivo con la extensión .module.css e impórtarlo en cualquier componente dentro de nuestro directorio app.

Tal cual como un ejemplo:

Donde el crearemos un archivo llamado blog.module.css, con contenido:

.blog {
  padding: 24px;
}

Importándolo en un componente .tsx:

import styles from './blog.module.css'
 
export default function Login() {
  return <h1 className={styles.blog}>Inicio de sesión</main>
}

Nota: Los .module.css NO permiten selectores globales, como h1, p, input, sino la definicion de clases.

CSS Global._

Si nuestra aplicación a realizar es pequeña, cuenta con pequeños componentes o módulos, lo recomendable podría ser utilizar una hoja de estilos CSS global para todo nuestro proyecto.

Para ello, necesitamos crear un archivo .css dentro de nuestro directorio src/app/:

|-.next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-global.css
|- ...Otros archivos...

Nota: Por lo generar, solemos llamar a este archivo como global.css, para una mejor comprensión.

A continuación, debemos importar el archivo de estilos CSS global.css en nuestro layout.tsx,

Agregando el código:

import './global.css'

Tal cual como seria el siguiente ejemplo de código completo dentro de layout.tsx:

// Este archivo de estilos css se aplica global al proyecto 
import './global.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Nota: Al utilizar CSS Global todas nuestras rutas tendrán los estilos CSS importados en global.css.

StyleSheets Externas._

Las hojas de estilo publicadas por paquetes externos se pueden importar en cualquier lugar del directorio, incluidos los componentes colocados: app

Supongamos que tenemos los estilos de Bootstrap, y deseamos utilizarlos, para ello, bastaría con:

Colocar el directorio de estilos de Bootstrap dentro de nuestro directorio src/app/.
Importar en el layout.tsx la hoja de estilos CSS.

Tal como el código siguiente:

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

Tailwind CSS._

Tailwind CSS es un framework de CSS, que nos permite agregar estilos de una manera rápida, definiendo únicamente clases, las cuales han sido estilizadas ya.

Recordemos que al inicio de la creación de nuestro proyecto, Next.js, nos permitió la instalación de este framework, por lo que en dado caso de necesitarlo y haberlo instalado, podemos utilizarlo de manera directa.

En caso de no haberlo hecho y necesitarlo, debemos instalar su dependencia, ejecutando, dentro de nuestro proyecto:

npm install -D tailwindcss @tailwindcss/postcss postcss

Para comprobar su correcta instalación1, deberiamos visualizar en nuestro archivo postcss.config.mjs un codigo similar a:

const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;

Nota: De esta manera, sabremos que el plugin de Tailwind CSS esta listo para utilizarse.

Seguido de ello, dentro de nuestro archivo global.css debemos colocar la importación:

@import 'tailwindcss';

Nota: NO olvidemos importar el global.css en el layout.tsx. y si no los tienes, crealos.

Seguido, podremos utilizar cualquier clase de Tailwind CSS en cualquier componente de nuestro proyecto.

export default function Home () {
  return (
    <h1 className="text-3xl font-bold underline">Home</h1>
  );
}

⬅ Anterior Menú Siguiente ➡