tailwind-advanced-patterns
Advanced Tailwind CSS patterns including custom themes, responsive design, dark mode, animations, and component variants. Use for complex styling or design system implementation. Use when this capability is needed.
Datos de origen
- Repositorio
- tomevault-io/skills-registry
- Última actividad en el origen
- 28 de abril de 2026 a las 22:53
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 1
- Forks
- 0
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Explorador de archivos
2 archivosMostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- name
- tailwind-advanced-patterns
- description
- Advanced Tailwind CSS patterns including custom themes, responsive design, dark mode, animations, and component variants. Use for complex styling or design system implementation. Use when this capability is needed.
- metadata
- {"author":"ak-eyther"}
# Tailwind Advanced Patterns
## Custom Theme
```javascript
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
500: '#0ea5e9',
900: '#0c4a6e',
},
},
fontFamily: {
sans: ['Inter', 'system-ui'],
},
},
},
}
```
## Dark Mode
```typescript
// app/layout.tsx
export default function Layout({ children }) {
return (
<html className="dark">
<body className="bg-white dark:bg-gray-900">
{children}
</body>
</html>
)
}
// Component with dark mode
function Card() {
return (
<div className="bg-white dark:bg-gray-800
text-gray-900 dark:text-white">
Content
</div>
)
}
```
## Responsive Design
```typescript
function ResponsiveGrid() {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{/* Cards */}
</div>
)
}
```
## Custom Animations
```javascript
// tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
'fade-in': 'fadeIn 0.5s ease-in',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
},
},
},
}
```
## Component Variants with clsx
```typescript
import clsx from 'clsx'
interface ButtonProps {
variant: 'primary' | 'secondary'
size: 'sm' | 'md' | 'lg'
}
function Button({ variant, size }: ButtonProps) {
return (
<button
className={clsx(
'rounded font-medium',
{
'bg-blue-500 text-white': variant === 'primary',
'bg-gray-200 text-gray-900': variant === 'secondary',
'px-2 py-1 text-sm': size === 'sm',
'px-4 py-2 text-base': size === 'md',
'px-6 py-3 text-lg': size === 'lg',
}
)}
>
Click me
</button>
)
}
```
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/ak-eyther) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->
Ver en GitHub