Why Tailwind is Amazing and How It Makes Web Dev a Breeze

Do you remember once upon a time we used to jump between html and css to style pages on our websites?

This was actually me last year. I'm sure there are still people that manage huge CSS stylesheets to style the HTML pages.

This is actually a very bad way to design webpages. This kills engineer productivity as you jump between 2 files all the time.

However this is not the biggest issue with this approach. The main issue with this approach is scoping.

Why CSS sheets suck at scoping

Say that you have 2 html elements that are classed main in separate pages. Once you apply a style to .main in a page, you inadvertently style the other element in the other page. This is a recipe for disaster.

This way of development also created huge legacy code that can't be refactored/ cleaned. For example let's say that you want to remove the main class on your element so that .main becomes redundant in your css file.

But you can't remove that class easily from your stylesheet, because that class might be applied somewhere else in your app.

This way, unusued styles keep building up in your stylesheet and it becomes impossible to manage after sometime:

Tailwind Comes to Our Rescue

With Tailwind, everything is done within the HTML file so you don't need to worry about CSS files anymore. Setup Tailwind depending on the framework you are using following the instructions on this page.

You can apply styles directly using classed on Tailwind. For example, styling a paragraph:

Achieving above styles in an HTML file in Tailwind is super easy because styles are represented as classess in Tailwind.

Below code shows how we can create above texts.

<div class="flex flex-col gap-2">
	<p class="font-bold">This is a paragraph in bold</p>
	<p class="text-red-500">This is a paragraph in red</p>
	<p class="italic">This is a paragraph in italic</p>
	<p>This is a <span class="underline">mixed</span> element</p>
</div>

Straightforward right? You just need to know the Tailwind class syntax in order to start using it. And it is not as hard as you think.

For example font-bold makes a text bold while italic class makes an element italic.

You might think that you'd need to know hundreds of classes, because there are literally endless styles you can apply. But it is not that hard. Once you want to apply a certain style, you look for its Tailwind syntax on Google and in short time you get a hang of it.

After a year of using Tailwind in my projects, I rarely look for a style's Tailwind syntax anymore. The consistent syntax of Tailwind is easy to remember. For example take a look at below example:

(None)

rounded-lg

rounded-3xl

rounded-full

The class rounded governs the border-radius of an element and we can easily adjust it by adding suffices like lg, xl, full to it.

Why Tailwind?

As you can see, Tailwind makes it super easy to play with styling without leaving your HTML file. This makes web dev a joyful practice.

It also allows you to create consistent web apps, because you don't get into details of styles such as border-radius: 10px or font-size: 16px because the classes are already pre-determined by Tailwind.

For example, I use text-lg and font-bold for my headers. This is much easier than defining a class in a separate CSS sheet and editing it.

If you have experience using Tailwind, let me know what aspects of it you like the most/ you don't like. If you haven't tried it yet, you are missing a lot. Stop whatever you are doing and npm install tailwindcss.

Until further notice, happy coding.