Learn the Box Model with Tailwind CSS

Tailwind CSS is not only a powerful tool for writing CSS, but also for helping you learn CSS. In this tutorial, I'll help you grok the CSS box model with Tailwind CSS.

So... what is the box model?

The box model refers to the box that wraps an HTML element. It consists of four parts:

1. content: the stuff inside the element
2. padding: the space between the content and the border
3. border: the border around the element
4. margin: the space outside the border

Here's what it looks like.

Another way to think about the box model is by considering a framed photograph.

In this case, we could think of

• the photograph itself as content
• the whitespace between the photograph and frame as padding
• the frame as the border
• and the space around the picture as margin

Now let's see how this works in practice.

How to Use the Box Model to Style a Button

Consider this button element.

<button class="bg-indigo-600 text-white">Submit</button>

In this case, the "Submit" text is the content. There is otherwise no padding, border, or margin on the button. Here's how it looks.

Let's add padding utility classes to make the button appear larger.

We'll use Tailwind's px-{size} utility, which adds padding-left and padding-right CSS properties. py-{size} works the same way but for top and bottom padding.

<button class="... px-4 py-2">Submit</button>

Here's the result.

Next, we'll use border utility classes to give the button depth.

We'll use lighter colors on the top/left sides, and darker colors on the bottom/right sides to give the perception of light shining down on the button.

We'll use the border-{size} to control the border width, and border-{side}-{color}-{shade} utilities to set the color on each side of the button.

You need to enable Tailwind's JIT compiler option to support per-side border colors. JIT is enabled by default since Tailwind CSS 3.0.

<button
  class="... border-4 border-t-indigo-400 border-r-indigo-700 border-b-indigo-800 border-l-indigo-500"
>
  Submit
</button>

Here's the result. Now we're looking like the 90's! 😎

Finally, let's consider margin.

Margins are useful for giving separation between elements.

Let's say we have two buttons side by side. Without margin, the buttons would touch.

We can use margin utility classes to add separation between the buttons.

We'll add the ml-{size} utility to the "Cancel" button. This adds the margin-left CSS property, which adds space to the left of the "Cancel" button.

<div>
  <button class="...">Submit</button>
  <button class="... ml-2">Cancel</button>
</div>

You could alternatively add the mr-{size} utility class to the "Submit" button, adding the margin-right CSS property. Either way, the appearance is identical.

Now we've looked each component of the box model. Let's recap what we learned.

Summary

• Content refers to the stuff inside the HTML element. In our buttons, the content was the text "Submit" and "Cancel". But content is not limited to text. Content can be another nested HTML element as well.
• Padding is used to add space around the element. Often this is useful when you want to extend the background color around the content. This is what we did with our buttons to make them appear larger.
• Border is exactly how it sounds. It sets the border around the element. Unlike padding and margin, borders have more styling options, such as width and color, which we used to give the appearance of a shadow on our buttons.
• Margin is used to control the space around the element. We used margin in our example to put space between our buttons.