For example, text alignment utilities like
.text-left provide direct control over the alignment of text within an element and can be combined with other utilities to quickly and easily change the appearance of an element or even the entire page.
Although nothing is stopping you from adding additional class names to elements and then styling those classes, once you experience the benefits of this atomic or utility-first approach you’ll have trouble working any other way. Adopting utilities as part of your workflow will allow you to:
Define your foundational style and ensure that future changes are made in accordance with it.
Avoid inventing arbitrary class names for elements which differ only slightly in appearance.
Make changes confidently
Make changes confidently without having to worry about affecting other parts of the Help Center.
Rapidly prototype ideas
Copy compositions and layouts between themes or from the Pattern Library, given they are modular.
Avoid writing CSS
Because you don’t have to write custom CSS your attention can remain focused on page templates.
Maintain and scale easily
Ensure that your theme code is easier to maintain and scale in the future.
Because utilities are low-level you’re never encouraged to build the same layout twice. Even without changing a single setting it’s easy to make elements and entire layout look completely different.
Read about how responsive and hover-state variants allow you to make changes to specific screen sizes or hover states, allowing you to build fully responsive layouts without having to write custom media queries in your CSS.
Review the documented set of utilities to learn how to change specific aspects of your theme’s appearance quickly and easily.