Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.


Premium Features

Download Video

Tailwind Spacing In Action

Published 2 years ago

This video is meant to be a continuation of an animated Chris Courses lesson that describes em and rem units. It'll be released as soon as I complete it, but I wanted to post this video early anyways so you can continue with the project.

Tailwind rem spacing reference:

Now that we understand how em and rem units work, we can begin utilizing their Tailwind class counterparts to space out our elements.

Typically, assigning an element a padding or margin style in pixels would do the job of spacing it out as needed, but if we want different levels of spacing to be applied per different screen sizes, using a Tailwind class is a much better option since Tailwind's breakpoints will be available for us then. The thing is, Tailwind's spacing classes use rem units for their intervals.

Getting a good grasp of Tailwind's various spacing intervals will require quite a bit of experience and getting used to, but over time, you'll be able to determine which intervals you should use to produce a certain amount of spacing. This video shows how I would use Tailwind's spacing classes to get our elements spaced correctly on both mobile and desktop views.


Want to participate?

Create a free Chris Courses account to begin


No comments yet, be the first to add one

Providing the lift to launch your development career

© 2023 Chris Courses. All rights reserved.