tailwindcss

SKILL.md

Utility-first CSS framework for rapidly building custom interfaces with composed utility classes.

Covers layout (flexbox, grid, positioning, sizing, spacing), transforms, typography, visual effects, and interactivity through organized utility categories

Supports responsive design with mobile-first breakpoints, container queries, and conditional variants for state, pseudo-classes, and media queries

Tailwind v4 introduces CSS-first configuration using theme variables and directives (@theme, @utility, @custom-variant) for easier design system customization

Includes dark mode support, custom style and utility creation, and content detection for automatic class scanning

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