CSSeasy10 min read

Tailwind CSS in 10 Minutes (Hands-On)

A short, editable intro to Tailwind CSS: what it is, why people reach for it, and how shadcn/ui and headless component libraries fit on top. Edit the code, watch it change.

Published · by Frontend Masters India

You already know CSS. So why do half the job postings now ask for Tailwind? Spend ten minutes here and you will get it. Every code box below is live, so change the classes and watch the result update on the right.

The problem Tailwind solves

Writing CSS is easy. Organizing it is the hard part. You name a class .card, then .card-header, then .card-header--featured, and three months later nobody remembers which file that lives in or what breaks if you delete it. You also keep jumping between your HTML and your stylesheet to make one button look right.

Tailwind skips the stylesheet. Instead of writing CSS, you apply small pre-made classes straight in your markup. p-4 is padding: 1rem. text-red-500 is a specific red. flex is display: flex. You build the look by stacking these classes on the element.

Here is a plain button. Try changing bg-blue-600 to bg-green-600, or rounded-lg to rounded-full.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-white p-6 font-sans text-gray-900">
    
  </body>
</html>

Nothing magic happened. Each class maps to one or two CSS rules. The win is that you never left the HTML and you never invented a class name.

The classes you will use constantly

You do not need to memorize the whole list. About fifteen patterns cover most of what you write day to day:

  • Spacing: p-4 (padding), m-2 (margin), px-6 / py-2 (horizontal / vertical), gap-4
  • Color: bg-gray-100, text-gray-800, border-gray-300
  • Text: text-sm, text-xl, font-bold, text-center
  • Layout: flex, grid, items-center, justify-between
  • Box: rounded-lg, border, shadow-md, w-full, max-w-sm

The numbers follow a scale. p-1 is small, p-4 is medium, p-8 is bigger. Once the scale is in your fingers you stop thinking about pixels.

Build a card with them. Try swapping shadow-md for shadow-xl, or max-w-sm for max-w-xs.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-white p-6 font-sans text-gray-900">
    
  </body>
</html>

Hover, focus, and screen sizes

This is where Tailwind earns its keep. You handle states and breakpoints with a prefix, right on the element. No media query block, no :hover rule in a separate file.

  • hover:bg-blue-700 applies only on hover
  • focus:ring-2 applies only on keyboard focus
  • md:flex-row applies only on medium screens and up

In the box below, hover the button to see the color shift. The layout starts stacked and switches to a row on wider screens, so drag the preview wider or open it full size.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-white p-6 font-sans text-gray-900">
    
  </body>
</html>

The prefix you would normally write as a @media (min-width: 768px) rule is just md:. That is the part people fall for.

So why use it

A few honest reasons, and one honest complaint.

It is fast once it clicks. You style without naming things or switching files, and your CSS file basically stops growing because everyone reuses the same utilities. Your bundle stays small too, since Tailwind strips out every class you did not use.

The complaint: your HTML gets noisy. A button can carry ten classes, and a long class="..." string is genuinely ugly the first week. Most people stop noticing after that, and when a chunk of markup repeats you pull it into a component so the classes live in one place. If the long strings still bug you, that is a fair reaction, not a beginner mistake.

Where shadcn/ui comes in

You probably ran into the name "shadcn/ui" (sometimes misheard as "shadow cdn"). It is not a CDN and not really a library you install the usual way.

shadcn/ui is a set of ready-made components built with Tailwind. The twist: you do not import it as a package. You run a command that copies the actual component source into your project, and from then on the code is yours to edit. A Button, a Dialog, a Dropdown, already styled with sensible Tailwind classes, sitting in your repo as plain files.

People like it because there is no black box. When the dropdown does not behave the way you want, you open the file and change it, instead of fighting a library's props. The styling is Tailwind, so everything you just learned applies directly.

Where "headless" fits

The other term you will hear is headless components, from libraries like Headless UI or Radix UI. ("Headless CSS" is not really a thing, so if someone says that, this is what they mean.)

A headless component gives you the behavior with none of the looks. A headless dropdown handles the hard parts: opening and closing, keyboard arrows, focus trapping, screen-reader labels. It ships zero styling. You bring the appearance yourself, which in a Tailwind project means you add the classes.

That is the whole stack, bottom to top. Tailwind gives you the styling vocabulary. A headless library gives you correct, accessible behavior with no opinion on looks. shadcn/ui sits on top of both and hands you components that already combine the two, as code you own. You can use Tailwind alone, add a headless library when you need a real dropdown or modal, and reach for shadcn/ui when you want a running start.

Try one more thing

Make this alert look like a success message instead of an error. Change the reds to greens (bg-red-50 to bg-green-50, and so on) and rewrite the text.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-white p-6 font-sans text-gray-900">
    
  </body>
</html>

If that felt easy, you have the core of Tailwind. The rest is looking up class names, and the docs have a search box for exactly that. Build a couple of real components and the names stick faster than you would expect.

Before you leave — how confident are you with this?

Your honest rating shapes when you'll see this again. No grades, no shame.

Comments

to join the discussion.

Loading comments…

Keep reading