Menu
Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Ultra-compressed commit message generator. Cuts noise from commit messages while preserving intent and reasoning. Conventional Commits format. Subject ≤50 chars, body only when "why" isn't obvious. Use when user says "write a commit", "commit message", "generate commit", "/commit", or invokes /caveman-commit. Auto-triggers when staging changes.
Build cross-platform desktop apps with JavaScript, HTML, and CSS. Use when building or maintaining Electron apps, configuring IPC/security, or packaging and distributing.
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
| name | tailwindcss |
| description | Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables. |
| metadata | {"author":"Hairyf","version":"2026.2.2","source":"Generated from https://github.com/tailwindlabs/tailwindcss.com"} |
The skill is based on Tailwind CSS v4.1.18, generated at 2026-01-28.
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Instead of writing custom CSS, you compose designs using utility classes directly in your markup. Tailwind v4 introduces CSS-first configuration with theme variables, making it easier to customize your design system.
| Topic | Description |
|---|---|
| Installation | Vite, PostCSS, CLI, and CDN setup |
| Utility Classes | Understanding Tailwind's utility-first approach and styling elements |
| Theme Variables | Design tokens, customizing theme, and theme variable namespaces |
| Responsive Design | Mobile-first breakpoints, responsive variants, and container queries |
| Variants | Applying utilities conditionally with state, pseudo-class, and media query variants |
| Preflight | Tailwind's base styles and how to extend or disable them |
| Topic | Description |
|---|---|
| Display | flex, grid, block, inline, hidden, sr-only, flow-root, contents |
| Flexbox | flex-direction, justify, items, gap, grow, shrink, wrap, order |
| Grid | grid-cols, grid-rows, gap, place-items, col-span, row-span, subgrid |
| Aspect Ratio | Controlling element aspect ratio for responsive media |
| Columns | Multi-column layout for magazine-style or masonry layouts |
| Topic | Description |
|---|---|
| Position | Controlling element positioning with static, relative, absolute, fixed, and sticky |
| Inset | Controlling placement of positioned elements with top, right, bottom, left, and inset utilities |
| Topic | Description |
|---|---|
| Width | Setting element width with spacing scale, fractions, container sizes, and viewport units |
| Height | Setting element height with spacing scale, fractions, viewport units, and content-based sizing |
| Min & Max Sizing | min-width, max-width, min-height, max-height constraints |
| Topic | Description |
|---|---|
| Margin | Controlling element margins with spacing scale, negative values, logical properties |
| Padding | Controlling element padding with spacing scale, logical properties |
| Topic | Description |
|---|---|
| Font & Text | Font size, weight, color, line-height, letter-spacing, decoration, truncate |
| Text Align | Controlling text alignment with left, center, right, justify |
| List Style | list-style-type, list-style-position for bullets and markers |
| Topic | Description |
|---|---|
| Background | Background color, gradient, image, size, position |
| Border | Border width, color, radius, divide, ring |
| Effects | Box shadow, opacity, mix-blend, backdrop-blur, filter |
| SVG | fill, stroke, stroke-width for SVG and icon styling |
| Topic | Description |
|---|---|
| Transition & Animation | CSS transitions, animation keyframes, reduced motion |
| Visibility & Interactivity | Visibility, cursor, pointer-events, user-select, z-index |
| Form Controls | accent-color, appearance, caret-color, resize |
| Scroll Snap | scroll-snap-type, scroll-snap-align for carousels |
Implementing dark mode with the dark variant and custom strategies.
Migrating from v3 to v4, breaking changes, rename mappings.
@theme, @utility, @custom-variant, @layer@theme directive to define design tokens@theme, @utility, and @custom-variant over JavaScript configstailwind.config.js to CSS @theme blocks@import "tailwindcss" instead of @tailwind base/components/utilities--color-*, --spacing-*)@utility directive for custom utilities@custom-variant for custom variants