Tailwind CSS Cheat Sheet: Essential Classes and Utilities

Tailwind CSS is a game-changer for web developers, offering utility-first CSS that speeds up the design process. But with so many options, it’s easy to get lost. That's why we've created this handy cheat sheet to guide you through the essential classes and utilities you need to know.

Whether a beginner or a pro, this guide has something for everyone.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup. It’s highly customizable and allows for rapid design without leaving your HTML.

Why Use a Tailwind CSS Cheat Sheet?

A cheat sheet is your quick reference guide. It saves time, reduces the learning curve, and makes it easier to implement the right classes without digging through documentation. Think of it as your personal assistant in the world of web design!

Basic Tailwind Utility Classes

Text Utilities

Tailwind CSS offers a variety of text utilities that make typography adjustments a breeze.

Font Size: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl, text-5xl, text-6xl
Font Weight: font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black
Text Color: text-white, text-gray-500, text-red-500, text-blue-500, text-green-500, text-yellow-500, text-purple-500

Background Utilities

Easily set background colors and images with these utilities.

Background Color: bg-white, bg-gray-500, bg-red-500, bg-blue-500, bg-green-500, bg-yellow-500, bg-purple-500
Background Opacity: bg-opacity-25, bg-opacity-50, bg-opacity-75, bg-opacity-100
Background Image: bg-none, bg-gradient-to-r, bg-gradient-to-l, bg-gradient-to-t, bg-gradient-to-b

Spacing Utilities

Control margins and padding with precision.

Margin: m-0, m-1, m-2, m-3, m-4, m-5, m-6, m-8, m-10, m-12, m-16, m-20, m-24, m-32, m-40, m-48, m-56, m-64
Padding: p-0, p-1, p-2, p-3, p-4, p-5, p-6, p-8, p-10, p-12, p-16, p-20, p-24, p-32, p-40, p-48, p-56, p-64

Layout Utilities

Flexbox

Tailwind CSS makes it simple to create flexible and responsive layouts using flexbox utilities.

Display: flex, inline-flex
Direction: flex-row, flex-row-reverse, flex-col, flex-col-reverse
Wrap: flex-wrap, flex-wrap-reverse, flex-nowrap
Justify Content: justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly
Align Items: items-start, items-end, items-center, items-baseline, items-stretch

Grid

Create complex grid layouts with ease.

Grid Template Columns: grid-cols-1, grid-cols-2, grid-cols-3, grid-cols-4, grid-cols-5, grid-cols-6, grid-cols-7, grid-cols-8, grid-cols-9, grid-cols-10, grid-cols-11, grid-cols-12
Gap: gap-0, gap-1, gap-2, gap-3, gap-4, gap-5, gap-6, gap-8, gap-10, gap-12, gap-16, gap-20, gap-24, gap-32, gap-40, gap-48, gap-56, gap-64
Grid Template Rows: grid-rows-1, grid-rows-2, grid-rows-3, grid-rows-4, grid-rows-5, grid-rows-6

Border Utilities

Borders can add a lot of character to your design. Here’s how you can manipulate them with Tailwind CSS.

Border Width: border, border-0, border-2, border-4, border-8
Border Color: border-transparent, border-black, border-white, border-gray-500, border-red-500, border-blue-500, border-green-500, border-yellow-500, border-purple-500
Border Radius: rounded-none, rounded-sm, rounded, rounded-md, rounded-lg, rounded-full

Sizing Utilities

Adjust the size of elements with ease.

Width: w-1, w-2, w-3, w-4, w-5, w-6, w-8, w-10, w-12, w-16, w-20, w-24, w-32, w-40, w-48, w-56, w-64, w-auto, w-full, w-screen
Height: h-1, h-2, h-3, h-4, h-5, h-6, h-8, h-10, h-12, h-16, h-20, h-24, h-32, h-40, h-48, h-56, h-64, h-auto, h-full, h-screen

Responsive Design

Making your site responsive is crucial, and Tailwind CSS simplifies this process with responsive utility classes.

Breakpoints: sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px)
Usage Example: sm:text-sm, md:text-base, lg:text-lg, xl:text-xl, 2xl:text-2xl

Pseudo-Class Variants

Tailwind CSS supports pseudo-class variants to apply styles conditionally.

Hover: hover:bg-blue-500, hover:text-white
Focus: focus:bg-blue-500, focus:text-white
Active: active:bg-blue-500, active:text-white
Disabled: disabled:bg-gray-500, disabled:text-gray-300

Customization

Tailwind CSS is designed to be customized. You can modify the default theme, extend it, or even replace it with your own configurations.

Config File: tailwind.config.js
Extend Theme:

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1da1f2',
        'custom-green': '#17bf63',
      },
    },
  },
}

Plugins: Add plugins to extend Tailwind’s capabilities.

plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
],

Advanced Tailwind Utilities

Animation Utilities

Tailwind CSS includes a variety of utilities for animations and transitions.

Transition Properties: transition, transition-none, transition-all, transition-colors, transition-opacity, transition-shadow, transition-transform
Duration: duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000
Timing Function: ease-linear, ease-in, ease-out, ease-in-out
Delay: delay-75, delay-100, delay-150, delay-200, delay-300, delay-500, delay-700, delay-1000

Shadow Utilities

Add depth to your elements with shadow utilities.

Box Shadow: shadow-xs, shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, shadow-outline, shadow-none
Shadow Color: shadow-black, shadow-white, shadow-gray-500, shadow-red-500, shadow-blue-500, shadow-green-500, shadow-yellow-500, shadow-purple-500

Accessibility Utilities

Tailwind CSS also supports accessibility utilities to improve the user experience for everyone.

Screen Reader Only: sr-only
Not Screen Reader Only: not-sr-only
Focus Within: focus-within:bg-blue-500
Focus Visible: focus-visible:bg-blue-500

Typography Utilities

Tailwind CSS offers a range of utilities to style your text content effectively.

Font Family: font-sans, font-serif, font-mono
Text Alignment: text-left, text-center, text-right, text-justify
Text Decoration: underline, line-through, no-underline
Text Transform: uppercase, lowercase, capitalize, normal-case

Color Utilities

Tailwind CSS provides comprehensive color utilities to enhance your design.

Text Color: text-white, text-gray-500, text-red-500, text-blue-500, text-green-500, text-yellow-500, text-purple-500
Background Color: bg-white, bg-gray-500, bg-red-500, bg-blue-500, bg-green-500, bg-yellow-500, bg-purple-500
Border Color: border-transparent, border-black, border-white, border-gray-500, border-red-500, border-blue-500, border-green-500, border-yellow-500, border-purple-500