Learn Tailwind CSS - Utility-First Workflow — The Most Commonly Used Basic Classes

#Introduction

In episode 3 your toolchain was ready. Now we get to the part you'll use most: writing utility classes. Episode 4 covers the basic class groups — typography, spacing, sizing, display, positioning, flexbox, grid, and state variants. This is the core vocabulary of Tailwind.

The key to remembering class names is mapping them to CSS properties: p- for padding, m- for margin, text- for text size and color, w- and h- for dimensions. Once you master this pattern, guessing new classes becomes easy — Tailwind's naming consistency is designed exactly that way.

#Typography Utilities

#Text Size, Weight, and Color

Text size uses the text-xs to text-9xl scale, with text-base as the default. Font weight uses font-thin to font-black. Text color uses text-* with the built-in color palette:

Typography example

<h1 class="text-4xl font-bold text-gray-900">Judul Halaman</h1>
<p class="text-sm font-medium text-gray-600">Deskripsi singkat.</p>

text-gray-900 uses the gray color token at level 900. You don't need to remember hex codes — just the tokens.

#Line-height and Letter-spacing

Line-height uses leading-*: leading-tight, leading-relaxed, leading-6, and leading-none. Letter-spacing uses tracking-*: tracking-tight, tracking-wide, tracking-widest. Both matter for the readability of long text:

Leading and tracking

<p class="text-lg leading-relaxed tracking-wide">
  Paragraf dengan jarak baris dan spasi huruf yang nyaman dibaca.
</p>

#Spacing and Sizing

#Padding and Margin

Tailwind's spacing scale is a multiple of 0.25rem: p-1 equals 4px, p-4 equals 16px. The direction suffixes are x, y, and single sides t, r, b, l:

Padding and margin

<div class="px-4 py-2 mt-8 mb-4 mx-auto max-w-md">
  Padding horizontal 4, vertikal 2, margin auto di kiri-kanan.
</div>

mx-auto centers a block element horizontally — one of the most used classes for layout.

#Width and Height

Width and height use the same scale: w-64 means 16rem, h-32 means 8rem. There are also fractional and relative forms: w-full, w-1/2, min-h-screen, max-w-md:

Sizing

<img src="foto.jpg" alt="Contoh" class="w-full h-48 object-cover rounded-lg" />
<div class="max-w-lg mx-auto">
  Konten dibatasi lebar maksimal 32rem.
</div>

#Display and Positioning

Display: block, inline-block, inline, flex, grid, and hidden. Positioning: relative, absolute, fixed, sticky, paired with top-*, right-*, bottom-*, left-*, plus z-* for layer order:

Positioning

<div class="relative h-40">
  <div class="absolute inset-0 bg-black/50"></div>
  <button class="absolute bottom-4 right-4 z-10">Tindakan</button>
</div>

absolute inset-0 stretches an element to cover the entire relative parent — a common overlay technique.

#Flexbox and Grid

#Flex Layout

Enable with flex, set the direction with flex-row or flex-col, then arrange with justify-* and items-*. Spacing between items uses gap-*:

Flex layout

<div class="flex items-center justify-between gap-4 p-4">
  <div class="flex-1">Kiri</div>
  <div class="flex-1">Tengah</div>
  <div class="flex-1">Kanan</div>
</div>

#Grid Layout

Enable with grid, set columns with grid-cols-*, and control span with col-span-*:

Grid layout

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Sel lebar</div>
  <div>Sel sempit</div>
</div>

grid-cols-3 creates three equal columns; col-span-2 makes one item span two columns.

#State & Variants

Variants let styles change based on conditions: hover:, focus:, focus-visible:, active:, and disabled:. They're used as a prefix before the class:

State variants

<button
  class="rounded bg-blue-500 px-4 py-2 text-white
         hover:bg-blue-600 active:bg-blue-700
         focus-visible:ring-2 focus-visible:ring-blue-300
         disabled:opacity-50 disabled:cursor-not-allowed"
>
  Simpan
</button>

hover:bg-blue-600 changes the background when the cursor is over the element, disabled:opacity-50 dims the button when it's disabled. Variants can be combined with breakpoints — md:hover:bg-blue-600 — and this pattern gets deeper coverage in episodes 5 and 17.

#Conclusion

Episode 4 unlocked Tailwind's core vocabulary: typography, spacing, sizing, display, positioning, flexbox, grid, and state variants. You can now build simple layouts without writing a single line of custom CSS.

Key takeaways:

• Tailwind classes map directly to CSS properties: p-, m-, text-, w-, h-.
• The spacing scale is based on 0.25rem; suffixes x, y, t, r, b, l control direction.
• mx-auto centers a block element; absolute inset-0 covers its parent.
• Flexbox and grid work with just flex, grid-cols-*, justify-*, items-*, gap-*.
• Variants hover, focus, active, disabled are prefixes before the class.
• The md:hover:bg-blue-600 combination starts the responsive state pattern.

Next, in episode 5, we'll cover responsive design & breakpoints — the screens system in the config, the mobile-first approach, using utilities per breakpoint, and complex breakpoint patterns for adaptive layouts.