Get a rapid introduction to Tailwind, the utility-first CSS framework, and start building sites with it today!

Tailwind CSS: Craft Beautiful, Flexible, and Responsive Designs

Preface

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

Getting Started with Tailwind CSS

As we learned from the first tutorial in this series, Tailwind CSS is the best known of the utility-first frameworks. It offers a rich collection of CSS class utilities that can be combined like Lego blocks to build any kind of design. Learning the basics of how to use these utilities is also very straightforward.

Going Beyond the Basics

In the first tutorial of this series, 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.

Building Complex Designs with Tailwind

So far in this Tailwind series, we’ve explored various ways to use the existing Tailwind utilities. In this fourth tutorial, we’ll dive in even deeper and explore how we can customize Tailwind either by adding new utilities or by tweaking existing ones.

Customizing Tailwind and Optimizing Your Workflow

In the fourth tutorial of this series, we learned the most important ways to customize and extend a default Tailwind theme.

Community Questions