tailwindcss

Tailwind CSS

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.

Core References

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

Layout

Display & Flexbox & Grid

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

Positioning

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

Sizing

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

Spacing

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

Overflow

Topic	Description	Reference
Overflow	Controlling how elements handle content that overflows their container	layout-overflow

Images & Replaced Elements

Topic	Description	Reference
Object Fit & Position	Controlling how images and video are resized and positioned	layout-object-fit-position

Tables

Topic	Description	Reference
Table Layout	border-collapse, table-auto, table-fixed	layout-tables

Transforms

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

Typography

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

Visual

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

Effects & Interactivity

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

Features

Dark Mode

Topic	Description	Reference
Dark Mode	Implementing dark mode with the dark variant and custom strategies	features-dark-mode

Migration

Topic	Description	Reference
Upgrade Guide	Migrating from v3 to v4, breaking changes, rename mappings	features-upgrade

Customization

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

Best Practices

Topic	Description	Reference
Utility Patterns	Managing duplication, conflicts, important modifier, when to use components	best-practices-utility-patterns

Key Recommendations

• Use utility classes directly in markup - Compose designs by combining utilities
• Customize with theme variables - Use @theme directive to define design tokens
• Mobile-first responsive design - Use unprefixed utilities for mobile, prefixed for breakpoints
• Use complete class names - Never construct classes dynamically with string interpolation
• Leverage variants - Stack variants for complex conditional styling
• Prefer CSS-first configuration - Use @theme, @utility, and @custom-variant over JavaScript configs