This video is meant to be a continuation of an animated Chris Courses lesson that describes
em
andrem
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.