Learning how Tailwind implements grids
Tailwind is a somewhat polarising framework. On their website, the developers claim that Tailwind allows us to rapidly build modern websites without ever leaving our HTML. Tailwind uses utility classes and considers itself utility-first.
We can see the landing page of Tailwind’s website in the following screenshot:
Figure 8.1 – Tailwind’s landing page
Utility classes are a CSS paradigm that, unlike Atomic CSS, object-oriented CSS (OOCSS), or Block Element Modifier (BEM), does not directly give names to components. Instead, it introduces classes named after what they do. The philosophy behind utility frameworks is maximizing single CSS classes’ reusability.
For example, consider a hammer: we don’t have different hammers for hanging picture frames, building shelves, and fixing broken machines (well, some people do, but most people don’t); we only have a hammer, which we...