Loading...
Loading...
Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables.
npx skill4agent add hairyf/skills tailwindcssThe skill is based on Tailwind CSS v4.1.18, generated at 2026-01-28.
| Topic | Description | Reference |
|---|---|---|
| Installation | Vite, PostCSS, CLI, and CDN setup | core-installation |
| Utility Classes | Understanding Tailwind's utility-first approach and styling elements | core-utility-classes |
| Theme Variables | Design tokens, customizing theme, and theme variable namespaces | core-theme |
| Responsive Design | Mobile-first breakpoints, responsive variants, and container queries | core-responsive |
| Variants | Applying utilities conditionally with state, pseudo-class, and media query variants | core-variants |
| Preflight | Tailwind's base styles and how to extend or disable them | core-preflight |
| Topic | Description | Reference |
|---|---|---|
| Display | flex, grid, block, inline, hidden, sr-only, flow-root, contents | layout-display |
| Flexbox | flex-direction, justify, items, gap, grow, shrink, wrap, order | layout-flexbox |
| Grid | grid-cols, grid-rows, gap, place-items, col-span, row-span, subgrid | layout-grid |
| Aspect Ratio | Controlling element aspect ratio for responsive media | layout-aspect-ratio |
| Columns | Multi-column layout for magazine-style or masonry layouts | layout-columns |
| Topic | Description | Reference |
|---|---|---|
| Position | Controlling element positioning with static, relative, absolute, fixed, and sticky | layout-position |
| Inset | Controlling placement of positioned elements with top, right, bottom, left, and inset utilities | layout-inset |
| Topic | Description | Reference |
|---|---|---|
| Width | Setting element width with spacing scale, fractions, container sizes, and viewport units | layout-width |
| Height | Setting element height with spacing scale, fractions, viewport units, and content-based sizing | layout-height |
| Min & Max Sizing | min-width, max-width, min-height, max-height constraints | layout-min-max-sizing |
| Topic | Description | Reference |
|---|---|---|
| Margin | Controlling element margins with spacing scale, negative values, logical properties, and space utilities | layout-margin |
| Padding | Controlling element padding with spacing scale, logical properties, and directional utilities | layout-padding |
| Topic | Description | Reference |
|---|---|---|
| Overflow | Controlling how elements handle content that overflows their container | layout-overflow |
| Topic | Description | Reference |
|---|---|---|
| Object Fit & Position | Controlling how images and video are resized and positioned | layout-object-fit-position |
| Topic | Description | Reference |
|---|---|---|
| Table Layout | border-collapse, table-auto, table-fixed | layout-tables |
| Topic | Description | Reference |
|---|---|---|
| Transform Base | Base transform utilities for enabling transforms, hardware acceleration, and custom transform values | transform-base |
| Translate | Translating elements on x, y, and z axes with spacing scale, percentages, and custom values | transform-translate |
| Rotate | Rotating elements in 2D and 3D space with degree values and custom rotations | transform-rotate |
| Scale | Scaling elements uniformly or on specific axes with percentage values | transform-scale |
| Skew | Skewing elements on x and y axes with degree values | transform-skew |
| Topic | Description | Reference |
|---|---|---|
| Font & Text | Font size, weight, color, line-height, letter-spacing, decoration, truncate | typography-font-text |
| Text Align | Controlling text alignment with left, center, right, justify, and logical properties | typography-text-align |
| List Style | list-style-type, list-style-position for bullets and markers | typography-list-style |
| Topic | Description | Reference |
|---|---|---|
| Background | Background color, gradient, image, size, position | visual-background |
| Border | Border width, color, radius, divide, ring | visual-border |
| Effects | Box shadow, opacity, mix-blend, backdrop-blur, filter | visual-effects |
| SVG | fill, stroke, stroke-width for SVG and icon styling | visual-svg |
| Topic | Description | Reference |
|---|---|---|
| Transition & Animation | CSS transitions, animation keyframes, reduced motion | effects-transition-animation |
| Visibility & Interactivity | Visibility, cursor, pointer-events, user-select, z-index | effects-visibility-interactivity |
| Form Controls | accent-color, appearance, caret-color, resize | effects-form-controls |
| Scroll Snap | scroll-snap-type, scroll-snap-align for carousels | effects-scroll-snap |
| Topic | Description | Reference |
|---|---|---|
| Dark Mode | Implementing dark mode with the dark variant and custom strategies | features-dark-mode |
| Topic | Description | Reference |
|---|---|---|
| Upgrade Guide | Migrating from v3 to v4, breaking changes, rename mappings | features-upgrade |
| Topic | Description | Reference |
|---|---|---|
| Custom Styles | Adding custom styles, utilities, variants, and working with arbitrary values | features-custom-styles |
| Functions & Directives | Tailwind's CSS directives and functions for working with your design system | features-functions-directives |
| Content Detection | How Tailwind detects classes and how to customize content scanning | features-content-detection |
| Topic | Description | Reference |
|---|---|---|
| Utility Patterns | Managing duplication, conflicts, important modifier, when to use components | best-practices-utility-patterns |
@theme@theme@utility@custom-variant