Name	Name	Last commit message	Last commit date
parent directory ..
src	src
README.md	README.md
index.html	index.html
package-lock.json	package-lock.json
package.json	package.json
tsconfig.json	tsconfig.json
tsconfig.tsbuildinfo	tsconfig.tsbuildinfo
vite.config.ts	vite.config.ts

Name

Last commit message

Last commit date

06 — El tema: defines un token y te llevas la familia entera

Demo del bloque @theme de Tailwind CSS v4: el tema de una aplicación con nombres semánticos.

Qué se ve en esta demo:

Escala primary completa (50–950) definida con valores propios en @theme — cada variable genera automáticamente toda la familia de utilidades (bg-primary-600, text-primary-950, border-primary-*...) con todas sus variantes.
secondary y semánticos (success, warning, danger) por alias a las paletas de serie (var(--color-teal-600), etc.): no reinventes lo que ya está bien afinado.
Nombrar por rol, no por color: la aplicación escribe bg-primary-600, nunca bg-violet-600. Un rebranding = cambiar valores en el tema, cero cambios en componentes.
Un detalle a mirar en src/App.tsx: las clases de la paleta van escritas completas en un array, nada de `bg-primary-${shade}` — el escáner de Tailwind es textual y las clases construidas dinámicamente no se generan.

npm install
npm run dev

Navigation Menu