Video Thumbnail

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

UNLOCK LESSON

Premium Features

Download Video

Tailwind Spacing In Action

Published 3 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: https://tailwindcss.com/docs/customizing-spacing

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.

Comments

Want to participate?

Create a free Chris Courses account to begin

Login

No comments yet, be the first to add one

Providing the lift to launch your development career

© 2024 Chris Courses. All rights reserved.