Professional CSS Workflow›Pro· 50 min read

Tailwind CSS Hands-On

Tailwind is the utility-first approach that dominates current job postings. Instead of writing CSS rules, you compose tiny pre-made classes right in your HTML — and because you already know real CSS, every class will make sense.

What you will learn

Explain the utility-first idea and its trade-offs
Build a component using utility classes
Use responsive and state variants like md: and hover:

What “utility-first” means

In the frameworks overview you met Tailwind briefly. Here we use it for real. The core idea is utility-first: instead of writing a CSS rule like .card { padding: 16px; ... }, you apply lots of tiny single-purpose classes directly on the element — p-4 for padding, rounded-lg for a border radius, shadow for a shadow. Each class does one thing, and you compose them like building blocks.

Every Tailwind class maps to plain CSS you already know. Here is the translation for the most common ones — notice there is nothing new conceptually, just shorter names:

Tailwind class	The CSS it means
`p-4`	`padding: 1rem` (the scale: 4 = 1rem)
`bg-indigo-600`	`background: a shade of indigo`
`text-white`	`color: white`
`rounded-lg`	`border-radius: 0.5rem`
`flex` / `gap-4`	`display: flex` / `gap: 1rem`
`md:flex`	apply `display: flex` at the medium breakpoint and up
`hover:bg-indigo-700`	change the background on `:hover`

A real component, the Tailwind way

Below is a card and a button built entirely with utility classes — no <style> block at all. This example loads Tailwind from a CDN so it runs live in the preview. Read the classes on each element, then the breakdown:

A complete card with zero hand-written CSS

<script src="https://cdn.tailwindcss.com"></script>

<div class="max-w-sm mx-auto bg-white border border-gray-200 rounded-xl shadow-md p-6">
  <h3 class="text-xl font-bold text-indigo-700 mb-2">Tailwind Card</h3>
  <p class="text-gray-500 mb-4">Built with utility classes — no custom CSS written.</p>
  <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
    Get started
  </button>
</div>

Live preview

Every visual decision is a class on the element. Tracing the card from outside in:

max-w-sm mx-auto — a small max-width, centred horizontally (this is margin: 0 auto from the Margins lesson).
bg-white border border-gray-200 rounded-xl shadow-md p-6 — white background, light grey border, large rounded corners, a soft shadow, and 1.5rem of padding. That is the whole box model and a shadow, in five classes.
text-xl font-bold text-indigo-700 mb-2 on the title — large, bold, indigo, with bottom margin.
On the button, hover:bg-indigo-700 darkens it on hover and transition smooths the change — the exact transition idea you learned, expressed as a class.

Note: Output: A centred white card with a subtle border, rounded corners and a shadow, containing an indigo bold heading, grey body text, and an indigo “Get started” button that darkens when you hover it.

Responsive and state variants

Tailwind handles responsiveness and states with prefixes called variants. A prefix like md: means “apply this class at the medium screen size and up”, and hover: means “apply on hover”. You stack the base (mobile) class and then add prefixed overrides — which is mobile-first, exactly the mindset from the Responsive unit.

Responsive layout with the md: variant — resize the preview

<script src="https://cdn.tailwindcss.com"></script>

<!-- Stacked (block) on phones; a row (flex) from the md breakpoint up -->
<div class="block md:flex gap-4">
  <div class="bg-indigo-100 p-4 rounded-lg mb-2 md:mb-0 flex-1">Column one</div>
  <div class="bg-indigo-100 p-4 rounded-lg flex-1">Column two</div>
</div>

Live preview

The wrapper has block (the mobile default: the two boxes stack) and md:flex (from the medium breakpoint up: lay them in a row). The boxes use flex-1 so they share the row equally. Narrow the preview and they stack; widen it past the medium breakpoint and they sit side by side. This is the responsive 3-2-1 thinking from the Media Queries lesson, written as variant prefixes instead of @media blocks.

Tip: In production you do not use the CDN; you install Tailwind via npm so its build step scans your HTML and outputs only the utility classes you actually used — keeping the final CSS tiny. The CDN here is purely so the examples run live.

Note: The honest trade-off: Tailwind makes you fast and consistent and removes naming worries, but the HTML fills with long class lists, and you must learn its class vocabulary. Because you learned real CSS first, every class is just a label for something you already understand — which is exactly why this lesson comes last.

Q. What does the md: prefix do on a Tailwind class like md:flex?

Answer: A breakpoint prefix like md: applies the class at that screen size and larger, following Tailwind’s mobile-first model — base class for small screens, prefixed overrides for bigger ones.

✍️ Practice

Rebuild a button you previously wrote in raw CSS using only Tailwind utility classes, including a hover: state.
Create a two-column section that stacks on mobile and goes side by side from md: up, using block md:flex and flex-1.

🏠 Homework

Recreate your landing page’s feature card with Tailwind utilities, then write two sentences comparing the experience to writing the CSS by hand.