Tailwind CSS Cheat Sheet

Quickly find and copy utility classes for your next project. Click any class to copy it to your clipboard.

Why Use a Tailwind Cheat Sheet?

Tailwind CSS has revolutionized web development by allowing developers to build custom designs entirely within their HTML markup using utility classes. However, with thousands of unique classes available for colors, sizing, spacing, grids, and typography, remembering the exact syntax can disrupt your workflow.

This interactive cheat sheet acts as a quick-reference guide. Instead of digging through extensive documentation pages, you can instantly filter by category or search by keyword, allowing you to maintain your coding flow.

How to Use the Reference Guide

  1. Search: Type exactly what you are looking for in the search bar (e.g., typing "center" will bring up text-center, items-center, and justify-center).
  2. Filter: Click the category pills at the top to isolate specific design elements like Spacing, Typography, or Flexbox.
  3. Copy: Click on any class name block. The text will instantly be copied to your clipboard so you can paste it directly into your HTML or JSX file.

Understanding Variants (Hover, Focus, Responsive)

While this cheat sheet lists base utility classes, remember that Tailwind allows you to apply conditionally prefix any class:

  • Responsive: Prefix with breakpoints to apply only on specific screen sizes (e.g., md:text-lg, lg:flex).
  • State: Prefix with states to apply on user interaction (e.g., hover:bg-blue-500, focus:ring-2).
  • Dark Mode: Prefix with dark to apply when dark mode is active (e.g., dark:bg-gray-900, dark:text-white).

Frequently Asked Questions

What is Tailwind CSS?

Tailwind CSS is a highly popular utility-first CSS framework. Unlike Bootstrap, which provides pre-designed components (like buttons or cards), Tailwind provides low-level utility classes that let you build completely custom designs directly in your HTML.

Is this cheat sheet updated?

Yes, this cheat sheet covers the core foundational classes used in Tailwind CSS v3 and v4, including standard layout, typography, flexbox, and grid utilities.

Why isn't a specific color class working?

If a standard class like bg-red-500 isn't working in your project, ensure that Tailwind is properly configured in your build setup, and that your tailwind.config.js is correctly pointing to the template files where you are using the classes.
📋 Class Copied!