Tailwind v4 + shadcn/ui en 2026: el sistema de diseño que funciona

En 2026 el debate "¿librería de componentes o utilidades?" ya no tiene sentido. La respuesta es **Tailwind v4 para utilidades + shadcn/ui para componentes**. No es un trade-off: son dos piezas que encajan. Esta guía explica por qué este combo se ha convertido en el default y cómo encajarlo bien en un SaaS Next.js. ## Tailwind v4: lo nuevo que importa Tailwind v4 (2025) trajo cambios fuertes: - **Engine en Rust** (Lightning CSS): builds ~10x más rápidos - **Configuración en CSS** (no más `tailwind.config.js` salvo edge cases) - **Variables CSS nativas** para tokens del sistema de diseño - **`@theme`** para definir tu paleta directamente en CSS Ejemplo de `globals.css`: ```css @import 'tailwindcss'; @theme { --color-brand: #d62828; --font-display: 'Inter', sans-serif; --radius-card: 0.75rem; } ``` Y en cualquier sitio: ```tsx Click ``` Sin configurar, sin importar nada extra. ## shadcn/ui: ni librería ni boilerplate shadcn/ui es un sistema raro y genial. No es una librería que instalas (npm install). Es **componentes que copias** a tu repo. ```bash bunx shadcn@latest add button bunx shadcn@latest add dialog ``` El comando crea el archivo `src/shared/components/ui/button.tsx` en tu repo. A partir de ahí, es tuyo: lo modificas, lo extiendes, lo borras. No hay update que rompa porque no hay paquete que versione. Ventajas: - Tienes el código fuente, lo controlas - Sin lock-in con la librería - Cero peso de runtime extra - Personalización trivial Desventaja: si un componente se actualiza, tienes que decidir manualmente si quieres mergear los cambios. ## Los dos juntos en un SaaS Mi flujo típico en un nuevo proyecto: 1. **Tailwind v4** instalado y configurado (5 minutos) 2. **shadcn/ui** init: `bunx shadcn@latest init` 3. **Añadir 5-10 componentes core**: Button, Input, Dialog, Tabs, Select, Card, DataTable, Form 4. **Listo**: ya tengo el sistema de diseño base Para componentes específicos del dominio (un BlogPostCard, un ProjectKanbanColumn), los hago yo con Tailwind directamente. Para todo lo "plataforma" (botones, inputs, modales), shadcn/ui. ## Patrón "extender, no copiar" Si necesitas variaciones del Button, no creas BotónPrimario, BotónSecundario, BotónPeligro copiando código. Extiendes: ```tsx import { Button } from '@/shared/components/ui/button'; export function DangerButton(props: React.ComponentProps) { return ; } ``` O añades una variante al `button.tsx` con `cva`. Mantienes una sola fuente. ## Dark mode Tailwind v4 + shadcn/ui traen dark mode integrado. Con `next-themes`: ```tsx import { ThemeProvider } from 'next-themes'; {children} ; ``` Y todos los componentes shadcn ya respetan `dark:` automáticamente. No tienes que escribir CSS extra. ## Errores comunes **1. Mezclar shadcn con MUI / Chakra**: si tienes ya un Material UI a medias, no añadas shadcn encima. Decide uno y migra. Tener dos sistemas duplica todo. **2. Sobre-personalizar `button.tsx`**: si haces 800 líneas de variantes, la idea de "código a mi gusto" se vuelve "código que da miedo tocar". Mantén pequeño. **3. No usar variables CSS para tokens**: si tu marca usa `#D62828` en 47 sitios hardcoded, el día que cambia el rebrand lloras. Defínelo en `@theme`. **4. Olvidar el plugin de Tailwind para Prettier**: sin él, las clases largas se vuelven un infierno. `prettier-plugin-tailwindcss` ordena las clases automáticamente. ## Cuándo NO usar shadcn/ui - Equipo grande con design system propio en producción ya — mantén el vuestro - Aplicación con design exótico (animaciones complejas, layout no estándar) — shadcn es pragmático, no creativo - Necesitas componentes muy específicos (calendarios complejos, gráficos) — usa una librería especializada para esos Para el 90% de SaaS indie, shadcn/ui cubre la base. ## Conclusión Tailwind v4 + shadcn/ui es la combinación con mejor ratio velocidad / control / mantenimiento para SaaS en 2026. Setup en una tarde, control sobre el código, sistema de diseño coherente. Si tu boilerplate todavía usa Bootstrap o MUI, mira shadcn. La diferencia en DX desde el día 1 es notable.