As you might notice, Tailwind CSS has become popular among the developers community. I'm a big Tailwind fan and recently, I've built several React projects with Tailwind CSS. In this article, I'll describe why Tailwind CSS has brought so much value to the frontend development community.
Tailwind CSS has definitively changed the way to style your web application or your website. It brings a new paradigm and fresh air to the old school CSS.
One of the main advantages of Tailwind CSS framework is that you stop writing CSS yourself. It'll save you design and development time. You just need to apply CSS classes to your HTML element. By using Tailwind, you get access to several thousand CSS classes out-of-the-box.
Did you remember when your programming teacher tells you to choose a meaningful variable name? When your teacher suggested you choose a variable name other than
b, etc. So, writing a CSS rule and indicating
font-size: 15px is totally a non-sense. What
15 means? Is it big, normal or small?
With Tailwind CSS, you just need to apply
text-xl to your HTML elements. It respectively says you want a small, large or extra-large font size. You're stopping writing any non-sense number like
Another beauty related to these predefined classes from Tailwind CSS is that you're stopping fine-tuning your design. Because Tailwind CSS has already defined all CSS classes, you aren't able to specify any random number for your
For example, Tailwind has several margin related classes like
m-8. But, it doesn't provide
m-7. Another thing
m-6 is equal to
margin: 1.5rem; and
m-8 is equal
margin: 2rem;. So, you can't specify a margin equal to
1.75rem by default (you need to make some configuration change to use a margin equal to 1.75rem). That means no more moving your pixel one by one: it can save you a lot of time if you're perfectionist like me.
In 2020, responsive websites are a must-have in frontend development. So, like any modern framework, Tailwind CSS also helps you to create responsive themes for your web application.
Two other Tailwind built-in features are:
Tailwind CSS doesn't provide by default styled components like in Boostrap or Bulma. You need to implement it from scratch. You'll possibly lose a lot of dev/design time. For example, Tailwind CSS doesn't provide button, navigation bar, header, etc.
You'll face a small learning curve with Tailwind CSS. Even if you're familiar with CSS, you need to learn the predefined classes provided by Tailwind. To apply a margin, you need to specify
p- for padding ,
leading- for line-height, etc. So, it isn't intuitive but, with practice, you'll overcome this easily.
When you've started web development, you've taught it's a good practice to split your HTML and CSS into two files. Basically, the HTML file focus on the structure and the CSS focus on the styling part.
In Tailwind, you don't need to write CSS rules and you apply directly CSS classes to your HTML file. So, you're mixing page structure and style in your HTML file. It's like doing old school web development.
Here I've shared my opinion about Tailwind CSS and I'll continue to use this framework for my project. Definitively, Tailwind has changed the way I style my project. Using Tailwind CSS in combination with React is my current stack for frontend development in the Jamstack environment. You can check the result of my work with Tailwind at Tailwind Themes with React.
I've also built several boilerplate codes with Tailwind:
It should save you configuration time by providing everything you need to work with Tailwind CSS. You only need to start implementing your templates.