Tailwind CSS: Optional Background

This chapter introduces utility classes as an alternative to the component styles used in the course.

From component classes to utilities

The earlier examples group related styles under a component-specific class:

<section class="notice">
  <h2>Schedule update</h2>
  <p>The workshop starts at 10:00.</p>
</section>

.notice {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #f1f5f9;
}

A utility class expresses a small presentation choice. Utility-first styling combines these classes in the markup instead of collecting the choices under one component class. Tailwind CSS provides utilities for spacing, colors, layout, and other CSS properties. With Tailwind available, the same notice could use:

<section class="rounded-lg bg-slate-100 p-4">
  <h2>Schedule update</h2>
  <p>The workshop starts at 10:00.</p>
</section>

Here rounded-lg selects rounded corners, bg-slate-100 a background color, and p-4 padding. Tailwind generates the CSS for the utilities it finds in source files. The class names alone have no styling effect in an application that does not include that generated CSS.

Utility classes, responsive layout, and accessibility

Utilities let a team reuse a common vocabulary of spacing, colors, and sizes. They also make presentation choices visible beside the element being styled. The tradeoff is longer class lists; repeated combinations still need thoughtful organization, often through reusable components.

Tailwind also supports conditional utilities. For example, grid-cols-1 md:grid-cols-2 describes one column by default and two from the md breakpoint upward. These are CSS layout decisions, so understanding Grid and responsive design remains useful.

Styling tools do not choose meaningful headings, associate labels with inputs, or decide where focus belongs after an error. The accessibility principles in this part apply whichever approach a project uses for its CSS.

Further reading

The official utility-class introduction explains the approach and its tradeoffs. Tailwind Play provides a browser playground for exploring examples.