🎯

tailwind-patterns

🎯Skill

from 0xdarkmatter/claude-mods

What it does

Provides quick, practical Tailwind CSS utility class references and responsive design patterns for rapid frontend development.

📦

Part of

0xdarkmatter/claude-mods(36 items)

tailwind-patterns

Installation

Add MarketplaceAdd marketplace to Claude Code

/plugin marketplace add 0xDarkMatter/claude-mods

Install PluginInstall plugin from marketplace

/plugin install claude-mods@0xDarkMatter-claude-mods

git cloneClone repository

git clone https://github.com/0xDarkMatter/claude-mods.git

📖 Extracted from docs: 0xdarkmatter/claude-mods

Need more details? View full documentation on GitHub →

14Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

"Quick reference for Tailwind CSS utility patterns, responsive design, and configuration. Triggers on: tailwind, utility classes, responsive design, tailwind config, dark mode css, tw classes."

Overview

# Tailwind Patterns

Quick reference for Tailwind CSS utility patterns.

Responsive Breakpoints

| Prefix | Min Width |

|--------|-----------|

| sm: | 640px |

| md: | 768px |

| lg: | 1024px |

| xl: | 1280px |

| 2xl: | 1536px |

```html

```

Common Layout Patterns

```html

```

Card

```html

Title

Content

```

Button

```html

```

Form Input

```html

class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"

placeholder="Enter text">

```

Dark Mode

```html

```

```js

// tailwind.config.js

module.exports = { darkMode: 'class' }

```

State Modifiers

| Modifier | Triggers On |

|----------|-------------|

| hover: | Mouse hover |

| focus: | Element focused |

| active: | Being clicked |

| disabled: | Disabled state |

| group-hover: | Parent hovered |

Spacing Scale

| Class | Size |

|-------|------|

| p-1 | 4px |

| p-2 | 8px |

| p-4 | 16px |

| p-6 | 24px |

| p-8 | 32px |

Arbitrary Values

```html

```

Additional Resources

For detailed patterns, load:

./references/component-patterns.md - Navbar, cards, forms, alerts, loading states

More from this repository10

🎯

python-async-patterns🎯Skill

python-async-patterns skill from 0xdarkmatter/claude-mods

🎯

container-orchestration🎯Skill

Automates deployment, scaling, and management of containerized applications across multiple hosts using advanced orchestration strategies and best practices.

🎯

file-search🎯Skill

file-search skill from 0xdarkmatter/claude-mods

🎯

claude-code-debug🎯Skill

claude-code-debug skill from 0xdarkmatter/claude-mods

🎯

find-replace🎯Skill

find-replace skill from 0xdarkmatter/claude-mods

🎯

security-patterns🎯Skill

Provides comprehensive security patterns and OWASP guidelines for preventing common web application vulnerabilities across different programming languages.

🎯

python-pytest-patterns🎯Skill

python-pytest-patterns skill from 0xdarkmatter/claude-mods

🎯

claude-code-templates🎯Skill

claude-code-templates skill from 0xdarkmatter/claude-mods

🎯

testing-patterns🎯Skill

Explores universal testing strategies and patterns, covering test pyramid, types, naming conventions, and test doubles across programming languages.

🎯

python-env🎯Skill

python-env skill from 0xdarkmatter/claude-mods