CSS utility frameworks define many atomic classes, with each class specifying only one CSS property. In addition to the dimensions of an element, this includes information on typography, color, and all other conceivable properties. For each atomic property, a CSS utility framework contains classes for each defined breakpoint. By combining several classes, almost any responsive elements can be put together.
The Tachyons framework is now a few years old and is no longer actively being developed. However, because of its simplicity, Tachyons is still a great way to learn responsive web design. The simplest way to understand the approach is to look at the Tachyons components. These are example elements that are fully defined using utility classes.
A successor to Tachyons is TailwindCSS. TailwindCSS has several advantages over Tachyons. The project continues to be actively developed and supports many popular systems for front-end development. Furthermore, TailwindCSS can be fully adapted to the respective needs of a project. All pre-settings such as breakpoints, font size scale, etc., can be easily configured.
Though working with CSS utility frameworks is practical, the approach has one major disadvantage: many atomic classes may be required to define a single element. The CSS source file also contains classes for all combinations of CSS property values and breakpoints by default. In the case of TailwindCSS, there are thousands of classes, which means that the CSS file in the uncompressed state can increase to a file size of several megabytes – an unsustainable size from a performance point of view.
Fortunately, TailwindCSS remedies this in two ways. On the one hand, the framework understands the “@ apply” instruction, which is used to combine repeatedly used combinations of utility classes under a new class name. On the other hand, TailwindCSS supports the PurgeCSS tool. This is used as part of the build process to remove any unused utility classes from the production build. PurgeCSS processes the HTML templates of the project and only includes the CSS classes found in the generated CSS source text file. This reduces the size of the source text file to an acceptable level.