Tags: tailwind, css, utility-classes, responsive, dark-mode, config, frontend Last updated: 2026-06-26

Tailwind CSS Cheatsheet

Quick Reference

Category	Examples
Layout	`flex`, `grid`, `block`, `hidden`, `container`
Spacing	`p-4`, `m-2`, `gap-6`, `space-y-4`
Sizing	`w-full`, `h-screen`, `max-w-lg`, `min-h-0`
Typography	`text-lg`, `font-bold`, `tracking-wide`, `leading-relaxed`
Colours	`bg-blue-500`, `text-white`, `border-gray-200`
Effects	`shadow-lg`, `opacity-50`, `blur-sm`
Responsive	`sm:`, `md:`, `lg:`, `xl:`, `2xl:`
Dark mode	`dark:bg-gray-900`
State	`hover:`, `focus:`, `active:`, `disabled:`
Custom	`bg-[#ff00ff]`, `w-[calc(100%-1rem)]`

Layout

Flexbox

<div class="flex items-center
  justify-between">
  <span>Left</span>
  <span>Right</span>
</div>

Class	Effect
`flex`	Display flex
`flex-row` / `flex-col`	Direction
`flex-wrap` / `flex-nowrap`	Wrapping
`flex-1`	Equal grow + shrink
`items-center`	Align cross-axis
`justify-between`	Justify main-axis
`gap-4`	Gap between children

Grid

<div class="grid grid-cols-3 gap-4">
  <div>1</div><div>2</div><div>3</div>
</div>

Class	Effect
`grid`	Display grid
`grid-cols-3`	3 equal columns
`grid-cols-[200px_1fr]`	Fixed + fluid
`col-span-2`	Span 2 columns
`row-span-3`	Span 3 rows

Spacing (Padding & Margin)

<div class="p-4">         <!-- padding all sides -->
<div class="px-6 py-3">   <!-- x-axis, y-axis -->
<div class="pt-2 pr-4 pb-6 pl-8"> <!-- top right bottom left -->
<div class="m-4">         <!-- margin all sides -->
<div class="mx-auto">     <!-- center horizontally -->
<div class="-mt-2">       <!-- negative margin -->

<div class="space-y-4">   <!-- vertical gap between children -->
<div class="space-x-2">   <!-- horizontal gap -->

Sizing

<div class="w-1/2">        <!-- 50% width -->
<div class="w-full">       <!-- 100% width -->
<div class="w-screen">     <!-- 100vw -->
<div class="w-64">         <!-- 16rem -->
<div class="max-w-lg">     <!-- max-width: 32rem -->
<div class="h-screen">     <!-- 100vh -->
<div class="size-16">      <!-- w + h (v3.4+) -->

Typography

<p class="text-lg font-semibold leading-7
  tracking-wide text-gray-800
  dark:text-gray-200">
  Hello world
</p>

Class	Effect
`text-xs` … `text-9xl`	Font size
`font-thin` … `font-black`	Font weight
`leading-3` … `leading-10`	Line height
`tracking-tighter` … `tracking-widest`	Letter spacing
`truncate`	Ellipsis overflow
`line-clamp-3`	Clamp to 3 lines

Colours

<div class="bg-red-500">           <!-- Solid -->
<div class="bg-red-500/50">        <!-- 50% opacity -->
<div class="bg-gradient-to-r
  from-blue-500 to-purple-600">   <!-- Gradient -->
<p class="text-emerald-600">       <!-- Text colour -->
<div class="border border-gray-300"><!-- Border -->
<div class="ring-2 ring-blue-500
  ring-offset-2">                  <!-- Ring -->

Responsive Breakpoints

Prefix	Min-width
(none)	0px (mobile-first)
`sm:`	640px
`md:`	768px
`lg:`	1024px
`xl:`	1280px
`2xl:`	1536px

<div class="grid grid-cols-1
  md:grid-cols-2 lg:grid-cols-3">
<div class="block md:hidden">  <!-- mobile only -->
<div class="hidden md:block">  <!-- tablet+ -->

Dark Mode

<!-- darkMode: "class" -->
<html class="dark">
<body class="bg-white dark:bg-gray-900">
  <h1 class="text-black dark:text-white">

<!-- darkMode: "media" (system) -->
<div class="bg-white dark:bg-gray-900">

State Variants

<button class="bg-blue-500
  hover:bg-blue-600
  focus:ring-2 focus:ring-blue-400
  active:scale-95
  disabled:opacity-50
  disabled:cursor-not-allowed">
  Submit
</button>

Prefix	Trigger
`hover:`	Mouse over
`focus:`	Focused
`active:`	Being clicked
`disabled:`	Disabled attribute
`group-hover:`	Parent hover
`peer-checked:`	Sibling checked

group / peer

<div class="group">
  <h3 class="group-hover:text-blue-500">Title</h3>
</div>

<input type="checkbox" class="peer" />
<div class="peer-checked:block hidden">
  Visible when checked
</div>

Custom Values (Arbitrary)

<div class="w-[32rem]">
<div class="bg-[#bada55]">
<div class="text-[clamp(1rem,5vw,3rem)]">
<div class="grid-cols-[200px_1fr_100px]">
<div class="after:content-['→']">

Tailwind Config

module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx,vue}"],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        brand: { 500: "#6366f1" },
      },
      screens: { "3xl": "1920px" },
      spacing: { "18": "4.5rem" },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
      },
      animation: {
        "fade-in": "fadeIn 0.3s ease-in-out",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
      },
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
  ],
};

Tips

Use size-* (v3.4+) instead of separate w- + h-.
Use square brackets for one-off values: w-[800px].
Enable darkMode: "class" for manual dark-mode toggle.
Use @container queries for component-level responsive design (v3.2+).
The prose class (from @tailwindcss/typography) styles markdown/rich text beautifully with zero effort.