# Tailwindcss > Tailwind CSS v4 utility-first styling patterns including responsive design, dark mode, and custom configuration. Use when styling with Tailwind, adding utility classes, configuring Tailwind, setting up dark mode, or customizing the theme. - **Type:** Skill - **Install:** `agentstack add skill-blencorp-claude-code-kit-tailwindcss` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [blencorp](https://agentstack.voostack.com/s/blencorp) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [blencorp](https://github.com/blencorp) - **Source:** https://github.com/blencorp/claude-code-kit/tree/main/cli/kits/tailwindcss/skills/tailwindcss ## Install ```sh agentstack add skill-blencorp-claude-code-kit-tailwindcss ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Tailwind CSS v4 Development Guidelines Best practices for using Tailwind CSS v4 utility classes effectively. **Note**: Tailwind CSS v4 (released January 2025) uses a CSS-first configuration approach. If you need v3 compatibility, tailwind.config.js is still supported. ## Core Principles 1. **Utility-First**: Use utility classes instead of custom CSS 2. **Mobile-First**: Design for mobile, then scale up with responsive modifiers 3. **Component Extraction**: Extract repeated patterns into components 4. **Consistent Spacing**: Use Tailwind's spacing scale 5. **Custom Configuration**: Extend the default theme for brand consistency ## Basic Utilities ### Layout ```tsx // Flexbox Content Sidebar // Grid 1 2 3 // Positioning Badge ``` ### Spacing ```tsx // Padding and Margin {/* padding: 1rem, margin: 0.5rem */} {/* padding-x: 1.5rem, padding-y: 1rem */} {/* margin-top: 2rem, margin-bottom: 1rem */} // Space between children {/* margin-bottom on all but last child */} Item 1 Item 2 ``` ### Typography ```tsx Heading Paragraph text with comfortable line height. Label ``` ### Colors ```tsx // Text colors Text // Background colors Button // Border colors Box ``` ## Responsive Design ### Breakpoints ```tsx // Mobile-first responsive classes {/* Full width on mobile, half on medium screens, third on large */} {/* Responsive text sizes */} {/* Responsive grid */} ``` ### Container ```tsx {/* Centered container with horizontal padding */} {/* Responsive container padding */} ``` ## Component Patterns ### Button ```tsx Click me // Variants Secondary ``` ### Card ```tsx Card Title Card content goes here. ``` ### Form Input ```tsx Email We'll never share your email. ``` ## State Variants ### Hover, Focus, Active ```tsx Interactive Button Link ``` ### Group Hover ```tsx Hover the container ``` ### Disabled ```tsx Disabled Button ``` ## Dark Mode ```css /* Tailwind v4: Configure in app/globals.css */ @import "tailwindcss"; @media (prefers-color-scheme: dark) { /* Or use class-based: .dark */ } ``` ```tsx // Usage (same as v3) Title Description ``` ## Custom Styles ### Arbitrary Values ```tsx {/* Custom top value */} {/* Custom color */} {/* Custom grid template */} ``` ### @apply Directive ```css /* components/button.css */ .btn-primary { @apply px-4 py-2 bg-blue-600 text-white font-medium rounded-md; @apply hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500; @apply disabled:opacity-50 disabled:cursor-not-allowed; } ``` ## Configuration ### Tailwind v4: CSS-First Configuration ```css /* app/globals.css */ @import "tailwindcss"; @theme { /* Custom colors */ --color-brand-50: #eff6ff; --color-brand-100: #dbeafe; --color-brand-900: #1e3a8a; /* Custom spacing */ --spacing-128: 32rem; /* Custom fonts */ --font-family-sans: 'Inter', sans-serif; /* Custom breakpoints */ --breakpoint-3xl: 1920px; } ``` ### Tailwind v3 Config (Still Supported) ```javascript // tailwind.config.js (optional in v4) module.exports = { content: [ './app/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: { colors: { brand: { 50: '#eff6ff', 100: '#dbeafe', 900: '#1e3a8a', } }, spacing: { '128': '32rem', }, fontFamily: { sans: ['Inter', 'sans-serif'], }, }, }, plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), ], } ``` ## Plugins ### Official Plugins ```bash npm install @tailwindcss/forms npm install @tailwindcss/typography npm install @tailwindcss/aspect-ratio npm install @tailwindcss/container-queries ``` ```tsx // @tailwindcss/forms // @tailwindcss/typography Article Title Content... ``` ## Performance ### Automatic Content Detection Tailwind v4 automatically detects and scans all template files - no `content` configuration needed. ### Build Performance Tailwind v4 delivers 3.5x faster full builds (~100ms) compared to v3 using modern CSS features like `@property` and `color-mix()`. **Browser Requirements**: Safari 16.4+, Chrome 111+, Firefox 128+ ## Common Patterns ### Centered Content ```tsx Centered content ``` ### Sticky Header ```tsx Navigation ``` ### Grid Layout ```tsx {posts.map(post => ( ))} ``` ### Truncate Text ```tsx This text will be truncated with ellipsis if too long This text will show max 3 lines with ellipsis ``` ## Best Practices 1. **Use Consistent Spacing**: Stick to Tailwind's spacing scale 2. **Responsive by Default**: Always consider mobile-first design 3. **Extract Components**: Avoid repeating long class lists 4. **Use Theme Colors**: Define custom colors in config, not arbitrary values 5. **Leverage @apply Sparingly**: Prefer utility classes in JSX 6. **Enable Dark Mode**: Plan for dark mode from the start 7. **Use Plugins**: Leverage official plugins for common needs 8. **Optimize Production**: Ensure purge is configured correctly ## Additional Resources For detailed information, see: - [Utility Patterns](resources/utility-patterns.md) - [Component Library](resources/component-library.md) - [Configuration Guide](resources/configuration.md) ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [blencorp](https://github.com/blencorp) - **Source:** [blencorp/claude-code-kit](https://github.com/blencorp/claude-code-kit) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-blencorp-claude-code-kit-tailwindcss - Seller: https://agentstack.voostack.com/s/blencorp - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.