Next.js Tailwind CSS

En un proyecto Next.js, usar Tailwind CSS es una opción muy popular, ya que proporciona un método basado en utilidades para escribir CSS, lo que te permite aplicar estilos directamente en los nombres de clase. Este método hace que la escritura de estilos sea más concisa e intuitiva.

Tutorial de Tailwind CSS:https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Sitio oficial de Tailwind CSS:https://tailwindcss.com/

Dirección de GitHub:https://github.com/tailwindlabs/tailwindcss

Tailwind CSS es un potente framework de CSS que hace que la escritura de estilos sea más concisa y modular mediante un método basado en utilidades. A diferencia de los frameworks CSS tradicionales basados en clases, Tailwind proporciona un conjunto de clases de utilidad de bajo nivel que se pueden usar directamente en los elementos HTML para crear diseños personalizados de forma rápida y flexible.

A continuación se muestran los pasos detallados para usar Tailwind CSS en un proyecto Next.js.

1. Instalar Tailwind CSS

Si estás creando un nuevo proyecto Next.js desde cero, puedes usar create-react-app; si ya tienes un proyecto React existente, puedes omitir los pasos de creación del proyecto.

Crear un nuevo proyecto Next.js:

npx create-next-app@latest my-next-app

Al crearlo, se te preguntará si deseas instalar Tailwind CSS; podemos elegir Yes:

...
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
...

Instalar Tailwind CSS

También puedes ejecutar el siguiente comando en el directorio de tu proyecto para instalar Tailwind CSS y sus dependencias necesarias:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Esto creará un archivo tailwind.config.ts y un archivo postcss.config.mjs.

2. Configurar Tailwind CSS

En el archivo de configuración de Tailwind tailwind.config.ts, agrega las rutas de los archivos que usarán los nombres de clase de Tailwind.

Generalmente, por defecto ya está configurado, no necesitamos modificarlo:

Ejemplo

import type { Config } from "tailwindcss";

export default {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",  // Nota: se agregó el directorio app.
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
    },
  },
  plugins: [],
} satisfies Config;

No necesitamos modificar el archivo postcss.config.mjs.

3. Agregar los estilos base de Tailwind

Agrega las directivas de Tailwind CSS a la hoja de estilos global de la aplicación; Tailwind usará estas directivas para inyectar los estilos que genera.

En tu proyecto, abre el archivo app/globals.css y agrega el siguiente contenido para incluir los estilos base, los estilos de componentes y los estilos de utilidades de Tailwind:

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

En el diseño raíz app/layout.tsx, importa la hoja de estilos globals.css para aplicar los estilos a cada ruta de la aplicación:

Ejemplo

// app/layout.tsx
// Estos estilos se aplicarán a cada ruta de la aplicación
import './globals.css'

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

4. Usar Tailwind CSS para escribir estilos

Después de instalar Tailwind CSS y agregar los estilos globales, puedes usar las clases de utilidad de Tailwind en la aplicación:

Código del archivo app/page.tsx:

// app/page.tsx
export default function Home() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg shadow-lg">
        <h1 className="text-2xl font-bold text-gray-900">Hello, EJEMPLO!</h1>
        <p className="mt-4 text-gray-600">¡Tutorial para novatos, lo que se aprende no es solo tecnología, sino también sueños!</p>
        <button className="mt-6 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
Haz clic para probar
        </button>
      </div>
    </div>
  );
}

Ejecutar:

npm run dev

Luego abre tu navegador y navega a http://localhost:3000; deberías ver una sencilla aplicación React con estilos de Tailwind CSS.

Con los pasos anteriores, has integrado correctamente Tailwind CSS en un proyecto Next.js y lo has usado para escribir estilos. Los nombres de las clases de utilidad de Tailwind CSS te permiten agregar estilos a tus componentes rápidamente, manteniendo el código de estilos limpio y modular.

Otras extensiones