nonobieBETA
GitHub
HomeCSS Tailwind
Chapter 2

02 — Tailwind CSS Fundamentals

Setup

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Core Philosophy

Utility-first: Build with small, composable classes.

<!-- Instead of -->
<button class="btn-primary">Click</button>
 
<!-- Use -->
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  Click
</button>

Spacing Scale

0    → 0
0.5  → 0.125rem  (2px)
1    → 0.25rem   (4px)
1.5  → 0.375rem  (6px)
2    → 0.5rem    (8px)
2.5  → 0.625rem  (10px)
3    → 0.75rem   (12px)
4    → 1rem      (16px)
5    → 1.25rem   (20px)
6    → 1.5rem    (24px)
8    → 2rem      (32px)
10   → 2.5rem    (40px)
12   → 3rem      (48px)
16   → 4rem      (64px)
20   → 5rem      (80px)
24   → 6rem      (96px)
32   → 8rem      (128px)

Usage: m-4 (margin: 1rem), p-2 (padding: 0.5rem), gap-6

Colors

bg-blue-500      text-blue-500      border-blue-500
bg-slate-900     text-slate-900     border-slate-900
bg-white         text-white         border-white
bg-black         text-black         border-black

Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

<div class="bg-slate-100 text-slate-900 border border-slate-300">
  Content
</div>

Flexbox

<!-- Direction -->
<div class="flex flex-row">        <!-- row (default) -->
<div class="flex flex-col">        <!-- column -->
 
<!-- Justify Content -->
<div class="flex justify-start">    <!-- flex-start (default) -->
<div class="flex justify-center">   <!-- center -->
<div class="flex justify-end">       <!-- flex-end -->
<div class="flex justify-between">  <!-- space-between -->
<div class="flex justify-around">   <!-- space-around -->
 
<!-- Align Items -->
<div class="flex items-start">      <!-- flex-start -->
<div class="flex items-center">     <!-- center -->
<div class="flex items-end">        <!-- flex-end -->
<div class="flex items-baseline">   <!-- baseline -->
<div class="flex items-stretch">    <!-- stretch (default) -->
 
<!-- Gap -->
<div class="flex gap-4">             <!-- 1rem gap -->
<div class="flex gap-x-4 gap-y-2">   <!-- horizontal/vertical -->
 
<!-- Wrap -->
<div class="flex flex-wrap">        <!-- Allow wrapping -->

Grid

<!-- Basic Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
 
<!-- Responsive Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>Item</div>
</div>
 
<!-- Span Columns/Rows -->
<div class="col-span-2">    <!-- Span 2 columns -->
<div class="row-span-3">    <!-- Span 3 rows -->
 
<!-- Grid Template -->
<div class="grid grid-cols-[100px_1fr_200px] gap-4">
  <!-- Custom column sizes -->
</div>

Typography

<!-- Font Size -->
<p class="text-xs">Extra small</p>    <!-- 0.75rem -->
<p class="text-sm">Small</p>          <!-- 0.875rem -->
<p class="text-base">Base</p>         <!-- 1rem -->
<p class="text-lg">Large</p>          <!-- 1.125rem -->
<p class="text-xl">Extra large</p>    <!-- 1.25rem -->
<p class="text-2xl">2xl</p>           <!-- 1.5rem -->
<p class="text-3xl">3xl</p>           <!-- 1.875rem -->
<p class="text-4xl">4xl</p>           <!-- 2.25rem -->
 
<!-- Font Weight -->
<p class="font-thin">Thin</p>         <!-- 100 -->
<p class="font-light">Light</p>       <!-- 300 -->
<p class="font-normal">Normal</p>     <!-- 400 -->
<p class="font-medium">Medium</p>     <!-- 500 -->
<p class="font-semibold">Semibold</p> <!-- 600 -->
<p class="font-bold">Bold</p>         <!-- 700 -->
 
<!-- Text Alignment -->
<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>
 
<!-- Text Color -->
<p class="text-blue-500">Blue text</p>
<p class="text-slate-900">Dark text</p>
 
<!-- Line Height -->
<p class="leading-tight">Tight</p>     <!-- 1.25 -->
<p class="leading-normal">Normal</p>   <!-- 1.5 -->
<p class="leading-relaxed">Relaxed</p> <!-- 1.625 -->

Sizing

<!-- Width -->
<div class="w-8">2rem</div>           <!-- 2rem -->
<div class="w-1/2">50%</div>          <!-- 50% -->
<div class="w-full">100%</div>        <!-- 100% -->
<div class="w-screen">100vw</div>     <!-- Viewport width -->
<div class="w-auto">Auto</div>        <!-- Auto -->
<div class="w-max">Max</div>          <!-- Max-content -->
<div class="w-min">Min</div>          <!-- Min-content -->
 
<!-- Height -->
<div class="h-8">2rem</div>
<div class="h-full">100%</div>
<div class="h-screen">100vh</div>
 
<!-- Min/Max -->
<div class="min-w-0">Min width 0</div>
<div class="max-w-md">Max width 28rem</div>
<div class="max-w-screen-lg">Max width 64rem</div>
<div class="max-w-full">Max width 100%</div>

Borders

<!-- Border Width -->
<div class="border-2">2px border</div>
<div class="border-t-4">Top border only</div>
 
<!-- Border Color -->
<div class="border-blue-500">Blue border</div>
 
<!-- Border Radius -->
<div class="rounded">0.25rem</div>          <!-- Small -->
<div class="rounded-md">0.375rem</div>      <!-- Medium -->
<div class="rounded-lg">0.5rem</div>        <!-- Large -->
<div class="rounded-xl">0.75rem</div>       <!-- Extra large -->
<div class="rounded-full">9999px</div>      <!-- Pill/Circle -->
<div class="rounded-t-lg">Top corners only</div>
 
<!-- Border Style -->
<div class="border-dashed">Dashed</div>
<div class="border-dotted">Dotted</div>

Backgrounds

<!-- Background Color -->
<div class="bg-blue-500">Blue</div>
<div class="bg-slate-900">Dark</div>
 
<!-- Opacity -->
<div class="bg-blue-500/50">50% opacity</div>
 
<!-- Gradient -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  Gradient
</div>

Display & Visibility

<!-- Display -->
<div class="block">Block</div>
<div class="inline">Inline</div>
<div class="inline-block">Inline-block</div>
<div class="flex">Flex</div>
<div class="grid">Grid</div>
<div class="hidden">Hidden</div>
 
<!-- Responsive Display -->
<div class="hidden md:block">Hidden on mobile, block on desktop</div>
 
<!-- Visibility -->
<div class="visible">Visible</div>
<div class="invisible">Invisible (still takes space)</div>
 
<!-- Opacity -->
<div class="opacity-50">50% opacity</div>
<div class="opacity-0">Invisible</div>

Position

<div class="relative">
  <div class="absolute top-0 left-0">Top-left corner</div>
  <div class="absolute bottom-0 right-0">Bottom-right corner</div>
  <div class="absolute inset-0">Cover entire parent</div>
</div>
 
<div class="fixed top-0 left-0 w-full">Fixed header</div>
<div class="sticky top-0">Sticks when scrolling</div>

Z-Index

<div class="z-0">Default</div>
<div class="z-10">Above default</div>
<div class="z-50">Modal</div>
<div class="z-auto">Auto</div>

Key Takeaways

  • Utility-first: Compose small classes instead of writing custom CSS
  • Responsive prefixes: sm:, md:, lg:, xl:, 2xl: for breakpoints
  • Hover/focus states: hover:bg-blue-600, focus:ring-2
  • Spacing scale: 0.25rem increments (m-4 = 1rem margin)
  • Colors: Use shades (50-950) for consistent design system
  • Flex/Grid: Built-in utilities for modern layouts
  • Customization: Extend in tailwind.config.js
Previous01 — CSS FundamentalsNext 03 — Responsive Design & Breakpoints