Ivaylo Gerchev - Tailwind CSS

This book is for anyone who wants to better understand how to write effective HTML emails. No prior experience of creating emails is required, but you should have experience of HTML and CSS.

Code in this book is displayed using a fixed-width font, like so:

Youll notice that weve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

• https://www.sitepoint.com/community/ are SitePoints forums, for help on any tricky problems.
• books@sitepoint.com is our email address, should you need to contact us to report a problem, or for any other reason.

There are two main types of CSS framework. One is based around componentsa group that includes frameworks such as Bootstrap, Foundation, and Bulma. The other type of CSS framework is based around utilitiesa group that includes the likes of Tachyons, Tailwind CSS, and Windi CSS.

For many years, component-based frameworks were the de facto standard for building websites quickly and easily. But all this magic comes with a price. Without serious customization, sites built with such frameworks look similar to each other. And customization is a real pain in the neck for anyone who wants to build something more complex and/or creative. Component-based styles are easy to implement, but inflexible and confined to certain boundaries. Solving specificity issues while trying to override the default styles of a particular framework isnt a fun and productive job.

Utility-first frameworks were created to solve this problem. A utility-first framework is built with low-level functionality in mind. Utility classes offer much more power and flexibility than component classes.

Utility-first frameworks provide the following advantages:

• Utility classes operate at a low level. This means we have more control and flexibility over how we apply thema concept thats similar to the power and flexibility offered by a low-level language like C or C++, in contrast to high-level languages such as JavaScript or PHP.
• Utility classes are easy to customize, so we can build any design.
• A utility-first approach scales well. Its great for managing and maintaining large projects, because we only have to maintain HTML files, instead of a large CSS codebase. Its already used with success by big sites like GitHub, Heroku, Kickstarter, Twitch, and Segment.
• Utility classes can be adopted to any design.
• Utility classes are completely customizable and extensible. Its easier to build unique, custom website designs without fighting with unwanted styles.
• Utility classes allow for much easier implementation of responsive design patterns.
• Utility classes have consistent styles, which gives us a ready-to-use design system. We can also create our own design system if we need to.
• With utility classes, we can still extract common, repetitive patterns into custom, reusable components. But in contrast to predefined components, custom components will be exactly what we need.

In summary, we can say that a utility-first framework gives us balance between the concrete and the abstract.

Now that weve seen how useful utility-first frameworks can be, its time to pick one and see what it can do for us in action. In this book, well explore Tailwind CSS, which is the most popular of the utility-first frameworks.

Tailwind is a set of low-level, reusable utility classes that can be used like building blocks to create virtually any design we can imagine. This utility-first framework covers the most important CSS properties, but it can be easily extended in a variety of ways. It can be used either for rapid prototyping or for creating full-blown designs.