Tailwind CSS

CSS Units


Tailwind CSS primarily uses two-unit systems for defining sizing and spacing:

 

rem:  The default unit in Tailwind is rem (root em). This unit is relative to the font size of the root element in your HTML document. This makes it responsive as changes to the font size of the root element will be reflected proportionally in the sizes defined with rem.

Tailwind's spacing scale: Tailwind provides a pre-defined set of classes for spacing using a custom unit. By default, one unit in this scale is equivalent to 0.25rem, which typically translates to 4 pixels. This creates a consistent and proportional spacing system throughout your layout.

 

Tailwind's approach to CSS Units:

 

Responsiveness: By using rem as the base unit, Tailwind ensures responsiveness as element sizes adapt to changes in the root font size.
Custom spacing scale: Tailwind offers a convenient and consistent spacing system with its pre-defined classes.
Customization: You can customize both the base unit (from rem to something else) and the spacing scale values in Tailwind's configuration.