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.
/plugin marketplace add 0xDarkMatter/claude-mods/plugin install 0xdarkmatter-claude-mods@0xDarkMatter/claude-modsThis skill is limited to using the following tools:
references/component-patterns.mdQuick reference for Tailwind CSS utility patterns.
| Prefix | Min Width |
|---|---|
sm: | 640px |
md: | 768px |
lg: | 1024px |
xl: | 1280px |
2xl: | 1536px |
<div class="w-full md:w-1/2 lg:w-1/3">
<!-- Full on mobile, half on tablet, third on desktop -->
</div>
<!-- Centered container -->
<div class="container mx-auto px-4">
<!-- Flexbox row -->
<div class="flex items-center justify-between gap-4">
<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Stack -->
<div class="flex flex-col gap-4">
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-lg font-semibold mb-2">Title</h3>
<p class="text-gray-600">Content</p>
</div>
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
Button
</button>
<input type="text"
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">
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
// tailwind.config.js
module.exports = { darkMode: 'class' }
| Modifier | Triggers On |
|---|---|
hover: | Mouse hover |
focus: | Element focused |
active: | Being clicked |
disabled: | Disabled state |
group-hover: | Parent hovered |
| Class | Size |
|---|---|
p-1 | 4px |
p-2 | 8px |
p-4 | 16px |
p-6 | 24px |
p-8 | 32px |
<div class="w-[137px] h-[calc(100vh-64px)]">
For detailed patterns, load:
./references/component-patterns.md - Navbar, cards, forms, alerts, loading statesCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.