Styling Text Colors and Spacing

Tailwind CSS provides utility classes for common styling tasks like typography, colors, spacing, width, and sizing. Instead of writing custom CSS rules, developers combine utility classes directly inside components.

In this chapter, you will use Tailwind utilities to style text and control layout spacing.

Styling Text

Open App.svelte and add the following code:

<h1 class="text-4xl font-bold text-purple-600">
  Welcome to Tailwind CSS
</h1>

The utility classes control different parts of the styling:

• text-4xl changes the font size;
• font-bold makes the text bold;
• text-purple-600 changes the text color.

Working with Spacing

Tailwind includes spacing utilities for margin and padding.

<div class="p-6 m-4 bg-gray-100 rounded-xl">
  Card Content
</div>

In this example:

• p-6 adds padding;
• m-4 adds margin;
• bg-gray-100 applies a background color;
• rounded-xl creates rounded corners.

Width and Height Utilities

Tailwind also provides sizing utilities.

<div class="w-64 h-32 bg-blue-200">
  Box
</div>

The width and height classes quickly control element sizing without custom CSS.

Combining Utility Classes

Tailwind works by combining many small utility classes together.

<button
  class="
    bg-purple-600
    text-white
    px-4
    py-2
    rounded-lg
  "
>
  Save
</button>

This approach helps developers build interfaces quickly while keeping styling consistent.