Six Reasons Why You Should Start Using Tailwind CSS

How Tailwind CSS can help you rapidly build UI

Photo by Pankaj Patel on Unsplash

A while ago, when we started using Tailwind CSS in our projects, I wrote a post on Tailwind CSS explaining what it is and how it is different. You can read that post here.

Since then, we’ve barely written in CSS. In this post, let’s look at some reasons, why you might want to use Tailwind in your next project. Before we start, you can go to this page to setup tailwind in your project. With that out of the way. Let’s get started.

Inline Responsiveness

Gone are the days where we needed to write media queries to make our UI responsive. With Tailwind, you can make your UI responsive in the class attribute itself. Let’s look at an example; the below code changes text size based on screen size.

<span class="lg:text-lg sm:text-sm xl:text-xl" >Hello, world!</span>

How cool is that? By adding three CSS classes, we made the font size of an element responsive.

Inline Pseudo-Classes

We can also apply pseudo-classes to an element in the class attribute itself. For example, let’s say you want to change the text color of an element on hover. We can achieve that by doing:

<span class="text-4xl hover:text-blue-500" >Hello, world!</span>

Apart from hover, you can also use many other pseudo-classes like focus, active etc. Read more about it here.

Inline Styling

All the styling is defined on that element itself. That means that when you are looking at an element, you are also looking at the styling of that element. You don’t have to open another file. To check how an element is styled and search in many files to find where a specific style is applied. Let’s look at an example:

<div class="rounded bg-gray-500 p-4" >I'm a card!</div>

As you can see, the styling for the element is with the element itself. Which helps us avoid unnecessary lookups. This also means that we do not have to create extra files for styling.

Components for Repetition

If you use Tailwind for a while you might find repeating a set of classes again and again. In that case, you can use @apply to combine that classes and create one class. For example, I found myself repeating rounded bg-gray-300 p-4 again and again for card style. To avoid that, I created a custom style class called card and apply these classes. Here’s how to do it: add the following code in your Tailwind CSS file.

.card {
  @apply rounded bg-gray-300 p-4;
}

Now, whenever you find yourself applying the same classes. You can apply single class card.

If you are using a frontend library like React or Vue you can create a component called Card and apply these styles in that component to avoid repetition.

Here is an example in React:

const Card: React.FC = ({children}) => {
  return <div className="rounded bg-gray-300 p-4" >{children}</div>
}

Learn more about extracting components here.

Customization

So far, we have looked at some great features of Tailwind. To take it further, all the colors, size units, pseudo-classes, and responsive breakpoints, etc., can be customized as needed. Tailwind comes with default config. that you are free to customize as you want. You read more about customization here.

Purging Unnecessary Styles

Tailwind generates a lot of classes, so many that I can be sure that you will not be using those styles in your project. That means that all the unused classes are also bundled in with your app (which adds unnecessary extra size to you app).

To solve this problem, we can purge all the styles that our app doesn’t use. Tailwind comes with built-in support for purging. To purge, we need to add a purge property in the Tailwind config and provide the files it needs to look into. For example, the config below will look into all the HTML and JSX to search for used classes:

...  
  purge: [
    './src/**/*.html',
    './src/**/*.jsx',
  ]
...

You can read more about purging unused styles here.

Conclusion

Thanks for reading, I hope that I helped you learn something new today. The examples I have used here are very basic, please always refer to the documentation for any help.

If you like this post, give it a clap. And you can follow me, for more posts like this. Thanks for reading.