Tailwind CSS Basics

What Makes Up Tailwind CSS Basics?

Every Tailwind class maps to a value from a shared design scale. Spacing, font sizes, colors, and border radii are not arbitrary; they come from a consistent scale defined once in your Tailwind configuration and reused across every utility.

Because every utility pulls from the same scale, spacing and sizing stay visually consistent across an entire application, even when many different developers are writing markup.

<div class="mx-auto max-w-2xl space-y-4 p-6">
  <h2 class="text-2xl font-bold text-slate-900">Basics Example</h2>
  <p class="text-slate-600">Spacing and typography both come from the same scale.</p>
</div>

max-w-2xl, p-6, and space-y-4 all pull numeric values from Tailwind's shared spacing/sizing scale, so they always line up visually.

Composing Utility Classes

<element class="utility-1 utility-2 utility-3 ...">

• Classes are space-separated and order does not affect the final styles.
• You can combine as many utilities as needed on one element.
• Longer class lists are normal in Tailwind; formatting tools like Prettier's Tailwind plugin help sort them.
• Duplicate or conflicting utilities (like p-2 p-4) resolve based on which rule appears later in the compiled CSS, so avoid conflicts instead of relying on order.

Tailwind Basics Cheatsheet

Core scale-based utilities you will reach for constantly.

Understanding the Design Scale

Tailwind's spacing scale starts at 0 and increases in small, predictable steps: 1 equals 0.25rem (4px), 2 equals 0.5rem (8px), 4 equals 1rem (16px), and so on. The same numbers are reused for padding, margin, width, height, and gap utilities.

<div class="p-1">4px padding</div>
<div class="p-2">8px padding</div>
<div class="p-4">16px padding</div>
<div class="p-8">32px padding</div>

Because every spacing utility shares this scale, a gap-4 next to a p-4 will always look visually balanced.

A Typical Tailwind Project Structure

Most Tailwind projects have a configuration file (tailwind.config.js in v3, or CSS-based configuration in v4), a main CSS file with Tailwind's directives, and a build tool (Vite, PostCSS, or a framework like Astro/Next.js) that compiles everything.

• tailwind.config.js — defines your theme, content paths, and plugins.
• src/input.css — contains the @tailwind directives (v3) or @import "tailwindcss" (v4).
• dist/output.css — the generated, purged CSS file your HTML links to.
• Your framework's build step usually runs the Tailwind compiler automatically.

Class Order and Readability

Class order does not change how styles are applied, but a consistent order makes markup easier to scan. A common convention groups layout, then spacing, then sizing, then typography, then color, then state variants.

<div class="flex items-center gap-2 p-4 w-full text-sm font-medium text-slate-700 bg-white hover:bg-slate-50">
  Consistent ordering
</div>

Common Mistakes

• Guessing spacing values instead of learning the numeric scale, leading to inconsistent margins across a project.
• Writing custom pixel values everywhere with arbitrary value syntax instead of using the design scale.
• Not installing the Prettier Tailwind plugin, which leads to messy, hard-to-review class lists.
• Believing class order changes specificity; specificity in compiled Tailwind CSS depends on stylesheet order, not attribute order.
• Forgetting that negative spacing utilities use a leading dash, like -mt-2, not mt--2.

Key Takeaways

• Every Tailwind utility pulls from a shared, consistent design scale.
• The spacing scale increases in 0.25rem steps and is reused for padding, margin, width, height, and gap.
• A Tailwind project needs a config file, a CSS entry file with Tailwind directives, and a build step.
• Class order in the HTML attribute does not affect the final computed styles.
• Consistent utility ordering improves markup readability even though it doesn't change behavior.