·tailwind-v4-shadcn
</>

tailwind-v4-shadcn

✓
ederheisler/agent-skillsGitHub: ederheisler/agent-skillsFuente: ederheisler/agent-skills

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.

ederheisler·tailwind·v4·shadcn
9Instalaciones·1Tendencia·@ederheisler

Instalación

GitHub: ederheisler/agent-skills
$npx skills add https://github.com/ederheisler/agent-skills --skill tailwind-v4-shadcn

Cómo instalar tailwind-v4-shadcn

Instala rápidamente el skill de IA tailwind-v4-shadcn en tu entorno de desarrollo mediante línea de comandos

  1. Abrir Terminal: Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.)
  2. Ejecutar comando de instalación: Copia y ejecuta este comando: npx skills add https://github.com/ederheisler/agent-skills --skill tailwind-v4-shadcn
  3. Verificar instalación: 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, Cursor u OpenClaw

Fuente: ederheisler/agent-skills.

SKILL.md

Ver original

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: ederheisler/agent-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/ederheisler/agent-skills --skill tailwind-v4-shadcn
Fuente
ederheisler/agent-skills
Categoría
</>Desarrollo
Verificado
✓
Primera vez visto
2026-02-25
Actualizado
2026-03-10
URL
https://www.learn-skills.dev/es/skills/ederheisler/agent-skills/tailwind-v4-shadcn

Browse more skills from ederheisler/agent-skills

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: ederheisler/agent-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/ederheisler/agent-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, Cursor u OpenClaw

¿Dónde está el repositorio de origen?

https://github.com/ederheisler/agent-skills

Detalles

Categoría
</>Desarrollo
Fuente
skills.sh
Primera vez visto
2026-02-25

Skills Relacionados

ask-questions-if-underspecified
10 Instalaciones
brainstorming
10 Instalaciones
canvas-design
10 Instalaciones
dispatching-parallel-agents
10 Instalaciones
executing-plans
10 Instalaciones
fastapi
10 Instalaciones