This skill should be used when the user is styling with Tailwind, adding utility classes, configuring Tailwind, setting up dark mode, or customizing the theme. It covers Tailwind CSS v4 utility-first styling patterns including responsive design, dark mode, and custom configuration.
From hugin-coworknpx claudepluginhub michelve/hugin-marketplace --plugin hugin-coworkThis skill uses the workspace's default tool permissions.
examples/component-patterns.mdreferences/basic-utilities.mdresources/component-library.mdresources/configuration.mdresources/utility-patterns.mdSearches 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.
Searches, 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.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
Best practices for using Tailwind CSS v4 utility classes effectively.
Note: This project uses Tailwind CSS v4 with CSS-first configuration. No tailwind.config.js file is used - theme is defined via @theme inline in src/client/index.css.
See basic-utilities.md for layout (flexbox, grid, positioning), spacing, typography, and color utility patterns.
// Mobile-first responsive classes
<div className="w-full md:w-1/2 lg:w-1/3">
{/* Full width on mobile, half on medium screens, third on large */}
</div>
<h1 className="text-2xl md:text-4xl lg:text-6xl">
{/* Responsive text sizes */}
</h1>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{/* Responsive grid */}
</div>
<div className="container mx-auto px-4">
{/* Centered container with horizontal padding */}
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Responsive container padding */}
</div>
See component-patterns.md for button, card, and form input styling examples.
<button className="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 focus:ring-2 focus:ring-blue-500">
Interactive Button
</button>
<a href="#" className="text-blue-600 hover:text-blue-800 hover:underline">
Link
</a>
<div className="group">
<img src="/image.jpg" className="transition-opacity group-hover:opacity-75" />
<p className="group-hover:text-blue-600">Hover the container</p>
</div>
<button className="disabled:cursor-not-allowed disabled:opacity-50" disabled>
Disabled Button
</button>
This project uses class-based dark mode configured in src/client/index.css:
@custom-variant dark (&:is(.dark *));
Colors use oklch values via CSS variables:
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
}
// Use semantic token classes (not raw colors)
<div className="bg-background text-foreground">
<h1 className="text-foreground">Title</h1>
<p className="text-muted-foreground">Description</p>
</div>
<div className="top-[117px]"> {/* Custom top value */}
<div className="bg-[#1da1f2]"> {/* Custom color */}
<div className="grid-cols-[200px_1fr]"> {/* Custom grid template */}
/* components/button.css */
.btn-primary {
@apply rounded-md bg-blue-600 px-4 py-2 font-medium text-white;
@apply hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:outline-none;
@apply disabled:cursor-not-allowed disabled:opacity-50;
}
This project uses Tailwind CSS v4 with CSS-first configuration - no tailwind.config.js. All theme config lives in src/client/index.css:
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme inline {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}
Colors are defined as oklch CSS variables:
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
/* ... */
}
The Vite plugin handles Tailwind integration:
// vite.config.ts
import tailwindcss from "@tailwindcss/vite";
// ...
plugins: [tailwindcss() /* ... */];
npm install @tailwindcss/forms
npm install @tailwindcss/typography
npm install @tailwindcss/aspect-ratio
npm install @tailwindcss/container-queries
// @tailwindcss/forms
<input type="text" className="form-input rounded-md" />
// @tailwindcss/typography
<article className="prose lg:prose-xl">
<h1>Article Title</h1>
<p>Content...</p>
</article>
This project uses the @tailwindcss/vite plugin for optimal build performance. Tailwind v4 automatically detects and scans all template files - no content configuration needed.
Tailwind v4 delivers 3.5x faster full builds (~100ms) compared to v3 using modern CSS features like @property and color-mix().
<div className="flex min-h-screen items-center justify-center">
<div>Centered content</div>
</div>
<header className="sticky top-0 z-50 border-b bg-white">
<nav>Navigation</nav>
</header>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{posts.map((post) => (
<PostCard key={post.id} post={post} />
))}
</div>
<p className="truncate">This text will be truncated with ellipsis if too long</p>
<p className="line-clamp-3">This text will show max 3 lines with ellipsis</p>
For detailed information, see: