Comprehensive TailwindCSS Styling Guide: Width, Height, Layout, Spacing, Borders, Typography and More

The article is the second part of a TailwindCSS series, following the "Environment" guide, and outlines the "Style" section which covers a wide range of utility classes for building responsive UI components.

Width and Height

Tailwind provides preset classes such as w-xx and h-xx where w-52 equals 13rem (208 px) and h-14 equals 3.5rem (56 px). Custom values can be defined with bracket notation, e.g., [width:200px] , [height:5rem] , or using units like px , rem , em .

Viewport Height Utilities

Special classes h-svh , h-lvh , and h-dvh represent 100 % of the safe, layout, and dynamic viewport heights respectively, helping elements stay fully visible when browser UI changes (e.g., address bar toggling or soft‑keyboard appearance).

Maximum and Minimum Dimensions

Use min-w-[] , max-w-[] , min-h-[] , and max-h-[] to set constraints; for example max-w-52 limits width to 13rem (208 px).

Size Shortcut

The size-xx utility creates a square element with equal width and height, useful for icons or avatars.

Spacing Utilities

Margin, padding and space utilities follow the pattern margin , padding , space-x-xx , space-y-xx , allowing precise control over gaps and offsets.

Border and Divide

Border width classes ( border , border-t , border-2 , etc.) and color classes ( border-blue-500 ) define line thickness and color. The divide-x and divide-y utilities replace manual border tricks for separating elements.

Outline

Outline utilities ( outline , outline-2 , outline-offset-1 ) add focus rings or decorative outlines to buttons and other interactive elements.

Typography

Font size classes range from text-xs to text-xl , each mapping to specific rem values. Font style ( italic / not-italic ), weight ( font-bold , font-medium ), tracking ( tracking-wide ), and line‑height utilities ( leading-none to leading-loose ) provide full typographic control.

Text alignment utilities ( text-left , text-center , text-right , text-justify ) and color utilities ( text-blue-600 , text-[#ff6600] ) let you style content precisely.

Overflow handling uses truncate for ellipsis or text-clip to cut off overflow. Wrapping utilities ( text-wrap , text-nowrap , text-balance , text-pretty ) and whitespace controls ( whitespace-normal , whitespace-nowrap , whitespace-pre , whitespace-break-spaces ) manage how spaces and line breaks are rendered.

Conclusion

The guide consolidates all essential TailwindCSS styling utilities, provides code snippets and visual examples, and prepares readers for the next articles covering layout, Flexbox, Grid, and advanced Tailwind customization, as well as common pitfalls and comparisons with alternatives like UnoCSS.