Tailwind Styling

What you'll learn

Apply Tailwind typography utilities for text styling

Use spacing utilities: margin, padding, and gap

Control colors, backgrounds, borders, and shadows

Build responsive layouts with flexbox and grid utilities

Use hover, focus, and other state variants for interactive styles

Create consistent spacing with Tailwind's spacing scale

Beyond layout — colors, spacing, typography, and theme customization.

Colors

<!-- Text colors -->
<p class="text-blue-500">Blue text</p>
<p class="text-gray-700 dark:text-gray-300">Responsive dark mode</p>

<!-- Background colors -->
<div class="bg-blue-100 dark:bg-blue-900">Background</div>

<!-- Border colors -->
<div class="border border-gray-200 dark:border-gray-700">Bordered</div>

Spacing

<!-- Margin -->
<div class="m-4 mx-auto mt-2">All sides, top, horizontal</div>

<!-- Padding -->
<div class="p-6 px-4 py-2">Padding shorthand</div>

<!-- Gap (flex/grid) -->
<div class="flex gap-4">Spacing between items</div>

Typography

<h1 class="text-3xl font-bold tracking-tight">Heading</h1>
<h2 class="text-xl font-semibold">Subheading</h2>
<p class="text-base leading-relaxed text-gray-600">Body text</p>

Dark Mode

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
  Automatically adapts to theme
</div>

Custom Theme (tailwind.config)

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: { 500: "#3b82f6", 600: "#2563eb" },
      },
    },
  },
}

Next Steps

Flexbox
Grid

Key Takeaways

Tailwind text utilities (text-sm, font-bold, leading-relaxed) control typography without custom CSS

Spacing follows a consistent scale where m-4 = 1rem, p-2 = 0.5rem, gap-6 = 1.5rem

State variants (hover:, focus:, active:) apply interactive styles inline without separate CSS blocks

Dark mode is activated with the dark: prefix and works automatically via the class strategy

Tailwind's padding and margin system uses the same numeric scale for predictable visual rhythm