Getting Started

Core Concepts

Understand how Tailwind utility classes work and how to read the documentation.

Naming Convention

Tailwind classes follow a consistent pattern: {property}-{value}

  • text-lg — font-size: large
  • p-4 — padding: 1rem (4 * 0.25rem)
  • bg-red-500 — background-color: red shade 500
  • rounded-md — border-radius: medium

Responsive Design

Add breakpoint prefixes to apply styles at specific screen sizes:

  • sm: — 640px+
  • md: — 768px+
  • lg: — 1024px+
  • xl: — 1280px+
  • 2xl: — 1536px+

State Variants

Apply styles based on element state:

  • hover: — on hover
  • focus: — on focus
  • active: — on click
  • disabled: — when disabled
  • dark: — dark mode

Example

html
<!-- Responsive design -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="p-4 bg-white rounded shadow">Card 1</div>
  <div class="p-4 bg-white rounded shadow">Card 2</div>
  <div class="p-4 bg-white rounded shadow">Card 3</div>
</div>

<!-- State variants -->
<button class="
  bg-blue-500
  hover:bg-blue-600
  active:bg-blue-700
  focus:outline-none focus:ring-2 focus:ring-blue-400
  disabled:opacity-50 disabled:cursor-not-allowed
  text-white font-medium px-4 py-2 rounded
  transition-colors duration-200
">
  Interactive Button
</button>

<!-- Dark mode -->
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-4">
  Works in both light and dark mode
</div>

<!-- Responsive text sizes -->
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
  Responsive Heading
</h1>

<!-- Show/hide at breakpoints -->
<div class="hidden md:block">Only visible on medium+ screens</div>
<div class="md:hidden">Only visible on small screens</div>
Try it yourself — HTML