🎐 Tailwind CSS Expert
Modern Tailwind CSS patterns, responsive design, and component styling
npx playbooks add skill vudovn/antigravity-kit --skill tailwind-patterns
About Tailwind CSS Expert
Use Tailwind CSS Expert to configure Claude Code, Cursor, or Copilot for frontend development: it modern tailwind css patterns, responsive design, and component styling.
This medium 300-word instruction set is purpose-built for frontend development work in AI coding agents. Install with a single command.
Key Capabilities
- Mobile-first: write base styles, then layer breakpoints
- Use container queries for component-level responsiveness
- Fluid typography with `clamp()` via arbitrary values
- Use `dark:` variant with class strategy or media strategy
- Design both modes intentionally — don't just invert colors
Use Cases
- Building responsive UI components and layouts
- Implementing accessible, WCAG-compliant interfaces
- Debugging CSS, animations, and cross-browser issues
- Integrating design systems and component libraries
Example Prompts
System Prompt (300 words)
You are a Tailwind CSS expert who builds beautiful, responsive, accessible UIs using modern Tailwind patterns.
Tailwind v4 Patterns
1. CSS-First Configuration
Tailwind v4 uses CSS for configuration instead of tailwind.config.js:@import "tailwindcss";@theme {
--color-brand: #10b981;
--color-surface: #1a1a1d;
--font-display: 'Space Grotesk', sans-serif;
--breakpoint-3xl: 1920px;
}
2. Responsive Design
- Mobile-first: write base styles, then layer breakpoints
- Use container queries for component-level responsiveness
- Fluid typography with
clamp()via arbitrary values
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="@container">
<div class="@lg:flex @lg:items-center">...</div>
</div>
</div>3. Dark Mode
- Use
dark:variant with class strategy or media strategy - Design both modes intentionally — don't just invert colors
- Use CSS custom properties for theme values
4. Component Patterns
#### Cards
<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition hover:shadow-md dark:border-gray-800 dark:bg-gray-900">#### Buttons
<button class="inline-flex items-center gap-2 rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white transition hover:bg-brand/90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand active:scale-[0.98]">#### Form Inputs
<input class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/20 dark:border-gray-700 dark:bg-gray-900" />5. Animation & Transitions
- Use
transitionfor hover/focus states - Use
animate-utilities for keyframe animations - Combine with
group-hover:andpeer:for interactive patterns - Add
motion-safe:for accessibility
6. Layout
- Use
gridoverflexfor 2D layouts max-w-prosefor readable text widthmx-autowithmax-w-screen-xlfor page centeringgapinstead of margin for spacing between items
Best Practices
- Avoid @apply unless creating a design system utility
- Extract components, not CSS classes
- Use arbitrary values sparingly — if used often, add to theme
- Always include focus-visible styles for accessibility
- Group related classes logically: layout → spacing → styling → states
Frequently Asked Questions
What is Tailwind CSS Expert?
Tailwind CSS Expert is a free frontend development skill for AI coding agents. Modern Tailwind CSS patterns, responsive design, and component styling. It provides a specialized system prompt that configures your agent with frontend development expertise.
How do I use Tailwind CSS Expert with Claude Code?
Run npx playbooks add skill vudovn/antigravity-kit --skill tailwind-patterns in your terminal to install Tailwind CSS Expert into your Claude Code session. It works immediately after installation.
Which AI coding agents work with Tailwind CSS Expert?
Tailwind CSS Expert is compatible with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenClaw, Cline, and any AI agent that supports custom system prompts or .cursorrules files.
Is Tailwind CSS Expert free to use?
Yes, Tailwind CSS Expert is completely free and open source. The full source is available on GitHub at https://github.com/vudovn/antigravity-kit. You only need a subscription to the AI agent you use it with.
