Tailwind CSS Cheatsheet

Tailwind CSS is a utility-first CSS framework for rapidly building custom UIs. It offers atomic classes for styling elements without leaving your HTML.

NOTE: Tested using the latest version at time of writing, v4

Core Concepts

• Utility-first: Style elements using single-purpose classes.
• Responsive: Use breakpoint prefixes like sm:, md:, lg:, xl:.
• Mobile-first: Base classes apply to mobile, then layer up.
• Arbitrary values: Use square brackets for custom values. Example: mt-[22px], bg-[#1a1a1a].

Layout

• Container: container, mx-auto, max-w-screen-md
• Box sizing: box-border, box-content
• Display: block, inline-block, flex, grid, hidden
• Position: static, relative, absolute, fixed, sticky
• Z-Index: z-0 to z-50, or custom: z-[9999]

Flex & Grid

• Flexbox: flex, flex-row, flex-col, items-center, justify-between, flex-wrap
• Grid: grid, grid-cols-3, gap-4, place-items-center

Spacing

• Margin: m-4, mt-2, mx-auto, -ml-1
• Padding: p-4, pt-1, px-6
• Gap: gap-2, gap-x-4, gap-y-1

Sizing

• Width: w-full, w-screen, w-[450px]
• Height: h-10, min-h-screen, h-fit
• Max/Min: max-w-md, min-h-[300px]

Typography

• Font size: text-xs, text-sm, text-lg, text-2xl
• Font weight: font-light, font-bold, font-black
• Text color: text-gray-700, text-red-500, text-white
• Line height: leading-tight, leading-[1.6]
• Letter spacing: tracking-wide, tracking-tight
• Text align: text-left, text-center, text-justify

Backgrounds

• Color: bg-blue-500, bg-gray-900, bg-white/80
• Image: bg-[url('/bg.svg')], bg-cover, bg-center, bg-no-repeat

Borders & Shadows

• Border: border, border-2, border-gray-300, border-dashed
• Border radius: rounded, rounded-lg, rounded-[12px]
• Box shadow: shadow, shadow-md, shadow-lg, shadow-none

Effects & Transitions

• Opacity: opacity-50, opacity-0, opacity-100
• Mix blend: mix-blend-multiply, mix-blend-screen
• Transition: transition, duration-300, ease-in-out, hover:transition-colors

Interactivity & State

• Hover: hover:bg-blue-600, hover:underline
• Focus: focus:outline-none, focus:ring-2, focus:ring-blue-500
• Active/Disabled: active:scale-95, disabled:opacity-50

Lists

• list-none, list-disc, list-decimal, list-inside, list-outside

Overflow & Scroll

• overflow-hidden, overflow-auto, overflow-scroll
• Scroll snap: snap-x, snap-start, snap-mandatory

Transforms

• transform, scale-105, rotate-45, translate-x-2

Utilities

• Cursor: cursor-pointer, cursor-not-allowed
• Select: select-none, select-text
• Pointer events: pointer-events-none, pointer-events-auto

Dark Mode

• Use dark: prefix to style in dark mode.
• Example: dark:bg-gray-800, dark:text-white
• Configure in tailwind.config.js as 'media' or 'class'

Customizing Tailwind

• Extend via tailwind.config.js

module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: '#1e40af'
      },
    },
  },
  plugins: [],
};

Plugins

• First-party: forms, typography, aspect-ratio, line-clamp
• Use like: @tailwindcss/forms, then plugin: [require('@tailwindcss/forms')]

---

Use Tailwind to build layouts directly in your markup with precision. Remember: no custom class names, just compose.

For full documentation, see https://tailwindcss.com/docs