Styling with Tailwind CSS

The Language of Design Systems in Code

At its heart, Tailwind CSS is a design system implemented as a CSS framework. The classes aren't arbitrary; they're based on a carefully considered scale. For example, spacing utilities like p-4 or m-8 aren't just random numbers. They map to a consistent scale, often based on multiples of 4px, much like the 8-point grid system commonly used in UI design.

This utility-first approach means you're not inventing class names like .big-blue-button. Instead, you're composing a button from a set of predefined utilities that describe its styling. This enforces consistency and speeds up development dramatically.

Let's start by reading a brief overview that illustrates this concept with a practical product card example.

Now that you've seen the general idea, let's break down the most common utility classes you'll use every day.

Core Utility Categories

We will explore four main categories of utilities that map directly to the most common styling decisions you make in a design tool.

1. Spacing: Margin and Padding

In CSS, margin is the space outside an element, pushing other elements away. padding is the space inside an element, between its content and its border. Your experience with Auto Layout in Figma, managing space between and inside frames, is a perfect parallel.

Tailwind uses a simple and consistent naming convention for this:

• m for margin, p for padding.
• A direction: t (top), b (bottom), l (left), r (right). For convenience, you can also use x for the horizontal axis (left and right) and y for the vertical axis (top and bottom).
• A number from the spacing scale: e.g., p-4 applies 1rem (16px) of padding on all sides. mx-6 applies 1.5rem (24px) of margin on the left and right.

2. Colors: Background, Text, and Borders

Just as you define a color palette in Figma, Tailwind comes with a beautiful, extensive default color palette. Each color has 10 shades, from 50 (lightest) to 950 (darkest).

The syntax is straightforward:

• bg-{color}-{shade} for background colors (e.g., bg-slate-100).
• text-{color}-{shade} for text colors (e.g., text-blue-600).
• border-{color}-{shade} for border colors (e.g., border-gray-300).

3. Typography: Size, Weight, and Style

Styling text is fundamental. Tailwind provides utilities for all the common text properties you'd set in Figma's Text panel.

• Font Size: text-xs, text-sm, text-base (the default), text-lg, text-xl, etc.
• Font Weight: font-thin, font-light, font-normal, font-medium, font-semibold, font-bold, font-black.
• Text Alignment: text-left, text-center, text-right.
• Other: uppercase, italic, underline, and more.

4. Borders: Width, Style, and Radius

Adding borders and rounding corners is simple.

• Border Width: Use border to set a 1px solid border. You can also specify a width, like border-2, border-4, or border-t-2 for a top border only.
• Border Radius: Use rounded for a slight curve, or be more specific with rounded-md, rounded-lg, rounded-full. You can also apply it to specific corners like rounded-t-lg (top-left and top-right corners).

Putting It All Together: A Practical Example

Theory is one thing, but applying it is where the learning sticks. Let's watch a short video where these exact concepts are put into practice to style a simple component. This will help you see the workflow in action.

Your Turn: Style a Component

Now it's your turn to practice. Open Tailwind Play and clear the existing code. Paste the following unstyled HTML into the HTML panel:

<!-- A simple product card -->
<div class="m-10">
  <img src="https://images.unsplash.com/photo-1521369909029-2afed882ba36?auto=format&fit=crop&w=800&q=80" alt="A succulent plant in a pot">
  <div>
    <h3>Succulent Starter Kit</h3>
    <p>A perfect starter kit for new plant parents. Includes one succulent and a ceramic pot.</p>
    <span>$24.99</span>
  </div>
</div>

Your task is to style this component using only Tailwind utility classes. Follow these design specifications:

1. Card Container (div):

   • Set a white background (bg-white).
   • Add a subtle shadow (shadow-md).
   • Make the corners rounded (rounded-lg).
   • Limit the width (w-80).
   • Ensure the image doesn't spill out of the rounded corners (overflow-hidden).

2. Text Content Container (the inner div):

   • Add padding on all sides (p-4).

3. Heading (h3):

   • Make the text bold (font-bold).
   • Increase the text size (text-lg).
   • Add a bottom margin (mb-2).

4. Paragraph (p):

   • Use a smaller text size (text-sm).
   • Set the text color to a medium gray (text-gray-600).

5. Price (span):

   • Make the text bold (font-bold).
   • Set the text color to a dark blue (text-blue-800).
   • Add a top margin (mt-4).
   • Make it a block-level element so the margin takes effect (block).

Try to build the class strings yourself before looking at the solution. This is your first real exercise in thinking in Tailwind.

<!-- A simple product card -->
<div class="m-10 bg-white shadow-md rounded-lg w-80 overflow-hidden">
  <img src="https://images.unsplash.com/photo-1521369909029-2afed882ba36?auto=format&fit=crop&w=800&q=80" alt="A succulent plant in a pot">
  <div class="p-4">
    <h3 class="font-bold text-lg mb-2">Succulent Starter Kit</h3>
    <p class="text-sm text-gray-600">A perfect starter kit for new plant parents. Includes one succulent and a ceramic pot.</p>
    <span class="block mt-4 font-bold text-blue-800">$24.99</span>
  </div>
</div>

Conclusion

Congratulations! You've just learned the fundamental "vocabulary" of Tailwind CSS. By understanding how to apply utility classes for spacing, colors, typography, and borders, you've taken a massive step toward being able to build any design you can imagine.

Key Takeaways:

• Tailwind's utility classes are based on a consistent design system, much like the style guides and design tokens you use in Figma.
• Spacing is controlled with p- (padding) and m- (margin), combined with directional suffixes (t, x, y, etc.).
• Colors use a {property}-{color}-{shade} pattern, like bg-red-500 or text-gray-800.
• Typography classes like text-lg and font-bold directly map to text properties in your design tools.
• Borders and border-radius are controlled with simple classes like border and rounded-lg.

In the next lesson, we will build on this foundation by exploring one of the most powerful features of Tailwind: responsive design. You'll learn how to use breakpoint prefixes (sm:, md:, lg:) to make your designs adapt beautifully to different screen sizes, translating a Figma design's responsive layouts into a mobile-first implementation.