Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
Provides Tailwind CSS utility patterns for responsive layouts, flexbox, grid, typography, colors, and components. Use for styling React/Vue/Svelte apps, design systems, and CSS optimization.
npx claudepluginhub giuseppe-trisciuoglio/developer-kit --plugin developer-kit-typescriptHow this skill is triggered — by the user, by Claude, or both
Slash command
/developer-kit-typescript:tailwind-css-patternsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Expert guide for building modern, responsive user interfaces with Tailwind CSS utility-first framework. Covers v4.1+ features including CSS-first configuration, custom utilities, and enhanced developer experience.
Provides Tailwind CSS 3.x utility classes reference for spacing, colors, typography, flexbox, grid, responsive designs, state variants, dark mode, and tailwind.config.js configuration.
Provides Tailwind CSS patterns for layouts with Flexbox/Grid, responsive breakpoints, container queries, dark mode, animations, and v4 migration.
References Tailwind CSS utility classes for layout, spacing, typography, colors, backgrounds, borders, shadows, effects, and responsive design. Aids utility-first CSS composition.
Share bugs, ideas, or general feedback.
Expert guide for building modern, responsive user interfaces with Tailwind CSS utility-first framework. Covers v4.1+ features including CSS-first configuration, custom utilities, and enhanced developer experience.
Provides actionable patterns for responsive, accessible UIs with Tailwind CSS v4.1+. Covers utility composition, dark mode, component patterns, and performance optimization.
| Prefix | Min Width | Description |
|---|---|---|
sm: | 640px | Small screens |
md: | 768px | Tablets |
lg: | 1024px | Desktops |
xl: | 1280px | Large screens |
2xl: | 1536px | Extra large |
<!-- Center content -->
<div class="flex items-center justify-center min-h-screen">
Content
</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Items -->
</div>
<!-- Card component -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold">Title</h3>
<p class="text-gray-600">Description</p>
</div>
sm:, md:, lg:) for larger screenstailwind.config.js or using @themefunction ProductCard({ product }: { product: Product }) {
return (
<div className="bg-white rounded-lg shadow-lg overflow-hidden sm:flex">
<img className="h-48 w-full object-cover sm:h-auto sm:w-48" src={product.image} />
<div className="p-6">
<h3 className="text-lg font-semibold">{product.name}</h3>
<button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
Add to Cart
</button>
</div>
</div>
);
}
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
<h1 class="dark:text-white">Title</h1>
</div>
<input
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="you@example.com"
/>
@apply for maintainabilitycontent: [] in confignpm run build to regenerate purged CSSnpx tailwindcss -o with --watch flag for live updatesmd:flex not flex md:flex)darkMode: 'class' or 'media' is set correctlydocument.documentElement.classList.toggle('dark') for class strategydark class to <html> before body renders@apply with complex selectorsclass or media strategy)