Habilidades tailwind-patterns
🎨

tailwind-patterns

Seguro

Construye UIs modernas con Tailwind v4 usando arquitectura CSS-First

También disponible en: 0xDarkMatter,0xDarkMatter

Deja de luchar con la configuración de Tailwind y el diseño responsivo. Esta habilidad proporciona patrones CSS-first, dominio de container queries y arquitectura moderna de tokens de diseño para construir UIs escalables con Tailwind CSS v4.

Soporta: Claude Codex Code(CC)
📊 70 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "tailwind-patterns". Crea un componente de tarjeta con modo oscuro usando container queries

Resultado esperado:

  • .card { @container; background: white; padding: var(--spacing-lg); }
  • .dark .card { background: zinc-900; }
  • @sm { .card-content { grid-template-columns: 1fr 1fr; } }

Usando "tailwind-patterns". Configura tokens de diseño con colores OKLCH

Resultado esperado:

  • @theme {
  • --color-primary: oklch(0.7 0.15 250);
  • --color-surface: oklch(0.98 0 0);
  • --spacing-md: 1rem;
  • }

Auditoría de seguridad

Seguro
v1 • 2/25/2026

Static analysis detected 77 potential issues (backtick execution patterns, weak cryptography, system reconnaissance) but ALL are FALSE POSITIVES. The flagged patterns are markdown code block delimiters (```), inline code formatting, and CSS framework documentation comparing v3 vs v4. No executable code exists - this is documentation-only content for Tailwind CSS v4 patterns.

1
Archivos escaneados
276
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
22
Comunidad
100
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

Migrar Tailwind v3 a v4

Desarrolladores que actualizan de Tailwind v3 a v4 y necesitan reemplazar la configuración JavaScript con la directiva @theme CSS-first

Construir librerías de componentes responsivos

Ingenieros de UI creando componentes reutilizables que se adaptan al tamaño de su contenedor en lugar de breakpoints del viewport

Implementar sistemas de tokens de diseño

Equipos estableciendo escalas semánticas de color, espaciado y tipografía usando OKLCH y variables CSS

Prueba estos prompts

Configuración básica de tema 
Crea una configuración @theme de Tailwind v4 con un color de marca primario, escala de espaciado y font stack para un [project type]
Componente con container query 
Diseña un [component type] responsivo usando container queries que se adapte de contenedores estrechos a anchos
Implementación de modo oscuro 
Implementa modo oscuro para un [page type] usando estrategia [class/media/selector] con tokens de color apropiados
Patrón de layout moderno 
Crea un [layout type] usando [flexbox/grid] con breakpoints responsivos y secciones asimétricas estilo Bento

Mejores prácticas

  • Usa la directiva @theme CSS-first en Tailwind v4 en lugar de tailwind.config.js para mejor rendimiento y soporte nativo de variables CSS
  • Prefiere container queries (@container) para diseño responsivo a nivel de componente sobre breakpoints de viewport para componentes reutilizables e independientes del contexto
  • Organiza tokens de diseño en tres capas: colores primitivos (valores crudos), tokens semánticos (primary, surface) y tokens de componente (button-bg)
  • Usa enfoque mobile-first escribiendo estilos base sin prefijos, luego añadiendo overrides sm:, md:, lg: para pantallas más grandes
  • Extrae componentes cuando las combinaciones de clases se repiten 3+ veces o cuando se necesitan variantes de estado complejas

Evitar

  • Evita valores arbitrarios en todas partes - usa valores de escala del sistema de diseño para consistencia en lugar de números hardcoded como w-[327px]
  • No uses !important para sobreescribir estilos - arregla problemas de especificidad mediante estructura de componentes apropiada y capas CSS
  • Evita atributos de estilo inline - usa clases utility de Tailwind para mantener consistencia del sistema de diseño
  • No mezcles configuración JavaScript v3 con patrones CSS-first v4 - migra completamente a la directiva @theme y configuración basada en CSS
  • Evita uso intensivo de la directiva @apply - prefiere componentes React/Vue para comportamiento dinámico o componentes CSS puros para patrones estáticos

Preguntas frecuentes

¿Cuál es la principal diferencia entre Tailwind v3 y v4?
Tailwind v4 usa configuración CSS-first con la directiva @theme en lugar de tailwind.config.js basado en JavaScript. También incluye el motor Oxide escrito en Rust para compilación 10x más rápida y soporte nativo de características CSS modernas como container queries y CSS nesting.
¿Cuándo debo usar container queries en lugar de breakpoints de viewport?
Usa container queries (@container) para diseño responsivo a nivel de componente cuando construyes componentes reutilizables que deben adaptarse al tamaño de su contenedor padre. Usa breakpoints de viewport (md:, lg:) para layouts a nivel de página que responden al tamaño de pantalla.
¿Qué es OKLCH y por qué debería usarlo para colores?
OKLCH es un formato de color perceptualmente uniforme que proporciona ajustes de color más consistentes y predecibles que HSL o RGB. Es recomendado para tokens de diseño porque asegura luminosidad uniforme y mejor armonía de color en tu sistema de diseño.
¿Necesito un archivo tailwind.config.js en Tailwind v4?
No, el archivo tailwind.config.js es opcional en v4. Puedes configurar todos los tokens de diseño usando la directiva @theme basada en CSS directamente en tus archivos CSS. La configuración JavaScript solo es necesaria para configuraciones avanzadas de plugins o migración legacy de v3.
¿Debería usar @apply o extraer componentes?
Prefiere extraer componentes usando React/Vue/svelte para componentes dinámicos con comportamiento JavaScript. Usa @apply con moderación para componentes estáticos CSS-only cuando necesites reutilizar combinaciones de clases sin overhead de framework.
¿Cómo implemento modo oscuro en Tailwind v4?
Configura modo oscuro usando estrategia class (toggle manual con clase .dark), estrategia media (sigue preferencia del sistema), o estrategia custom selector en v4. Aplica variantes dark con prefijo dark: como dark:bg-zinc-900 dark:text-white.

Detalles del desarrollador

Autor

sickn33

Licencia

MIT

Repositorio

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/tailwind-patterns

Ref.

main

Estructura de archivos

📄 SKILL.md