Tailwind CSS Basics

Tailwind CSS gives you low-level utility classes that you compose directly in your HTML, so you never have to leave your markup to write styles.

What is utility-first CSS?

Traditional CSS asks you to invent class names and then write styles for them:

.card {
  padding: 1rem;
  background: white;
  border-radius: 0.5rem;
}

Tailwind flips this. Instead of inventing class names, you use small single-purpose classes directly:

<div class="p-4 bg-white rounded-lg">...</div>

Same result — no context-switching, no naming decisions, no growing stylesheet.

Installation

Install Tailwind in any Node.js project:

npm install tailwindcss @tailwindcss/postcss postcss

Create a postcss.config.js at the project root:

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Then create your main CSS file (e.g. src/styles/global.css) and import Tailwind:

@import "tailwindcss";

Import that CSS file once at the top level of your app (e.g. in layout.tsx for Next.js).

Spacing

Tailwind uses a numeric spacing scale where each step equals 0.25rem (4 px by default).

Padding

<div class="p-4">...</div>   <!-- padding: 1rem on all sides -->
<div class="px-6">...</div>  <!-- padding-left + padding-right: 1.5rem -->
<div class="py-2">...</div>  <!-- padding-top + padding-bottom: 0.5rem -->
<div class="pt-8">...</div>  <!-- padding-top: 2rem -->

Margin

<div class="m-4">...</div>   <!-- margin: 1rem on all sides -->
<div class="mx-auto">...</div> <!-- center horizontally -->
<div class="mt-6 mb-2">...</div>

Common spacing values

Typography

Font size

<p class="text-sm">Small text</p>
<p class="text-base">Base text (1rem)</p>
<p class="text-lg">Large text</p>
<p class="text-xl">Extra large</p>
<p class="text-2xl">2x extra large</p>
<p class="text-4xl">Heading size</p>

Font weight

<p class="font-normal">Regular weight</p>
<p class="font-medium">Medium weight</p>
<p class="font-semibold">Semibold</p>
<p class="font-bold">Bold</p>

Text color

<p class="text-gray-900">Almost black</p>
<p class="text-gray-500">Muted gray</p>
<p class="text-blue-600">Blue accent</p>
<p class="text-red-500">Error red</p>

Line height and alignment

<p class="leading-relaxed text-center">Centered, relaxed spacing</p>
<p class="leading-tight text-right">Tight, right-aligned</p>

Colors and backgrounds

Background color

<div class="bg-white">White background</div>
<div class="bg-gray-100">Light gray</div>
<div class="bg-blue-500">Blue</div>
<div class="bg-slate-900">Dark slate</div>

Borders

<div class="border border-gray-200 rounded-lg">Card with border</div>
<div class="border-2 border-blue-500 rounded-full">Blue pill</div>

Opacity

<div class="bg-blue-500 opacity-50">Semi-transparent</div>
<div class="text-gray-900/75">Text at 75% opacity</div>

Layout with Flexbox

<div class="flex items-center justify-between">
  <span>Left</span>
  <span>Right</span>
</div>

Stack items vertically and center them

<div class="flex flex-col items-center gap-6">
  <h1 class="text-3xl font-bold">Title</h1>
  <p class="text-gray-500">Subtitle</p>
</div>

Layout with Grid

<div class="grid grid-cols-3 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Sizing

Width and height

<div class="w-full">Full width</div>
<div class="w-1/2">Half width</div>
<div class="w-64">16rem wide</div>
<div class="h-screen">Full viewport height</div>
<div class="max-w-2xl mx-auto">Centered with max width</div>

Responsive design

Tailwind uses breakpoint prefixes. A class without a prefix applies at all sizes; a prefixed class overrides it at that breakpoint and above.

<!-- 1 column on mobile, 2 on tablet, 3 on desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  ...
</div>

<!-- Text gets larger on bigger screens -->
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">Hello</h1>

Dark mode

Add dark: before any class to apply it only in dark mode:

<div class="bg-white dark:bg-slate-900 text-gray-900 dark:text-gray-100">
  This adapts to light and dark mode automatically.
</div>

Dark mode is driven by the dark class on <html> (class strategy) or the OS preference (media strategy). In Next.js, next-themes handles toggling the dark class for you.

Hover, focus, and state variants

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-4 py-2 rounded">
  Click me
</button>

<input class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 rounded px-3 py-2" />

Common state prefixes:

Quick reference

Next steps

You can now style components entirely within your markup. Move on to React fundamentals to learn how to build interactive UIs that put these styles to work.