Tailwind CSS for Beginners: Utility Classes Explained (Try Them Live)
What utility-first CSS is, the Tailwind classes you'll use most, how responsive and hover variants work, and a free playground to practise in.
Editorial disclosure: Pyalm publishes and maintains the products and free tools discussed on this site. Regulatory statements are linked to primary sources where applicable. No independent professional review is claimed unless a reviewer is explicitly named.
Tailwind CSS replaces writing custom CSS rules with small, single-purpose classes applied directly in your HTML. class="p-6 rounded-2xl bg-white shadow-lg" gives you padding, rounded corners, a white background and a shadow — no stylesheet needed.
Why teams use it
- Speed — style without switching files or naming things.
- Consistency — spacing, colours and font sizes come from one scale.
- Small CSS — only the classes you use end up in production.
- Easy to change — styles live with the markup, so deleting a component deletes its styles.
The classes you'll use most
| Purpose | Examples |
|---|---|
| Spacing | p-4 px-6 mt-2 gap-3 space-y-2 |
| Sizing | w-full max-w-md h-40 |
| Layout | flex grid grid-cols-3 items-center justify-between |
| Typography | text-sm text-2xl font-bold text-slate-600 leading-tight |
| Colour | bg-emerald-600 text-white border-slate-200 |
| Borders | border rounded-lg rounded-full |
| Effects | shadow-lg opacity-50 ring-2 |
Variants: responsive, hover, dark
Prefix a class to apply it conditionally:
md:grid-cols-3— three columns from the medium breakpoint up (mobile-first)hover:bg-emerald-700— on hoverfocus:ring-2— when focuseddark:bg-slate-900— in dark mode
Arbitrary values
Need something off the scale? Use square brackets: bg-[#2E8B57], w-[340px], shadow-[0_4px_12px_rgba(0,0,0,0.08)].
Practise in the browser
The free Tailwind CSS Playground runs Tailwind v4 in an isolated preview. Start from a card, pricing table, hero or form template, edit the classes, and switch between mobile, tablet and desktop widths to see responsive variants work. Your last edit is saved in your browser.
Tailwind v4 in brief
Version 4 is configured in CSS rather than tailwind.config.js:
@import "tailwindcss";
@theme {
--color-brand: #2E8B57;
}Then bg-brand and text-brand just work.
Keep markup readable
Extract repeated patterns into components (React, Vue, Blade) rather than copying long class lists. Use the official Prettier plugin to sort classes consistently.
Rather have it built?
Pyalm designs and builds fast, conversion-focused websites in Next.js — the same stack these tools run on — with a consistent design system, accessible colours and technical SEO built in.
Related free tools
Tailwind Playground | Flexbox Playground | Color Converter | Box Shadow Generator | All free tools