The Tailwind CSS Cheat Sheet is an interactive, quick-reference directory for developers working with the utility-first Tailwind CSS framework.

The main features and capabilities of this reference guide include:

• Multi-Version Version Filtering: Allows developers to filter utility classes across major and minor releases, spanning from legacy v0.x (0.7.4) and v1.x, through v2.x and v3.x, up to the latest v4.x (4.3.0) releases.

• Theme Customization: Features quick toggle options between light mode, dark mode, and system preference modes for comfortable viewing.

• Categorized Utility Directory: Grouped into major layout and styling categories with expanding/collapsing sections:

  • Layout & Sizing: container, box-sizing, display, position, columns, aspect-ratio, container queries, width, height, and z-index.

  • Flexbox, Grid & Box Alignment: flex-direction, grid-template-columns/rows, gap, justify-content, align-items, and place-self.

  • Spacing & Typography: padding, margin, space between, font-family, font-size, line-height, text-color, text-decoration, and hyphens.

  • Backgrounds, Borders & Effects: background-color, gradient color, border-radius, ring width/color, box-shadow, opacity, and mask-image.

  • Transitions, Transforms & Filters: transition-property, animation, scale, rotate, translate, blur, drop-shadow, and backdrop-blur.

  • Interactivity, SVG & Accessibility: cursor, scroll-snap, accent-color, scrollbar-width, fill/stroke, screen readers (sr-only), and forced-color-adjust.

• Variant & State Modifiers: Documents modifiers for responsive design breakpoints, container queries, dark mode, hover/focus/active states, pseudo-elements, parent/sibling states (group and peer), attribute selectors (aria-*), and media feature queries.

• Direct Documentation Linking: Provides direct links for individual class categories straight to the official Tailwind CSS documentation.