En este tutorial aprenderás a:

• Crear un proyecto con Next.js + TypeScript.
• Integrar TailwindCSS para estilos rápidos y potentes.
• Instalar Storybook para documentar y testear componentes UI.
• Hacer que TailwindCSS funcione dentro de Storybook.

1. Crear el Proyecto Next.js con TypeScript

Primero, genera un nuevo proyecto Next.js usando TypeScript:

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

Te va a dar opciones a escoger para ciertas configuraciones del proyecto:

• ESLint
• TailwindCSS
• Directorio SRC
• App Router
• TurboPack
• Import Alias

Luego de esas respuestas va a instalar las dependencias necesarias e ingresar en el folder del proyecto.

2. Probar que Tailwind Funciona

Abre src/app/page.tsx y reemplázalo por:

export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
      <h1 className="text-5xl font-bold text-white">¡Hola Next.js + Tailwind!</h1>
    </div>
  )
}

Levanta el servidor de desarrollo:

npm run dev

Deberías ver un fondo degradado y un título blanco centrado.

3. Instalar Storybook

Ahora agregamos Storybook para documentar los componentes:

npx storybook init --builder webpack5

Esto instalará Storybook y creará la carpeta .storybook/.

4. Integrar TailwindCSS en Storybook

Para que Storybook también use Tailwind, importa el CSS global en el archivo .storybook/preview.ts:

import '../styles/globals.css'; // Importa estilos de Tailwind
import type { Preview } from "@storybook/react";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

Con esto, todos tus componentes en Storybook podrán usar clases de TailwindCSS.

5. Levantar Storybook

Corre Storybook:

npm run storybook

Se abrirá automáticamente en http://localhost:6006.

Ahora puedes empezar a crear components y stories usando TailwindCSS.

🚀 Próximos pasos

• Crear componentes en components/.
• Escribir archivos .stories.tsx para cada componente.
• Organizar las historias en “Atoms”, “Molecules” y “Organisms” (arquitectura Atomic Design).