Advanced Tailwind

Previously, we learned that Tailwind CSS is the best known utility-first framework. We’ve seen its use cases in designing blog web apps, and now it’s time to explore some core and advanced concepts.

Why do we need advanced concepts?

Utility-first frameworks offer 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.

But this knowledge alone isn’t enough for building complex and flexible designs. After grasping the basics, instead of diving deeper into what can be done with Tailwind, many users decide to use ready-made templates or a copy-paste approach to building their designs. The aim of this chapter is to avoid such a scenario by providing some insights into Tailwind’s more advanced capabilities. We’ll dive a little deeper into what we can do with Tailwind, learning how to create reusable, utility-based components and templates and how to make our designs responsive. We’ll also explore how Tailwind can be configured and customized.

All these skills will help us create a more flexible and manageable codebase, letting us go beyond the Tailwind basics so we can build our own components and templates with confidence.

Getting started with Tailwind

In this section, we’ll learn how to set up a new project with Tailwind.

Note: The following project creation process will be used in the upcoming lessons.

Prerequisites

• To follow along from here onward, you’ll first need to have Node.js installed on your machine.

• Also, make sure you have a basic knowledge of Tailwind’s utilities—including how they work and how they’re applied to HTML—as we covered previously.

Remember: Tailwind applies an opinionated set of base styles for every project by default.

Try it yourself

Please try the following commands in the terminal at the end of this lesson.

Step 1

The first step is to create a new Node.js app. In an empty directory of your choice, run the following command: