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.
Informações da origem
- Repositório
- tomevault-io/skills-registry
- Última atividade na origem
- 28 de abril de 2026 às 22:53
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 1
- Forks
- 0
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Explorador de arquivos
2 arquivosExibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- 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 no GitHub