Ejecutar Next.js con TailwindCSS

Introducción

Este tutorial muestra cómo instalar Next.js en combinación con TailwindCSS para crear una configuración inicial para varios proyectos frontend.

Next.js es un framework frontend de ReactJS que ofrece numerosas funciones útiles. No solo funciona como generador de sitios estáticos, sino que también cuenta con estrategias avanzadas para obtener datos de diversas fuentes y mostrar contenido dinámico.

TailwindCSS es un framework CSS que prioriza la funcionalidad al aplicar nombres de clases CSS. Es una forma eficiente de crear diseños modernos sin preocuparse por las convenciones de nomenclatura.

Requisitos previos

• Sistema con MacOS, Windows o Linux
• Están instaladas las últimas versiones de Node.js y npm.

Paso 1 – Instalar Next.js

Puede instalar Next.js automáticamente o manualmente.

• Automáticamente:

npx create-next-app my-project [--use-npm]

• A mano:

mkdir ~/my-project && cd ~/my-project
npm install next react react-dom

Después de instalar Next.js, edite el nuevo archivo ~/my-project/package.json y agregue la sección “script” como se muestra aquí:

{
"dependencies": {
<your_dependencies>
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}

Paso 2: Instalar TailwindCSS

TailwindCSS utiliza PostCSS como preprocesador y AutoPrefix como dependencia adicional. Esto es opcional, pero recomendable, ya que Tailwind ofrece algunas funciones útiles al usar estos plugins, por ejemplo, el uso de palabras clave no estándar como @apply, @theme o theme(), que pueden usarse en nuestro archivo CSS personalizado.

cd ~/my-project
npm install -D tailwindcss postcss autoprefixer

Después de eso, podemos crear un archivo de configuración para TailwindCSS:

npx tailwindcss init -p

Esto creará tailwind.config.js y postcss.config.js.

Paso 3 – Configurar Next.js

Para definir rutas para nuestra aplicación, simplemente podemos agregar archivos JavaScript adicionales al directorio de la aplicación. En este tutorial, nos centraremos en páginas que no se generan dinámicamente. Esto se debe a que, en muchos casos, es necesario generar rutas utilizando datos dinámicos; por ejemplo, crear rutas basadas en un ID. Puede encontrar una excelente guía sobre cómo lograr esto en la documentación de Next.js (asegúrese de que el menú esté configurado en "Usar enrutador de aplicación").

Agregar páginas

Para crear páginas, necesitas un subdirectorio llamado app. Dentro de la app, necesitas dos archivos:

Además, puede agregar tantos subdirectorios como desee. Cada subdirectorio, con un archivo page.tsx, representa una subpágina para su aplicación.

En este tutorial utilizaremos el siguiente ejemplo:

app/
├── layout.tsx # layout of main page and all subpages
├── page.tsx # content main page
└── example-subpage/
├── layout.tsx # additional layout requirements for example-subpage
└── page.tsx # content example-subpage

Este ejemplo nos da dos páginas:

http://<ip-address>:3000 # main page
http://<ip-address>:3000/example-subpage # subpage

Si instaló Next.js manualmente, cree el directorio de archivos de la aplicación:

mkdir ~/my-project/app

Ahora puedes agregar contenido a tus páginas:

• Página de inicio

nano ~/my-project/app/page.tsx

Utilice este contenido para la página de inicio:

// ~/my-project/app/page.tsx
export default function Page() {
return <h1 className="text-white text-3xl font-bold pl-5">Welcome to Next.js and TailwindCSS</h1>
}

• Subpágina

Agregue un nuevo subdirectorio para la subpágina y cree page.tsx:

mkdir ~/my-project/app/example-subpage
nano ~/my-project/app/example-subpage/page.tsx

Utilice este contenido para la subpágina:

// ~/my-project/app/example-subpage/page.tsx
export default function Page () {
return (
<>
<div className="flex flex-col place-content-center items-center col-span-1 pr-3">
<div className="border-2 rounded-full p-0.5 border-gray-600 mb-2">
<img
className="rounded-full w-100 h-100"
src="https://picsum.photos/100/100"
alt="random image from unsplash"
/>
</div>
</div>
<div className="col-span-5 pr-3">
<h2 className="text-white text-3xl font-semibold pl-4 mb-3">Welcome to Next.js and TailwindCSS</h2>
<span className="text-gray-500 text-lg font-bold block pl-4 mb-3">Bringing both frameworks together</span>
<p className="text-white pl-4 leading-7">
Cats are believed to be the only mammals who don't taste sweetness. Cats are nearsighted, but their peripheral
vision and night vision are much better than that of humans. Cats are supposed to have 18 toes (five toes on
each front paw; four toes on each back paw). Cats can jump up to six times their length.
</p>
</div>
</>
)
}

Agregar diseño (TailwindCSS)

Ahora que tenemos el contenido de nuestras páginas, podemos agregar el diseño en el que se deben mostrar las páginas.

• Diseño general de la página de inicio y todas las subpáginas

Como se mencionó anteriormente, el diseño definido en app/layout.js se aplica automáticamente a la página principal y a todas las subpáginas.

Elija una de estas dos opciones para incluir TailwindCSS:

• Alternativa 1: Vía JavaScript

Esta es una forma conveniente de agregar TailwindCSS sin tener que escribir hojas de estilo adicionales.

nano ~/my-project/app/layout.tsx

Utilice este contenido:

// ~/my-project/app/layout.tsx
import 'tailwindcss/tailwind.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<html lang="en">
<head>
<title>Next.js and TailwindCSS</title>
<link rel="icon" href="/favicon.ico"/>
</head>
<body className="min-h-screen bg-gradient-to-tr from-midnight-100 via-midnight-200 to-midnight-300 flex flex-col justify-center">{children}</body>
</html>
</>
)
}

• Alternativa 2: Vía CSS

Otra opción es añadir estilos Tailwind mediante CSS. Para ello, importamos la hoja de estilos global al archivo app/layout.tsx.

Crear aplicación/layout.tsx:

nano ~/my-project/app/layout.tsx

Utilice este contenido:

// ~/my-project/app/layout.tsx
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<html lang="en">
<head>
<title>Next.js and TailwindCSS</title>
<link rel="icon" href="/favicon.ico"/>
</head>
<body className="min-h-screen bg-gradient-to-tr from-midnight-100 via-midnight-200 to-midnight-300 flex flex-col justify-center">{children}</body>
</html>
</>
)
}

Crea la hoja global app/global.css:

/* ~/my-project/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Lamentablemente, Tailwind no proporciona una explicación detallada de lo que hace la directiva @tailwind, además de inyectar estilos generados (según la configuración de Tailwind) en la hoja de estilos en el momento de la compilación.

• Diseño personalizado para subpáginas

Cada subpágina tiene su propio archivo de diseño. Si necesita más diseños, puede guardarlos directamente en el archivo de diseño de la subpágina o guardarlos en un directorio específico e importarlos. Guardar especificaciones de diseño adicionales en un directorio específico facilita la reutilización del diseño en varias subpáginas. Por lo tanto, es lógico si necesita el mismo diseño para varias subpáginas.

Crear un directorio para diseños adicionales:

mkdir ~/my-project/components

Crear diseño adicional:

nano ~/my-project/components/FancyCard.js

Añade este contenido:

// ~/my-project/components/FancyCard.js
'use client'
import React from 'react'
const FancyCard = ({ children }) => {
return (
<div className="max-w-xl mx-auto">
<div className="p-8 bg-midnight-200 shadow-xl rounded-3xl border-4 border-gray-600">
<div className="grid grid-cols-6 gap-0 divide-x divide-gray-600">
{children}
</div>
</div>
</div>
)
}
export default FancyCard

Ahora cree el archivo layout.tsx para su subpágina y aplique especificaciones de diseño adicionales:

nano ~/my-project/app/example-subpage/layout.tsx

// ~/my-project/app/example-subpage/layout.tsx
import FancyCard from '../../components/FancyCard'
export default function Layout({ children }) {
return <FancyCard>{children}</FancyCard>
}

Como se mencionó anteriormente, puede agregar más diseños a los componentes según sea necesario e incluirlos en el archivo layout.tsx de cada subpágina que deba usar ese diseño en particular, como se muestra arriba. Si planea usar un diseño solo una vez, puede agregarlo directamente en el archivo layout.tsx de esa subpágina.

Paso 4: Configurar TailwindCSS

El paso final es personalizar los archivos de configuración para Tailwind y PostCSS.

Al ejecutar npx tailwindcss init -p ya hemos creado dos archivos de configuración:

• tailwind.config.js
• postcss.config.js

Si queremos utilizar PostCSS como preprocesador, podemos usar postcss.config.js para funciones adicionales como agregar prefijos de proveedores, agregar restablecimientos CSS globales o crear reglas @font-face.

Otra gran característica de TailwindCSS es que permite personalizar fácilmente el tema predeterminado. Al cambiar la propiedad del tema en tailwind.config.js, podemos realizar personalizaciones, por ejemplo, puntos de interrupción, colores, fuentes o características más detalladas, como el espaciado, el radio del borde o las sombras de los cuadros. Al cambiar la clave de color, podemos añadir nuestra propia paleta de colores personalizada al tema existente:

nano ~/my-project/tailwind.config.js

Añade el siguiente contenido:

// ~/my-project/tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
colors: {
...defaultTheme.colors,
'white': '#ffffff',
'black': '#242424',
'midnight': {
'100': '#03060a',
'200': '#001a40',
'300': '#060b17',
// add more color variants if you want to
},
'gray': {
'500': '#6b7280',
'600': '#4b5563',
},
'purple': {
'500': '#6d28d9',
},
// add more colors if you want to
},
},
plugins: [],
}

Además, ampliamos el esquema de colores predeterminado, por lo que podemos seguir usando la paleta de colores predeterminada de Tailwind. Observe que ahora podemos aplicar nuestros propios colores a múltiples clases de aplicación usando el color definido y su variante correspondiente, bg-{color}-{variant}. Por ejemplo:

<div className="bg-midnight-300">
...
</div>

Paso 5 – Iniciar la aplicación

Ahora que todo está configurado, podemos ejecutar el programa para ver nuestro resultado:

• Para acceder a través de IP privada (localhost):

npm run dev

• Para acceder a través de IP pública:

npm run dev -- -H 0.0.0.0

Abra ambas páginas en un navegador web:

http://<ip-address>:3000http

://<ip-address>:3000/example-subpage

Esto debería verse así:

Resultado

Lanzamos con éxito una aplicación Next.js que utiliza Tailwind como marco CSS.

El uso de frameworks CSS por primera vez genera mucha controversia y, como es habitual, no existe una regla universal. Algunos dicen que es confuso y difícil de leer, que no se diferencia de los estilos en línea o que viola la separación de intereses. Personalmente, creo que todos estos puntos son discutibles y recomiendo los dos artículos siguientes para comprender ambas posturas. Así, podrá determinar si este framework es adecuado para su próximo proyecto.