Tailwind CSS

Chapter 3: Building Complex Designs with Tailwind

In the first chapter, we covered the basic concepts of the Tailwind framework and how to use it to build simple designs. We then expanded this knowledge by learning how we can build reusable components and responsive designs.

In this chapter, we’ll extend what we’ve learned with more advanced layout-building and design-enhancement techniques, including creating and using:

• grid layouts
• drop caps
• gradients
• image clipping
• image filters
• transforms and transitions

We’ll start with several grid layouts and then we’ll build a full article layout.

Building Complex and Flexible Layouts with Tailwind’s Grid Utilities

In this section, we’ll build several grid layouts similar to magazine or news sites. ...