Tailwind Classes Reference

Tailwind CSS uses utility classes to style elements. Instead of writing CSS, you apply pre-made classes directly to your HTML. This guide covers the most commonly used classes in our codebase.

What You'll Learn

• Core Tailwind utility categories
• Most frequently used classes
• How to combine classes for complex styling
• Class naming patterns and conventions
• How to find classes you need

How Tailwind Works

Traditional CSS Approach

/* styles.css */
.button {
  background-color: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

<button class="button">Click me</button>

Tailwind Approach

<button class="bg-blue-600 text-white px-4 py-2 rounded-lg">
  Click me
</button>

Advantages:

• No separate CSS file needed
• See all styles right in the component
• Consistent design system (spacing, colors)
• Smaller final bundle size

Color Classes

Background Colors

Pattern: bg-{color}-{shade}

<div className="bg-blue-600">Blue background</div>
<div className="bg-red-500">Red background</div>
<div className="bg-green-700">Dark green background</div>

Available colors:

• slate, gray, zinc, neutral, stone
• red, orange, amber, yellow, lime, green
• emerald, teal, cyan, sky, blue, indigo
• violet, purple, fuchsia, pink, rose

Shades: 50 (lightest) → 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 (darkest)

Examples from our codebase:

// Hero section
<section className="bg-gradient-to-r from-blue-600 to-purple-600">

// Card backgrounds
<div className="bg-blue-50">  // Very light blue
<div className="bg-gray-900"> // Almost black

Text Colors

Pattern: text-{color}-{shade}

<p className="text-gray-900">Almost black text</p>
<p className="text-blue-600">Blue text</p>
<p className="text-white">White text</p>

Examples from our codebase:

// Navigation links
<Link className="text-gray-700 hover:text-blue-600">

// Headers
<h1 className="text-gray-900">

// Badges
<span className="text-yellow-600">

Border Colors

Pattern: border-{color}-{shade}

<div className="border border-gray-200">Light gray border</div>
<div className="border-2 border-blue-500">Thicker blue border</div>

Spacing Classes

Padding

Pattern: p{side}-{size}

Sides:

• p: All sides
• pt: Top
• pr: Right
• pb: Bottom
• pl: Left
• px: Horizontal (left + right)
• py: Vertical (top + bottom)

Sizes: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, etc.

Scale: 4 = 1rem = 16px, 8 = 2rem = 32px, etc.

<div className="p-4">Padding all sides (16px)</div>
<div className="px-6 py-3">Horizontal 24px, Vertical 12px</div>
<div className="pt-8">Only top padding (32px)</div>

Examples from our codebase:

// Buttons
<button className="px-8 py-3">

// Cards
<div className="p-6">

// Containers
<div className="px-4 sm:px-6 lg:px-8">

Margin

Pattern: m{side}-{size} (same as padding)

<div className="mb-4">Margin bottom (16px)</div>
<div className="mx-auto">Center horizontally</div>
<div className="mt-8">Margin top (32px)</div>

Special value:

• auto: mx-auto centers elements

Negative margins:

<div className="-mt-1">Negative margin top</div>

Examples from our codebase:

// Spacing between sections
<div className="mb-12">

// Centering containers
<div className="mx-auto">

// Fine-tuning alignment
<span className="-mt-1">

Gap (for Flex and Grid)

Pattern: gap-{size}

<div className="flex gap-4">Elements have 16px gap</div>
<div className="grid gap-6">Grid items have 24px gap</div>

Examples from our codebase:

// Navigation spacing
<div className="flex gap-2">

// Button groups
<div className="flex gap-4">

// Grid layouts
<div className="grid grid-cols-3 gap-8">

Space Between

Pattern: space-{x|y}-{size}

<div className="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

All items get spacing except the first one

Typography Classes

Font Size

Pattern: text-{size}

<p className="text-xs">Extra small (12px)</p>
<p className="text-sm">Small (14px)</p>
<p className="text-base">Base (16px)</p>
<p className="text-lg">Large (18px)</p>
<p className="text-xl">Extra large (20px)</p>
<p className="text-2xl">2x large (24px)</p>
<p className="text-3xl">3x large (30px)</p>
<p className="text-4xl">4x large (36px)</p>
<p className="text-5xl">5x large (48px)</p>
<p className="text-6xl">6x large (60px)</p>

Examples from our codebase:

// Page headings
<h1 className="text-4xl md:text-6xl">

// Section headings
<h2 className="text-3xl">

// Body text
<p className="text-lg">

// Small text
<span className="text-xs">

Font Weight

Pattern: font-{weight}

<p className="font-light">Light (300)</p>
<p className="font-normal">Normal (400)</p>
<p className="font-medium">Medium (500)</p>
<p className="font-semibold">Semibold (600)</p>
<p className="font-bold">Bold (700)</p>

Examples from our codebase:

// Headings
<h1 className="font-bold">

// Links
<Link className="font-medium">

// Emphasis
<span className="font-semibold">

Text Alignment

<p className="text-left">Left aligned</p>
<p className="text-center">Center aligned</p>
<p className="text-right">Right aligned</p>

Line Height

<p className="leading-tight">Tight line height</p>
<p className="leading-normal">Normal line height</p>
<p className="leading-relaxed">Relaxed line height</p>
<p className="leading-loose">Loose line height</p>

Layout Classes

Display

<div className="block">Block element</div>
<div className="inline">Inline element</div>
<div className="inline-block">Inline-block</div>
<div className="flex">Flex container</div>
<div className="grid">Grid container</div>
<div className="hidden">Hidden element</div>

Flexbox

Container classes:

<div className="flex">Flex container</div>
<div className="flex flex-col">Vertical direction</div>
<div className="flex flex-row">Horizontal direction</div>

Justify content (horizontal alignment):

<div className="flex justify-start">Left aligned</div>
<div className="flex justify-center">Center aligned</div>
<div className="flex justify-end">Right aligned</div>
<div className="flex justify-between">Space between</div>

Align items (vertical alignment):

<div className="flex items-start">Top aligned</div>
<div className="flex items-center">Vertically centered</div>
<div className="flex items-end">Bottom aligned</div>

Examples from our codebase:

// Header layout
<div className="flex justify-between items-center">

// Button groups
<div className="flex flex-col sm:flex-row gap-4 justify-center">

// Centered content
<div className="flex items-center justify-center">

Grid

<div className="grid grid-cols-1">1 column</div>
<div className="grid grid-cols-2">2 columns</div>
<div className="grid grid-cols-3">3 columns</div>
<div className="grid grid-cols-4">4 columns</div>

Examples from our codebase:

// Responsive grid
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">

// Three-column layout
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">

Width and Height

Fixed widths:

<div className="w-10">Width 40px</div>
<div className="w-64">Width 256px</div>

Percentage widths:

<div className="w-1/2">50% width</div>
<div className="w-1/3">33.333% width</div>
<div className="w-full">100% width</div>

Max width:

<div className="max-w-sm">Max 384px</div>
<div className="max-w-md">Max 448px</div>
<div className="max-w-lg">Max 512px</div>
<div className="max-w-xl">Max 576px</div>
<div className="max-w-2xl">Max 672px</div>
<div className="max-w-4xl">Max 896px</div>
<div className="max-w-7xl">Max 1280px</div>

Examples from our codebase:

// Container
<div className="max-w-7xl mx-auto">

// Constrained text width
<p className="max-w-3xl mx-auto">

// Logo size
<div className="w-10 h-10">

Border and Rounded Corners

Borders

<div className="border">1px border</div>
<div className="border-2">2px border</div>
<div className="border-4">4px border</div>

Specific sides:

<div className="border-t">Top border</div>
<div className="border-b">Bottom border</div>
<div className="border-l">Left border</div>
<div className="border-r">Right border</div>

Rounded Corners

<div className="rounded">4px border radius</div>
<div className="rounded-lg">8px border radius</div>
<div className="rounded-xl">12px border radius</div>
<div className="rounded-2xl">16px border radius</div>
<div className="rounded-full">Fully rounded (pill/circle)</div>

Examples from our codebase:

// Logo box
<div className="rounded-xl">

// Buttons
<button className="rounded-lg">

// Badges
<span className="rounded-full">

Shadow

<div className="shadow-sm">Small shadow</div>
<div className="shadow">Default shadow</div>
<div className="shadow-md">Medium shadow</div>
<div className="shadow-lg">Large shadow</div>
<div className="shadow-xl">Extra large shadow</div>

Examples from our codebase:

// Header
<header className="shadow-lg">

// Cards
<div className="shadow-xl">

// Buttons on hover
<button className="shadow-lg group-hover:shadow-xl">

Hover and Interactive States

Hover

Pattern: hover:{utility}

<div className="bg-blue-600 hover:bg-blue-700">
  Darker on hover
</div>

<Link className="text-gray-700 hover:text-blue-600">
  Changes color on hover
</Link>

Examples from our codebase:

// Navigation links
<Link className="text-gray-700 hover:text-blue-600 hover:bg-blue-50">

// Buttons
<button className="bg-white hover:bg-gray-100">

Focus

<input className="focus:ring-2 focus:ring-blue-500">
<button className="focus:outline-none focus:ring-2">

Group Hover

<div className="group">
  <div className="group-hover:text-blue-600">
    Changes when parent is hovered
  </div>
</div>

Examples from our codebase:

<Link className="group">
  <span className="group-hover:text-blue-600">
    K12worX Jamboree
  </span>
</Link>

Transitions and Animations

<div className="transition">All properties transition</div>
<div className="transition-colors">Only colors transition</div>
<div className="transition-all">All properties transition</div>

Duration:

<div className="transition duration-200">200ms</div>
<div className="transition duration-300">300ms</div>
<div className="transition duration-500">500ms</div>

Examples from our codebase:

// Smooth color changes
<Link className="text-gray-700 hover:text-blue-600 transition-colors duration-200">

// All properties
<button className="transition-all duration-200">

Position and Z-Index

Position

<div className="relative">Position relative</div>
<div className="absolute">Position absolute</div>
<div className="fixed">Position fixed</div>
<div className="sticky">Position sticky</div>

Positioning:

<div className="absolute top-0 right-0">Top-right corner</div>
<div className="absolute bottom-0 left-0">Bottom-left corner</div>
<div className="sticky top-0">Sticks to top when scrolling</div>

Examples from our codebase:

// Sticky header
<header className="sticky top-0 z-50">

// Decorative elements
<span className="absolute bottom-0 left-1/2">

Z-Index

<div className="z-0">Behind</div>
<div className="z-10">Above z-0</div>
<div className="z-50">Higher up</div>

Opacity and Backdrop

Opacity

<div className="opacity-0">Invisible</div>
<div className="opacity-50">50% opacity</div>
<div className="opacity-100">Fully visible</div>

With colors:

<div className="bg-white/95">White at 95% opacity</div>
<div className="bg-black/50">Black at 50% opacity</div>

Backdrop Effects

<div className="backdrop-blur-sm">Slight blur behind</div>
<div className="backdrop-blur-md">Medium blur behind</div>

Examples from our codebase:

// Modern header effect
<header className="bg-white/95 backdrop-blur-sm">

// Mobile menu
<div className="bg-white/95 backdrop-blur-md">

Combining Classes

Classes can be combined to create complex styling:

<button className="
  px-8 py-3
  bg-white text-blue-600
  font-semibold
  rounded-lg
  hover:bg-gray-100
  transition-colors
  shadow-md hover:shadow-lg
">
  Complex Button
</button>

Tips for readability:

• Group related classes
• One category per line (when many classes)
• Most important classes first

Finding Classes You Need

Official Documentation

Visit: https://tailwindcss.com/docs

Search for what you want to do:

• "padding" → Find padding classes
• "colors" → See color palette
• "flexbox" → Learn flex utilities

VS Code Autocomplete

Start typing in className="":

• Type bg- → See all background classes
• Type text- → See text classes
• IntelliSense shows available options!

Common Patterns

Center a div:

<div className="flex items-center justify-center">

Responsive container:

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

Card:

<div className="bg-white rounded-lg shadow-lg p-6">

Button:

<button className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">

Quick Reference

Colors: bg-{color}-{shade}, text-{color}-{shade} Padding: p-4, px-6, py-3 Margin: m-4, mx-auto, mb-8 Text size: text-sm, text-lg, text-2xl Font weight: font-medium, font-bold Flex: flex, justify-center, items-center Grid: grid, grid-cols-3, gap-4 Width: w-full, max-w-4xl Rounded: rounded-lg, rounded-full Shadow: shadow-lg Hover: hover:bg-blue-700 Transition: transition-colors duration-200

Practice Exercises

Try these in the browser DevTools or directly in code:

1. Change button color: Find a button, change bg-blue-600 to bg-green-600
2. Increase spacing: Change p-4 to p-8 on a card
3. Make text larger: Change text-lg to text-2xl on a heading
4. Add hover effect: Add hover:shadow-xl to a card
5. Adjust border radius: Change rounded-lg to rounded-2xl

What's Next

Now that you know the classes, let's learn how to make them responsive:

Responsive Design →

---

Quick Links

• ← Chapter 05 Overview
• Responsive Design →