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.
From ensemble-developmentnpx claudepluginhub fortiumpartners/ensemble --plugin ensemble-developmentThis skill uses the workspace's default tool permissions.
README.mdREFERENCE.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
Target: 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.