Para configurar Next.js con Tailwind CSS, sigue estos pasos:

Paso 1: crear un nuevo proyecto Next.js

Si aún no has creado un proyecto Next.js, puedes crear uno usando create-next-app.

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

Paso 2: Instale Tailwind CSS

Dentro de su proyecto Next.js, instale Tailwind CSS junto con sus dependencias requeridas.

npm install -D tailwindcss postcss autoprefixer

Paso 3: inicializar Tailwind CSS

Inicialice Tailwind CSS generando los archivos tailwind.config.js y postcss.config.js.

npx tailwindcss init -p

Esto creará los archivos tailwind.config.js y postcss.config.js en la raíz de su proyecto.

Paso 4: configurar tailwind.config.js

Reemplace el contenido de tailwind.config.js con la siguiente configuración para habilitar Tailwind en los archivos relevantes:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Paso 5: agregue Tailwind CSS a sus archivos CSS

En su proyecto, abra o cree el archivo ./styles/globals.css y agregue las siguientes líneas para importar la base, los componentes y las utilidades de Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Paso 6: ejecute el servidor de desarrollo

Ahora, inicie el servidor de desarrollo para ver Tailwind CSS en acción:

npm run dev

Su proyecto Next.js ahora debería estar configurado con Tailwind CSS. Puede utilizar las clases de utilidad Tailwind en sus componentes para darles estilo.

Uso de ejemplo

Aquí hay un ejemplo del uso de Tailwind CSS en una página Next.js (pages/index.js):

export default function Home() {
  return (
    

      

        Welcome to Next.js with Tailwind CSS!
      
    
  );
}

¡Con esta configuración, ahora puedes comenzar a construir tu aplicación Next.js utilizando el marco CSS de Tailwind, que es la primera utilidad!