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.
Tailwind CSS Advantages
Stop writing CSS rules
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.
Meaningful variables
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 a, 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-sm, text-lg, or 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 15px or 18px.
Predefined classes
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 margin, padding, font-size, etc.
For example, Tailwind has several margin related classes like m-6 or 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.
Out-of-the-box Tailwind CSS features
In modern web development, 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:
- making reusable Tailwind components (without installing React in your project).
- PurgeCSS is extremely easy to set up. So you can remove unused CSS classes and make your style file small.
Tailwind CSS Cons
With Tailwind, you're applying atomic classes to your HTML elements. So, styling an element, you'll end up with tons of classes applied to your elements and making HTML file difficult to read. You can solve this drawback by using Tailwind CSS components, it will reduce the number of classes you need to apply. You can also solve this issue by using a modern JavaScript framework like React or Vue.js.
Components aren't provided by default
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.
A small learning curve
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 m-, p- for padding , leading- for line-height, etc. So, it isn't intuitive but, with practice, you'll overcome this easily.
Mix HTML and style
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.
In conclusion
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.
