DEV Community

Cover image for Things to Know Before You Start Tailwind CSS
Kaushal Joshi
Kaushal Joshi

Posted on • Originally published at clumsycoder.hashnode.dev

Things to Know Before You Start Tailwind CSS

With the rising popularity of Tailwind CSS, many of us might jump directly on Tailwind just to catch up with the hype. It won't take them much of their time to realize that it is not like any other traditional CSS framework. They might not even get a full picture of Tailwind and end up hating it thinking it's harder than plain CSS.

Here is my attempt to cover everything that you need to know to use Tailwind CSS in your next project.

This blog focuses on CSS concepts that are essential to know for using Tailwind CSS. It is not a tutorial to get started with it.
Official documentation has covered that part pretty well.

Utility First Frameworks

The main reason why Tailwind is different from other frameworks is that it is a utility based framework, whereas frameworks like Bootstrap or Bulma are component based frameworks. Now, what's the difference?

Component based frameworks provide a set of components that are used by adding predefined classes to HTML elements. For example, Bootstrap has a total of 24 components that we can use by simply adding related classes.

Tailwind CSS on the other hand is a utility framework. It doesn't limit your design by predefined opinionated components but provides powerful building blocks that are useful to create a unique design for your projects.

Tailwind achieves this by having a class for every CSS property. Additionally, we can add our valid CSS properties to make a new tailwind class as per our needs. This gives total freedom and flexibility while designing the front end.

But this comes with a cost. Component based libraries don't require you to know much about plain CSS. You refer to the documentation and use the code that you need. Tailwind being a low level utility based framework doesn't work in that way. You need to have a profound understanding of CSS to use Tailwind in the best way.

Intermediate CSS

There is only one word that describes CSS - overwhelming. Though Tailwind gives you flexibility and saves time requires to type everything explicitly, your knowledge of plain CSS is considered as the main pre-requisites.

Sizing Units

Especially, rem. All utility classes use rem for styling. Tailwind has classes from smallest rem unit 0.125rem (2px) to all the way up to 24rem. Additionally, you can add units as per your choice in tailwind.config file (which can be px, em or anything else too).

Responsive Design

Tailwind is mobile first approach to styling. So whatever you write is suited for the smallest screen size defined while configuring tailwind. By default, the smallest utility class is sm that sets media query of a minimum width of 640px. You are supposed to mention the breakpoint if you are adding classes for bigger sizes than that.
That's why, knowing about responsive design, sizing units and media queries are a must to create anything eye-pleasing with Tailwind.

Flexbox & Grid

Creating layouts using grid and flexbox classes is easy as compared to traditional ways of using them. However, you might find it confusing because many classes conflict with each other resulting in a single class that is used with both layouts.
I was talking about justify-{value}, align-{value}, place-{value} and gap. These classes serve the same purpose for flexbox as well as grid. Having a clear understanding of them would help you to save hours of confusion.

Other Important Concepts

Of course, this is not it; CSS is more than that, and so is Tailwind. Units, responsive design and Flexbox/Grid need a special mention because once you understand how these things work, it won't be difficult for you to use Tailwind with its max out capacity.

Other than that, here are a few more things that are good to know:

I am not mentioning padding, margin, box sizing, float and z-index because I believe that if you don't know how to work with them, you should think about sticking to plain CSS for some more time.

When to Use Tailwind?

  1. If you have intermediary experience with plain CSS and know how CSS is supposed to work, you can use Tailwind pretty much anywhere you want.
  2. If your front end stack has a component based library such as react, using tailwind will allow you to use it with its maximum reusability and scalability of Tailwind.

When NOT to use Tailwind?

  1. Do not even consider using Tailwind if you don't have intermediate experience with CSS. You might not face issues in the very beginning but as your project gets bigger, it'd get messier and confusing.
  2. If you are building websites with Vanilla JS, you might not use Tailwind at its full potential. Using same class names for every different component would make the code redundant, non-readable and messy.
  3. If you are building prototypes and time/deadline is a major factor, using tailwind will slow you down. Tailwind is best suitable for big projects which give you enough time to focus on design as well as logic.
  4. Similarly, using Tailwind with projects where backend logic or backend services is more important than design must be avoided. Because you'd end up spending more time on design when your focus should be on logic.

TL;DR

Tailwind CSS is a utility based framework so you have to combine multiple utilities and create a component by yourself. That's why knowing about plain CSS is a must. You should have a clear understanding of sizing units, responsive design and media queries. Knowing about conflicting flexbox and grid properties would also save your confusion when you start building projects.

Don't jump to Tailwind if you are not comfortable with plain CSS.

Conclusion

Using Tailwind when you struggle with fundamentals will only lead to frustrations. But once your fundamentals are clear, no one can stop you from harnessing the full potential of Tailwind CSS!

I have scheduled more blogs about starting Tailwind CSS so if you're interested, do subscribe to the newsletter and follow my blog. Also, if you think there's anything that can be improved or added, I am happy to hear your opinion. I am most active on Twitter and LinkedIn.

Happy Designing! 🎨

Top comments (8)

Collapse
 
deathshadow60 profile image
deathshadow60 • Edited

You forgot one of the biggest reasons NOT to use tailwind. If you care in the slightest about accessibility, separation of concerns, different media targets, caching models, and semantic markup, it's a train wreck laundry list of how NOT to build a website. A monument to ignorance, incompetence, and ineptitude CREATED by people not qualified to write a single blasted line of HTML!

Just like bootcrap, failwind does nothing but recreate the worst of the HTML 3.2 mindset, given that the difference between:

class="text-white text-center text-large"

and

<center><font size="3" color="#FFFFFF">

Amounts to exactly two things, and Jack left town. All it does is quite literally implement the outdated outmoded practice of presentational markup using classes instead of tags, dragging us back to the worst of mid to late 1990's practices.

On the "is mankind really this stupid" scale, It ranks right up there with fixed fortifications, hyperloops, ingesting Tide pods, bleach enema's to treat autism, and shoving jade eggs up the holiest of holies for a woman's health. Enjoy your toxoplasmosis ladies!

Would you like to know more?
medium.com/codex/stop-fighting-the...

Collapse
 
ivanbozhkov profile image
Ivan Bozhkov

What a guy

Collapse
 
toxictoast profile image
ToxicToast

Unbelievable right? 🤣

Collapse
 
angelcruzdev profile image
Angel (AJ) Cruz

Ok Karen...

Collapse
 
leonardoromero profile image
Leo Romero

I've used Tailwind for the first time just a few weeks ago combined with the components that DaisyUI provides, makes it a lot simpler!

Collapse
 
clumsycoder profile image
Kaushal Joshi

thats greattt!

Collapse
 
toxictoast profile image
ToxicToast

Thats why Tailwind is a library of Utility classes and you can add your own classes to it or merge a bunch of them into one

 
toxictoast profile image
ToxicToast

Out of the Box... into the tailwind.config.js
tailwindcss.com/docs/adding-custom...