Provides utility-first CSS styling patterns using Tailwind CSS 3.x. Use when styling components with utility classes, configuring tailwind.config.js, implementing responsive designs, or creating dark mode themes.
Provides Tailwind CSS 3.x utility classes for styling components, configuring themes, and implementing responsive designs. Use when building UI with utility classes, setting up responsive breakpoints, or configuring dark mode.
/plugin marketplace add FortiumPartners/ensemble/plugin install ensemble-development@ensembleThis skill inherits all available tools. When active, it can use any tool Claude has access to.
README.mdREFERENCE.mdTarget: Tailwind CSS 3.4+ | Purpose: Utility-first CSS styling reference
What is Tailwind CSS: A utility-first CSS framework that provides low-level utility classes to build custom designs directly in markup.
When to Use This Skill:
tailwind.config.jsPrerequisites: Node.js 14.0+ (for build tools)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx,html}", "./index.html"],
theme: { extend: {} },
plugins: [],
}
CSS Entry Point:
@tailwind base;
@tailwind components;
@tailwind utilities;
| Pattern | Example | Result |
|---|---|---|
m-{size} | m-4 | margin: 1rem |
p-{size} | p-8 | padding: 2rem |
mx-auto | mx-auto | center horizontally |
space-x-{size} | space-x-4 | horizontal gap between children |
Scale: 0=0px, 1=0.25rem, 2=0.5rem, 4=1rem, 8=2rem, 16=4rem
Format: {property}-{color}-{shade}
<div class="bg-blue-500 text-white border-gray-300">
Properties: text-, bg-, border-, ring-, divide-
Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
| Class | Effect |
|---|---|
text-sm/base/lg/xl/2xl | Font size |
font-normal/medium/semibold/bold | Font weight |
text-left/center/right | Text alignment |
truncate | Ellipsis overflow |
line-clamp-{1-6} | Multi-line truncation |
| Pattern | Example |
|---|---|
w-full, w-1/2, w-64 | Width |
h-screen, h-48 | Height |
max-w-sm/md/lg/xl | Max width |
size-10 | Width + height together |
<div class="flex flex-row items-center justify-between gap-4">
<!-- children -->
</div>
| Class | Effect |
|---|---|
flex / flex-col | Enable flexbox, set direction |
items-center | Vertical alignment |
justify-between | Horizontal distribution |
gap-4 | Gap between items |
flex-1 | Grow to fill space |
shrink-0 | Prevent shrinking |
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2">Wide</div>
<div>Normal</div>
</div>
| Class | Effect |
|---|---|
grid-cols-{1-12} | Column count |
col-span-{1-12} | Span columns |
gap-{size} | Gap between cells |
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
| Prefix | Min-Width |
|---|---|
sm: | 640px |
md: | 768px |
lg: | 1024px |
xl: | 1280px |
2xl: | 1536px |
<!-- Stack on mobile, row on tablet+ -->
<div class="flex flex-col md:flex-row gap-4">
<!-- Hide on mobile, show on desktop -->
<div class="hidden lg:block">Desktop only</div>
<!-- Responsive text -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 active:bg-blue-700">
| Prefix | Trigger |
|---|---|
hover: | Mouse over |
focus: | Element focused |
active: | Being clicked |
disabled: | Disabled element |
<!-- Group: parent state affects children -->
<div class="group hover:bg-gray-100">
<span class="group-hover:text-blue-500">Hover parent</span>
</div>
<!-- Peer: sibling state affects element -->
<input class="peer" type="checkbox" />
<label class="peer-checked:text-green-500">Checked!</label>
// tailwind.config.js
module.exports = {
darkMode: 'class', // or 'media' for OS preference
}
<html class="dark">
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
module.exports = {
theme: {
extend: {
colors: {
brand: { 500: '#3b82f6', 900: '#1e3a8a' },
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
},
}
See REFERENCE.md for advanced configuration (custom screens, container, presets, plugins).
<button class="
px-4 py-2
bg-blue-500 hover:bg-blue-600
text-white font-medium rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-300
disabled:opacity-50 disabled:cursor-not-allowed
transition-colors
">
Button
</button>
<div class="
bg-white dark:bg-gray-800
rounded-xl shadow-lg p-6
border border-gray-200 dark:border-gray-700
">
<h3 class="text-xl font-semibold">Title</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">Description</p>
</div>
See REFERENCE.md for more component patterns (input, navigation, badge, modal).
Extract repeated utilities into custom classes:
@layer components {
.btn {
@apply px-4 py-2 rounded-lg font-medium transition-colors;
}
.btn-primary {
@apply btn bg-blue-500 text-white hover:bg-blue-600;
}
}
When to Use: Repeated utility combinations, component libraries When to Avoid: One-off styles (use inline utilities)
Use brackets for one-off custom values:
<div class="w-[137px]">Exact width</div>
<div class="bg-[#1da1f2]">Custom color</div>
<div class="grid-cols-[1fr_500px_2fr]">Custom columns</div>
content arraybg-${color}-500 won't work// DON'T
className={`bg-${color}-500`}
// DO
const colorClasses = { blue: 'bg-blue-500', red: 'bg-red-500' };
className={colorClasses[color]}
SPACING: m-4 p-4 mx-auto space-x-4 gap-4
SIZING: w-full h-screen max-w-xl size-10
FLEX: flex flex-col items-center justify-between flex-1
GRID: grid grid-cols-3 col-span-2 gap-4
TEXT: text-lg font-bold text-center truncate
COLORS: bg-blue-500 text-white border-gray-300
BORDERS: border rounded-lg border-2
SHADOWS: shadow-sm shadow-lg
POSITION: absolute relative fixed sticky top-0 z-50
RESPONSIVE: sm: md: lg: xl: 2xl:
STATES: hover: focus: active: disabled: dark:
TRANSITIONS: transition duration-200
See Also: REFERENCE.md for:
See Also: REFERENCE.md for comprehensive documentation.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.