About the utility API

Bootstrap 5 features a so-called utility API, which is used to generate the different utility classes and/or CSS custom properties (also referred to as CSS variables). It works in the following way:

• The _utilities.scss file contains the $utilities variable, which is a Sass map containing various settings used by the utility API. It’s actually multiple maps that are merged into one single map with nested maps using the map-merge() Sass function. There are 83 groups of utility classes, which are grouped by their name. Their settings and values differ in each of them, but some of them share some of the values (such as some of the flex utilities sharing the flex class prefix).
• The $utilities variable is used in the utilities/_api.scss file, which is imported after all the other Bootstrap 5 elements.
• In the utilities/_api.scss file, the $utilities variable is passed as an argument to a generate-utility() mixin, which is located in the mixins...