Styling With Utility Classes

How utility class names map to CSS properties.

Syntaxclass="{property}-{value}"

Most utility names follow a simple pattern: a property prefix, then a value. Learn the prefix once and the whole family makes sense.

Class	CSS it applies
`text-lg`	font-size: 1.125rem
`font-bold`	font-weight: 700
`m-4`	margin: 1rem
`flex`	display: flex

Because values come from a fixed scale, your designs stay consistent automatically.

Example

Loading editor…

Press Run to see the result.

When to use it

A developer reads a Tailwind class name like text-red-500 and immediately understands it sets color: rgb(239 68 68) without opening any CSS file.
A code reviewer quickly audits spacing consistency by scanning for p- and m- utility prefixes rather than hunting through stylesheets.
An onboarding engineer learns the project's design language by reading class names in JSX rather than studying a separate CSS architecture.

More examples

Class-to-CSS mapping

Each Tailwind utility class maps to a specific CSS property-value pair, making the generated CSS entirely predictable.

<!-- text-red-500  -> color: rgb(239 68 68) -->
<!-- p-4          -> padding: 1rem -->
<!-- font-bold    -> font-weight: 700 -->
<p class="text-red-500 p-4 font-bold">Error message</p>

Spacing utilities mapped

Margin and padding utilities follow a consistent naming convention where the number maps to a fixed rem value from Tailwind's spacing scale.

<div class="mt-2 mb-4 ml-6 pl-3 pr-3">
  <!-- mt-2 = margin-top: 0.5rem  -->
  <!-- mb-4 = margin-bottom: 1rem -->
  <!-- ml-6 = margin-left: 1.5rem -->
  <!-- pl-3 = padding-left: 0.75rem -->
  Content
</div>

Display and flex utilities

Layout utility classes map directly to flexbox CSS properties, making the relationship between class name and behavior transparent.

<div class="flex items-center justify-between gap-4">
  <!-- flex         -> display: flex -->
  <!-- items-center -> align-items: center -->
  <!-- justify-between -> justify-content: space-between -->
  <!-- gap-4        -> gap: 1rem -->
  <span>Left</span>
  <span>Right</span>
</div>

Discussion

Be the first to comment on this lesson.