MainAdvanced Examples
TLDR /CSS

Tailwind CSS Cheatsheet

Help others learn from this page

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

Frequently Asked Questions

FAQ

What is the difference between Tailwind and Bootstrap?
Unlike Bootstrap, Tailwind doesn’t come with predefined UI components. It isn't a compoonoent library. It simply provides low-level utility classes you compose into custom designs.
Can I use Tailwind with CSS-in-JS or styled-components?
Yes, but it’s usually redundant. Tailwind replaces the need for CSS-in-JS in most cases. However, you can use Tailwind class names within styled-components if needed.
Does Tailwind increase my final CSS bundle size?
No. Tailwind uses a Just-In-Time (JIT) engine that generates only the CSS you use in your HTML/JSX. Unused styles are purged automatically.

Related Concepts

Found this helpful? Share it!