Tailwind CSS Cheat Sheet

A reference for Tailwind CSS utility classes, responsive breakpoints, state variants, and configuration for building custom designs.

2 PagesBeginnerFeb 28, 2026

Setup & Config

Installing Tailwind and wiring up the config and base directives.

bash

# installnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p# tailwind.config.jsmodule.exports = {  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],  theme: {    extend: {      colors: { brand: '#1e40af' },    },  },  plugins: [],};/* input.css */@tailwind base;@tailwind components;@tailwind utilities;

Layout & Spacing

Flexbox, grid, and spacing utilities composed together.

html

<div class="flex items-center justify-between p-4 gap-4 max-w-3xl mx-auto">  <div class="w-1/3 bg-gray-100 rounded-lg shadow p-6">Sidebar</div>  <div class="flex-1 grid grid-cols-2 gap-4">    <div class="col-span-2 p-4 bg-white border rounded">Content</div>  </div></div>

Common Utility Categories

The classes you will reach for on nearly every element.

Spacing- p-4, px-2, py-1, m-4, -mt-2, gap-4 (scale in rem, based on a 4px unit)
Flexbox/Grid- flex, grid, grid-cols-3, items-center, justify-between, flex-col
Typography- text-lg, font-bold, leading-6, tracking-wide, text-gray-700
Colors- bg-blue-500, text-red-600, border-slate-200 (each color has shades from 50-950)
Sizing- w-full, h-screen, max-w-md, min-h-screen
Borders/Effects- rounded-lg, border, shadow-md, ring-2, opacity-50
Transitions/Animation- transition, duration-200, ease-in-out, animate-spin
Arbitrary values- w-[137px], bg-[#1e40af] for one-off values outside the design scale

Responsive & State Variants

Mobile-first breakpoints and pseudo-class/dark-mode variants.

html

<!-- mobile-first breakpoints: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px --><div class="text-sm md:text-base lg:text-lg">Responsive text</div><button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:opacity-50 focus:ring-2">  Submit</button><div class="dark:bg-gray-900 dark:text-white">Dark mode aware</div>

Pro Tip

Tailwind's build scans the 'content' paths in tailwind.config.js for class name strings -- never construct class names dynamically via concatenation, e.g. `text-${color}-500`, since the scanner cannot detect them and they get stripped from the production build.

Was this cheat sheet helpful?

Bootstrap Cheat Sheet

Sass/SCSS Cheat Sheet

Explore Topics

#TailwindCSS#TailwindCSSCheatSheet#WebDevelopment#Beginner#SetupConfig#LayoutSpacing#CommonUtilityCategories#ResponsiveStateVariants#OOP#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services