Video Thumbnail

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

Premium Features

Download Video

Tailwind Spacing In Action

Published 2 months 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

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.