Tailwind CSS Tailwind Introduction Understanding the Tailwind Class Naming Convention

Tailwind CSS Beginner 1 min read

Understanding the Tailwind Class Naming Convention

Tailwind utility classes follow a consistent naming pattern that makes them easy to learn and remember. Most classes are structured as property-value pairs separated by a hyphen: text-lg, bg-red-500, p-4, m-auto, border-2. Once you recognise the pattern, you can often guess the correct class name without consulting the documentation. Numeric scales in Tailwind map to a specific design system. Spacing values like p-4 and m-8 use a scale where 1 unit equals 0.25rem (4px at default root size). Color classes include a palette name and a shade number from 50 (lightest) to 950 (darkest): text-blue-600, bg-emerald-400, border-rose-200. Size utilities like text-sm, text-base, text-lg, text-xl follow a named scale. Modifier prefixes extend any utility class: hover:, focus:, active:, disabled: for interactive states; sm:, md:, lg:, xl:, 2xl: for responsive breakpoints; dark: for dark-mode variants. These modifiers stack — you can write md:hover:bg-blue-700 to apply a hover background change only on medium screens and above. This composability is the core power of Tailwind.

Example

<!-- Class naming anatomy: [variant:]property-value -->

<!-- Spacing scale: 1 = 0.25rem, 4 = 1rem, 8 = 2rem, 16 = 4rem -->
<div class="p-4 m-2 mt-8 px-6 py-3">
  <!-- p-4   → padding: 1rem (all sides)       -->
  <!-- m-2   → margin: 0.5rem (all sides)       -->
  <!-- mt-8  → margin-top: 2rem                 -->
  <!-- px-6  → padding-left + right: 1.5rem     -->
  <!-- py-3  → padding-top + bottom: 0.75rem    -->
</div>

<!-- Color scale: 50 (lightest) → 950 (darkest) -->
<button class="bg-blue-500 text-white hover:bg-blue-700 border border-blue-300">
  Click me
</button>

<!-- Responsive modifiers stack left-to-right (mobile first) -->
<p class="text-sm md:text-base lg:text-lg xl:text-xl">
  Grows with viewport width
</p>

<!-- State modifiers -->
<input
  class="border border-gray-300
         focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200
         disabled:opacity-50 disabled:cursor-not-allowed"
  type="text"
  placeholder="Type here"
/>

<!-- Combining responsive + state modifiers -->
<div class="bg-white dark:bg-gray-900 md:hover:shadow-xl transition-shadow">
  Combined variants
</div>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned