Build with Tailwind CSS utility-first framework - configuration, customization, best practices
Provides Tailwind CSS guidance for setup, configuration, utilities, and optimization across frameworks. Triggers when building utility-first styles or configuring Tailwind projects.
/plugin marketplace add pluginagentmarketplace/custom-plugin-css/plugin install css-assistant@pluginagentmarketplace-cssThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/config.yamlassets/schema.jsonreferences/GUIDE.mdreferences/PATTERNS.mdscripts/validate.pyMaster Tailwind CSS utility-first framework with configuration, customization, and production optimization.
This skill provides atomic, focused guidance on Tailwind CSS with v3+ patterns, custom configuration, and purge optimization.
| Property | Value |
|---|---|
| Category | Framework |
| Complexity | Intermediate to Advanced |
| Dependencies | css-fundamentals |
| Bonded Agent | 05-css-preprocessors |
Skill("css-tailwind")
parameters:
topic:
type: string
required: true
enum: [setup, configuration, utilities, components, plugins, optimization]
description: Tailwind topic to explore
framework:
type: string
required: false
enum: [nextjs, vite, react, vue, vanilla]
description: Framework integration
include_examples:
type: boolean
required: false
default: true
description: Include practical code examples
validation:
- rule: topic_required
message: "topic parameter is required"
- rule: valid_topic
message: "topic must be one of: setup, configuration, utilities..."
retry_config:
max_attempts: 3
backoff_type: exponential
initial_delay_ms: 1000
max_delay_ms: 10000
logging:
entry_point: skill_invoked
exit_point: skill_completed
metrics:
- invocation_count
- topic_distribution
- framework_usage
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx,html,vue}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a8a',
},
},
spacing: {
'128': '32rem',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
],
}
<!-- Flexbox centering -->
<div class="flex items-center justify-center">
<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Card component -->
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
<!-- Button -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
<!-- Typography -->
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">
sm: → 640px+
md: → 768px+
lg: → 1024px+
xl: → 1280px+
2xl: → 1536px+
Example: class="text-sm md:text-base lg:text-lg"
<!-- Hover -->
<div class="bg-white hover:bg-gray-50">
<!-- Focus -->
<input class="border focus:ring-2 focus:ring-blue-500">
<!-- Dark mode -->
<div class="bg-white dark:bg-gray-800">
<!-- Group hover -->
<div class="group">
<span class="group-hover:text-blue-500">
</div>
/* Using @apply for component classes */
@layer components {
.btn {
@apply px-4 py-2 rounded-md font-medium transition-colors;
}
.btn-primary {
@apply btn bg-blue-500 text-white hover:bg-blue-600;
}
.btn-secondary {
@apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
}
}
<!-- Arbitrary values with [] -->
<div class="top-[117px]">
<div class="bg-[#1da1f2]">
<div class="w-[calc(100%-2rem)]">
<div class="grid-cols-[1fr_2fr_1fr]">
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
},
}
describe('CSS Tailwind Skill', () => {
test('validates topic parameter', () => {
expect(() => skill({ topic: 'invalid' }))
.toThrow('topic must be one of: setup, configuration...');
});
test('returns framework-specific setup', () => {
const result = skill({ topic: 'setup', framework: 'nextjs' });
expect(result).toContain('next.config');
});
test('includes content paths for configuration', () => {
const result = skill({ topic: 'configuration' });
expect(result).toContain('content:');
});
});
| Error Code | Cause | Recovery |
|---|---|---|
| INVALID_TOPIC | Unknown topic | Show valid options |
| MISSING_CONTENT_PATH | Styles not applying | Check content array |
| PLUGIN_NOT_FOUND | Plugin import error | Verify installation |
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.