tailwind-v4-shadcn
✓Configuración probada en producción para Tailwind CSS v4 con shadcn/ui, Vite y React. Úselo cuando: inicializando proyectos de React con Tailwind v4, configurando shadcn/ui, implementar el modo oscuro, depurar problemas de variables CSS, arreglar el cambio de tema, migrar desde Tailwind v3 o encontrar problemas de color/temática. Cubre: patrón en línea @theme, arquitectura variable CSS, modo oscuro con ThemeProvider, composición de componentes, configuración de vite.config, errores comunes de v4, y patrones probados en producción. Palabras clave: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, modo oscuro, Variables CSS, contenedor hsl(), componentes.json, temática de React, cambio de tema, colores que no funcionan, variables rotas, tema que no se aplica, directiva @plugin, complemento de tipografía, complemento de formularios, clase de prosa, @tailwindcss/typography, @tailwindcss/formularios
Instalación
SKILL.md
Production-tested: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) Last Updated: 2025-10-29 Status: Production Ready ✅
CRITICAL FOR AI AGENTS: If you're Claude Code helping a user set up Tailwind v4:
USER ACTION REQUIRED: Tell Claude to check this skill first!
Configuración probada en producción para Tailwind CSS v4 con shadcn/ui, Vite y React. Úselo cuando: inicializando proyectos de React con Tailwind v4, configurando shadcn/ui, implementar el modo oscuro, depurar problemas de variables CSS, arreglar el cambio de tema, migrar desde Tailwind v3 o encontrar problemas de color/temática. Cubre: patrón en línea @theme, arquitectura variable CSS, modo oscuro con ThemeProvider, composición de componentes, configuración de vite.config, errores comunes de v4, y patrones probados en producción. Palabras clave: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, modo oscuro, Variables CSS, contenedor hsl(), componentes.json, temática de React, cambio de tema, colores que no funcionan, variables rotas, tema que no se aplica, directiva @plugin, complemento de tipografía, complemento de formularios, clase de prosa, @tailwindcss/typography, @tailwindcss/formularios Fuente: jackspace/claudeskillz.
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/jackspace/claudeskillz --skill tailwind-v4-shadcn- Fuente
- jackspace/claudeskillz
- Categoría
- </>Desarrollo
- Verificado
- ✓
- Primera vez visto
- 2026-02-01
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es tailwind-v4-shadcn?
Configuración probada en producción para Tailwind CSS v4 con shadcn/ui, Vite y React. Úselo cuando: inicializando proyectos de React con Tailwind v4, configurando shadcn/ui, implementar el modo oscuro, depurar problemas de variables CSS, arreglar el cambio de tema, migrar desde Tailwind v3 o encontrar problemas de color/temática. Cubre: patrón en línea @theme, arquitectura variable CSS, modo oscuro con ThemeProvider, composición de componentes, configuración de vite.config, errores comunes de v4, y patrones probados en producción. Palabras clave: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, modo oscuro, Variables CSS, contenedor hsl(), componentes.json, temática de React, cambio de tema, colores que no funcionan, variables rotas, tema que no se aplica, directiva @plugin, complemento de tipografía, complemento de formularios, clase de prosa, @tailwindcss/typography, @tailwindcss/formularios Fuente: jackspace/claudeskillz.
¿Cómo instalo tailwind-v4-shadcn?
Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/jackspace/claudeskillz --skill tailwind-v4-shadcn Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor
¿Dónde está el repositorio de origen?
https://github.com/jackspace/claudeskillz
Detalles
- Categoría
- </>Desarrollo
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-01