Module 1: Tailwind Foundations

Utility-First: The Mental Model

Tailwind CSS looks strange the first time you see it. Instead of a tidy class like card and a separate stylesheet, you see HTML full of short classes such as p-6, rounded-lg and shadow-md. Many developers dislike it at first sight and then refuse to go back after a week of real use. Understanding why it works, and where its limits are, will make everything else in this course easier.

The traditional approach and its problems

In traditional CSS you invent a class name for each component and write its styles in a stylesheet:

<div class="product-card">
  <h3 class="product-card__title">Maasai Shuka Blanket</h3>
  <p class="product-card__price">KES 2,500</p>
</div>

.product-card { padding: 1.5rem; border-radius: 0.5rem; background: #fff;
                box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.product-card__title { font-size: 1.125rem; font-weight: 600; }
.product-card__price { color: #047857; margin-top: 0.5rem; }

This works, but as projects grow, familiar problems appear. You spend time naming things. Stylesheets grow forever because nobody dares delete a rule that might be used somewhere. Values drift: one card uses a 14px gap, another 15px, another 1rem. And to change how something looks, you jump between two files.

The utility-first approach

Tailwind provides a large set of small, single-purpose classes called utilities. Each one does one thing: p-6 sets padding, font-semibold sets font weight, text-emerald-700 sets text colour. You compose designs by combining them directly in your markup:

<div class="rounded-lg bg-white p-6 shadow-md">
  <h3 class="text-lg font-semibold">Maasai Shuka Blanket</h3>
  <p class="mt-2 text-emerald-700">KES 2,500</p>
</div>

The result looks the same, but several things have changed:

• No naming. You style what you see without inventing class names.
• A design system by default. p-6 and mt-2 come from a consistent spacing scale, and text-emerald-700 from a curated colour palette. You choose from options instead of inventing values, so designs stay consistent.
• Local changes are safe. Changing classes on this element cannot break another page.
• CSS stops growing. Tailwind scans your files and generates only the utilities you actually use, so the final stylesheet stays small even as the project grows.
• Responsive design and states inline. md:p-8 or hover:shadow-lg apply styles at a breakpoint or on hover without writing media queries.

"Isn't this just inline styles?"

It looks similar but it is different in important ways. Inline styles (style="padding: 24px") accept any value, so they do not enforce consistency. They cannot express hover states, focus states or media queries. Tailwind utilities are constrained to your design system, support every state and breakpoint, and are ordinary CSS classes, so the browser caches one small stylesheet.

Where repetition goes

A fair worry is repetition: if ten buttons all need the same twelve classes, do you copy them ten times? No. In real projects you render repeated UI with a loop or a component in your template system or framework (React, Vue, Blade, Django templates, and so on). The classes live in one place: the component. You will study this in the "Extracting Components" lesson. Copying long class lists by hand across many files is a sign you need a component.

Worked example: thinking in utilities

A Nairobi SACCO wants an alert telling members their loan application was received. Think through it visually and translate each decision into a utility:

1. Light green background: bg-green-50
2. Green border on the left: border-l-4 border-green-600
3. Comfortable padding: p-4
4. Dark green readable text: text-green-900
5. Slightly rounded corners: rounded-md

<div class="rounded-md border-l-4 border-green-600 bg-green-50 p-4 text-green-900" role="status">
  <p class="font-medium">Application received</p>
  <p class="mt-1 text-sm">We will send an SMS when your loan is reviewed.</p>
</div>

You never left the HTML, every value came from the design system, and the result is easy for another developer to read.

Common mistakes to avoid

• Judging by first impressions. Build one real page before deciding whether the approach suits you.
• Fighting the scale. Constantly reaching for arbitrary values such as p-[13px] throws away consistency. Use them rarely.
• Copying class lists everywhere. Use components or loops for repeated UI.
• Skipping CSS fundamentals. Tailwind is a faster way to write CSS, not a replacement for understanding it. You still need to know how flexbox, grid and the box model work.