tailwind-patterns
Aplica patrones de Tailwind CSS al instante
또한 다음에서 사용할 수 있습니다: sickn33,0xDarkMatter
Los desarrolladores pierden tiempo buscando en la documentación de clases de utilidad de Tailwind. Esta habilidad proporciona acceso instantáneo a breakpoints responsivos, patrones de componentes y ejemplos de configuración directamente en tu flujo de trabajo.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"tailwind-patterns" 사용 중입니다. Muéstrame un componente de tarjeta responsivo con efectos hover
예상 결과:
Una tarjeta responsiva con efecto de sombra al pasar el cursor:
```html
<div class="bg-white rounded-xl shadow-md p-6 hover:shadow-xl transition-shadow duration-300">
<h3 class="text-lg font-semibold text-gray-900">Card Title</h3>
<p class="text-gray-600 mt-2">Card description text goes here.</p>
</div>
```
Clases clave:
- shadow-md → hover:shadow-xl (cambio de elevación al pasar el cursor)
- transition-shadow duration-300 (animación suave)
- rounded-xl (esquinas redondeadas modernas)
- p-6 (padding consistente)
"tailwind-patterns" 사용 중입니다. ¿Cómo centro contenido de forma responsiva?
예상 결과:
Contenedor centrado con padding responsivo:
```html
<div class="container mx-auto px-4">
<div class="flex flex-col items-center justify-center min-h-screen">
<!-- Centered content -->
</div>
</div>
```
Modificadores de breakpoint:
- px-4 se aplica en todos los tamaños
- Usa md:px-8 lg:px-12 para pantallas más grandes
"tailwind-patterns" 사용 중입니다. Crea un input de formulario con estados de focus
예상 결과:
Input de formulario accesible con anillo de focus:
```html
<input type="text"
class="w-full px-4 py-2 border border-gray-300 rounded-lg
focus:ring-2 focus:ring-blue-500 focus:border-transparent
focus:outline-none"
placeholder="Enter text">
```
Estados de focus:
- focus:ring-2 (anillo azul al enfocar)
- focus:border-transparent (elimina el borde por defecto)
- focus:outline-none (elimina el contorno del navegador)
보안 감사
안전All 77 static findings are false positives. The skill contains only markdown documentation with Tailwind CSS code examples. Backticks detected are markdown inline code formatting for utility class names, not shell execution. No executable code, network calls, or cryptographic operations exist in this documentation-only skill.
품질 점수
만들 수 있는 것
Búsqueda rápida de clases CSS
Encuentra instantáneamente la clase de utilidad correcta para padding, márgenes, colores o breakpoints responsivos sin salir de tu IDE.
Referencia de patrones de componentes
Copia componentes preconstruidos de navbar, card, formulario o alerta con las clases Tailwind adecuadas para desarrollo rápido de UI.
Guía de diseño responsivo
Aprende la implementación adecuada de patrones responsivos con breakpoints mobile-first y estrategias de clases condicionales.
이 프롬프트를 사용해 보세요
Muéstrame las clases de Tailwind para un diseño centrado con padding
Necesito una barra de navegación que muestre un menú hamburguesa en móvil y un menú completo en escritorio. Muéstrame las clases responsivas de Tailwind.
Construye un componente de tarjeta con sombra, esquinas redondeadas y efectos hover usando Tailwind CSS. Incluye estados de focus y variantes responsivas.
Muéstrame cómo implementar un botón con soporte de modo oscuro usando Tailwind CSS. Incluye la configuración y el uso de clases.
모범 사례
- Usa el enfoque mobile-first aplicando clases base para pantallas pequeñas, luego añade prefijos responsivos para viewports más grandes.
- Aprovecha la composición de utilidades en lugar de clases CSS personalizadas. Combina utilidades existentes para la mayoría de las necesidades de estilo.
- Aplica focus-visible en lugar de focus para elementos interactivos que deberían mostrar focus solo durante la navegación con teclado.
피하기
- Evita valores arbitrarios como w-[123px] cuando los valores de escala existentes pueden lograr el mismo resultado con consistencia.
- No uses anchos fijos exclusivamente. Prefiere diseños flexibles con restricciones max-w- para mejor capacidad de respuesta.
- Evita el anidamiento excesivo de elementos div solo para aplicar espaciado. Usa gap en contenedores padre en lugar de margin en hijos.