tailwind-v4-shadcn
✓Configure Tailwind v4 con shadcn/ui usando el patrón en línea @theme y la arquitectura variable CSS. Patrón de cuatro pasos: variables CSS, mapeo Tailwind, estilos base, modo oscuro automático. Previene 8 errores documentados. Úselo al inicializar proyectos de React con Tailwind v4, o al corregir colores que no funcionan, errores de tw-animate-css, conflictos de modo oscuro en línea de @theme, interrupción de @apply, problemas de migración de v3.
Instalación
SKILL.md
Production-tested: WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) Last Updated: 2026-01-20 Versions: tailwindcss@4.1.18, @tailwindcss/vite@4.1.18 Status: Production Ready ✅
Critical: Define at root level (NOT inside @layer base). Use hsl() wrapper.
Why: Generates utility classes (bg-background, text-primary). Without this, utilities won't exist.
Configure Tailwind v4 con shadcn/ui usando el patrón en línea @theme y la arquitectura variable CSS. Patrón de cuatro pasos: variables CSS, mapeo Tailwind, estilos base, modo oscuro automático. Previene 8 errores documentados. Úselo al inicializar proyectos de React con Tailwind v4, o al corregir colores que no funcionan, errores de tw-animate-css, conflictos de modo oscuro en línea de @theme, interrupción de @apply, problemas de migración de v3. Fuente: jezweb/claude-skills.
Datos (listos para citar)
Campos y comandos estables para citas de IA/búsqueda.
- Comando de instalación
npx skills add https://github.com/jezweb/claude-skills --skill tailwind-v4-shadcn- Fuente
- jezweb/claude-skills
- Categoría
- </>Desarrollo
- Verificado
- ✓
- Primera vez visto
- 2026-02-01
- Actualizado
- 2026-02-18
Respuestas rápidas
¿Qué es tailwind-v4-shadcn?
Configure Tailwind v4 con shadcn/ui usando el patrón en línea @theme y la arquitectura variable CSS. Patrón de cuatro pasos: variables CSS, mapeo Tailwind, estilos base, modo oscuro automático. Previene 8 errores documentados. Úselo al inicializar proyectos de React con Tailwind v4, o al corregir colores que no funcionan, errores de tw-animate-css, conflictos de modo oscuro en línea de @theme, interrupción de @apply, problemas de migración de v3. Fuente: jezweb/claude-skills.
¿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/jezweb/claude-skills --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/jezweb/claude-skills
Detalles
- Categoría
- </>Desarrollo
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-01