Ejemplos que acompañan al post "Tailwind: esto no es Bootstrap" del blog de Lemoncode: una guía para entender qué es Tailwind CSS v4, cómo funciona por debajo y cómo guiar (y auditar) a una herramienta IA que lo genere.
Cada carpeta es un proyecto independiente (React + Vite + Tailwind CSS v4) con su propio README:
| Demo | Qué muestra |
|---|---|
| 01-hola-tailwind | El setup mínimo a mano: motor + plugin de Vite + @import "tailwindcss" |
| 02-capas | Capas nativas: por qué una clase fuera de capas "gana" a las utilidades |
| 03-boton-reutilizable | .btn con @apply en @layer components y override con utilidades |
| 04-layout | El grid clásico de Bootstrap (8+4) reconstruido con CSS Grid, mobile first |
| 05-variantes | Estados, responsive, dark: y group-hover: |
| 06-tema | @theme: escala primary propia, alias semánticos y nombrado por rol |
Para arrancar cualquiera:
cd 01-hola-tailwind
npm install
npm run dev