Tailwind CSS

tailwindcss

Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables.

hairyf/skills·3.2Kinstalls25stars

SKILL.md

Full skill instructions

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

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/hairyf/skills --skill tailwindcss

View on GitHub

tailwindcss

hairy-utils
hairy utils
944 installs
motion
motion
821 installs
next
next
740 installs
react-use
react use
730 installs

More skills from hairyf

hairyf/skills

valtio

25 672

View

hairyf/skills

valtio-define

valtio define

25 649

View

hairyf/skills

hairy-react-lib

hairy react lib

25 646

View

hairyf/skills

overlastic

25 587

View

hairyf/skills

openapi-specification-v3.2

openapi specification v3.2

25 558

View

hairyf/skills

vitest

25 519

View

hairyf/skills

unjs

25 472

View

hairyf/skills

openapi-specification-v2

openapi specification v2

25 467

View

hairyf/skills

hairy

25 400

View

hairyf/skills

undocs

25 389

View

hairyf/skills

writing-humanizer-zh

writing humanizer zh

25 385

View

hairyf/skills

tsdown

25 376

View

Popular AI tools

View all

Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid

View

Productivity

Vimcal

The world's fastest calendar for remote work

Free

View

Images

IMGCreator.ai

Transform Your Design with AI Designer by ImgCreator.ai

Freemium

View

Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid

View

Images

Clipdrop Uncrop

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium

View

Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free

View

Finance

ChainClarity

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium

View

Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free

View