Introducing Tailwind CSS: Pros and Cons of Tailwind

As you might notice, Tailwind CSS has become popular among the developer 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 front-end 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

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 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:

• 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 front-end 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:

• Eleventy Starter Boilerplate
• Nextjs Starter Boilerplate

It should save you configuration time by providing everything you need to work with Tailwind CSS. You only need to start implementing your templates.

Previously published at https://creativedesignsguru.com/why-i-love-tailwind-css-pros-and-cons-of-tailwind/