Tailwind CSS

Styling Text Part 1

Font styling is a huge part of any design and Tailwind has plenty of classes that we can use to style the text on our apps. It even includes utility classes for transformations like uppercase.

Padding & Margins

These classes add padding and margin to an element using the Tailwind numbering system.

Challenge 1 - Shades of Blue

Now that we know about sizing and background colors, it's time for our first simple challenge.

Element Sizing & Tailwind's Numbering System

All of the numbers in Tailwind are based around the rem unit of measurement. 1 rem is equal to the size of the base font of the document. As an example, if the base font size is 16px then 1 rem is equal to 16px and we can deduce that 1.25 rem is equal to 20px. To help with these fractional numbers, Tailwind's numbered classes are multiplied by 4 to avoid having numbers with decimal places.

Background Classes & Shades

This set of classes change the background color of an element using a scale of 100-900 for shades and a palette of over 90 shades.