Search the docs, videos, blog, apps, teams, skills and release notes.
At a glance
What it is
Tailwind CSS design system expertise covering custom theme configuration, component extraction, responsive design patterns, dark mode, animation utilities, plugin development, integration with component libraries, and JIT optimization.
A skill is a written procedure a bot loads when a job calls for it. This one is a single file, SKILL.md, and the whole file is on this page.
The whole file, exactly as it downloads. Read it before you rely on it.
SKILL.md
337 lines · 1,249 words
Build cohesive, maintainable design systems using Tailwind CSS. This skill covers theme configuration, component patterns, responsive strategies, dark mode implementation, custom plugins, and integration with component libraries.
Tailwind CSS design system expertise covering custom theme configuration, component extraction, responsive design patterns, dark mode, animation utilities, plugin development, integration with component libraries, and JIT optimization.
Nothing. It ships with Murage, which is open source. Your bots run on the AI plan you already have.
Yes. Open it in Settings → Skills to read, edit or duplicate it. Skill Guard scans it again after every edit.
Download the app, connect the AI you already pay for, and tell your Chief of Staff what needs doing. Plan on about ten minutes from install to a working team.
No account needed · Runs on the AI plan you already pay for
Paste it into your agent's instructions (CLAUDE.md, AGENTS.md or a custom GPT), or add it to a bot in Murage.
Ask Ember for the bot, then switch the skill on in its settings.
Step 1
Send your Chief of Staff this message. It proposes the bot and its role first, and creates it when you say go.
Send this to Ember
“Create a bot that uses the Tailwind Designer skill, and show me the plan first.”
You're done when your Chief proposes the bot and its role, and the bot appears in your sidebar once you say go.
Step 2
You're done when you see the bot’s skills and the library.
Step 3
You're done when the skill shows as on for that bot.
Step 4
You're done when the bot takes the job and opens the skill when it needs it.
Prefer to do it yourself? Choose + in the sidebar, then New Bot.Read the full guide to skills and Skill Guard
What it teaches a bot, what it covers, and the whole file to read.
What it covers
Purpose
Theme Configuration
Component Extraction Patterns
Responsive Design Patterns
Dark Mode
Animation Utilities
Plugin Development
Integration with Component Libraries
Tailwind Performance Tips
Tailwind Architecture Checklist
When to Use
Output Format
Example
Edge Cases
import type { Config } from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme';
const config: Config = {
content: [
'./src/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
darkMode: 'class', // or 'media' for OS-level
theme: {
// Supersede defaults completely
screens: {
sm: '640px',
md: '768px',
# ... (condensed) ...
require('tailwindcss-animate'),
],
};
export default config;EXTRACT into a component when:
- Same utility pattern appears 3+ times
- Pattern has 5+ utilities (readability)
- Pattern requires conditional logic
- Pattern needs props/variants
DO NOT extract when:
- Pattern is used once or twice
- Utilities are simple and readable inline
- Extraction would reduce flexibility// Pattern 1: Variant-based component with cva (class-variance-authority)
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
// Base styles (always applied)
'inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
primary: 'bg-brand-500 text-white hover:bg-brand-600 active:bg-brand-700',
secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300',
outline: 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 active:bg-gray-100',
ghost: 'text-gray-700 hover:bg-gray-100 active:bg-gray-200',
# ... (condensed) ...
return twMerge(clsx(inputs));
}
// Usage: cn('px-4 py-2', condition && 'bg-blue-500', className)
// twMerge handles conflicts: cn('px-2', 'px-4') -> 'px-4'const cardVariants = cva(
'rounded-xl border transition-shadow',
{
variants: {
variant: {
default: 'border-gray-200 bg-white shadow-sm',
elevated: 'border-gray-200 bg-white shadow-soft hover:shadow-md',
outlined: 'border-gray-300 bg-transparent',
filled: 'border-transparent bg-gray-50',
},
padding: {
none: '',
sm: 'p-4',
md: 'p-6',
# ... (condensed) ...
}
function CardFooter({ className, children }: CardSectionProps) {
return <div className={cn('mt-6 flex items-center gap-3', className)}>{children}</div>;
}// Mobile-first responsive layout
<div className="
grid grid-cols-1 gap-4
sm:grid-cols-2
lg:grid-cols-3
xl:grid-cols-4
">
{items.map(item => <Card key={item.id} item={item} />)}
</div> .// Responsive sidebar layout
<div className="flex min-h-screen">
<aside className="
hidden lg:block
# ... (condensed) ...
// Responsive spacing
<section className="px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
Content
</section>// Theme toggle component
'use client';
import { useTheme } from 'next-themes';
function ThemeToggle() {
const { theme, setTheme } = useTheme();
return (
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
{theme === 'dark' ? <SunIcon /> : <MoonIcon />}
</button>
);
}
// Dark mode utility patterns
# ... (condensed) ...
// Usage: no dark: prefix needed
<div className="bg-surface-primary text-content-primary">
Always correct for current theme
</div>// Entrance animations
<div className="animate-fade-in">Fade in content</div>
<div className="animate-slide-up">Slide up content</div> .// Conditional animation
<div className={cn(
'transition-all duration-300',
isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'
)}>
Animated content
</div> .// Staggered animation with style variable
{items.map((item, i) => (
# ... (condensed) ...
// Reduce motion
<div className="animate-slide-up motion-reduce:animate-none motion-reduce:opacity-100">
Respects user preference
</div>// tailwind.config.ts plugin
import plugin from 'tailwindcss/plugin';
const customPlugin = plugin(
function ({ addComponents, addUtilities, addBase, theme, matchUtilities }) {
// Add base styles
addBase({
'html': { scrollBehavior: 'smooth' },
'@media (prefers-reduced-motion: reduce)': {
'html': { scrollBehavior: 'auto' },
},
});
// Add components
# ... (condensed) ...
},
}
);
export default customPlugin;// shadcn/ui uses Tailwind + Radix UI + cva
// components.json configures paths and style
{
"style": "new-york",
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/app/globals.css",
"baseColor": "zinc",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
# ... (condensed) ...
// ... other variants
},
},
}
);1. CONTENT CONFIGURATION
- Ensure content paths are specific (not overly broad globs)
- Exclude node_modules, test files if not using Tailwind classes
2. AVOID DYNAMIC CLASS CONSTRUCTION
BAD: `bg-${color}-500` (Tailwind can't detect this)
GOOD: Use a mapping object with full class names
const colorMap = {
blue: 'bg-blue-500',
red: 'bg-red-500',
};
3. USE @apply SPARINGLY
Only in global stylesheets for elements you can't add classes to
Prefer component extraction over @apply
4. SAFELIST ONLY WHEN NECESSARY
safelist: ['bg-blue-500', 'bg-red-500'] // For dynamic classes
5. TAILWIND MERGE FOR Supersedes
Use cn() (clsx + tailwind-merge) to handle class conflicts
cn('px-4', 'px-6') -> 'px-6' (not 'px-4 px-6')Theme configured with brand colors, typography, spacing scale
Dark mode strategy selected (class or media)
Semantic color variables reduce dark: prefix repetition
Component extraction uses cva for variant management
cn() utility (clsx + tailwind-merge) available project-wide
Responsive design follows mobile-first approach
Container queries used for component-level responsiveness
Animation utilities defined for common entrance/exit patterns
prefers-reduced-motion respected with motion-reduce:
Plugins used for repeated patterns (typography, forms, container queries)
Content paths are precise (no over-scanning)
No dynamic class construction (use mapping objects)
Z-index scale defined in theme configuration
Focus styles consistent across all interactive elements
@apply usage minimal (prefer component extraction)
Use this skill when:
Designing or implementing tailwind designer solutions
Reviewing or improving existing tailwind designer approaches
Making architectural or implementation decisions about tailwind designer
Learning tailwind designer patterns and best practices
Troubleshooting tailwind designer-related issues
Do NOT use this skill when:
The question is about a fundamentally different technology domain
A more specific sibling skill covers the exact topic needed
The user needs a complete hands-on tutorial rather than expert guidance
# Tailwind Designer Analysis
## Context Assessment
[Situation summary and constraints]
## Recommended Approach
[Primary recommendation with rationale]
## Implementation Steps
1. [Step with specific details]
2. [Step with specific details]
3. [Step with specific details]
## Trade-offs and Considerations
- [Key trade-off 1]
- [Key trade-off 2]
## Next Steps
- [Immediate action item]
- [Follow-up action item]Input: "Help me implement tailwind designer for a medium-scale production application"
Output: A structured analysis covering current state assessment, recommended tailwind designer approach with specific patterns, implementation roadmap with milestones, and risk mitigation strategies tailored to the application scale and constraints.
Legacy system integration: When tailwind designer must coexist with legacy approaches, provide a gradual migration path rather than a complete rewrite
Scale mismatch: When the solution complexity exceeds the project scale, recommend a simpler approach and note when to revisit
Team skill gaps: When the team lacks experience with the recommended approach, include learning resources and simpler alternatives
Conflicting requirements: When constraints conflict (e.g., performance vs. maintainability), explicitly state the trade-off and recommend based on stated priorities
SKILL.md
337 lines · 1,249 words
The text of SKILL.md is shown as it downloads, under the Apache-2.0 license, by Ferrox Labs. The license is the one in the file's own frontmatter.
Your new bot
Tailwind Designer bot
Waiting in your sidebar once you say go.
No account needed · Runs on the AI plan you already pay for