Complete guide to tailwindcss in 2024

Disclaimer
This post is based on my experience and personal opinion. You should constantly challenge articles and influencers' views before making a technical decision for your project.

If you come across this post, it means you have heard about or already worked with Tailwind CSS. In any case, I hope this post will be helpful.

Let's start with a small recap.

What's Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that streamlines the styling process by offering a set of utility classes. Think of it as Bootstrap, that instead of giving you opinionated ready-made components, it only provides a set of CSS utility classes(with opinionated defaults that can be changed) that usually represent a single CSS declaration(property and value). I think an example will be more useful here:

<!-- Styling example using Tailwind CSS utility classes, from the official website -->
<a class="bg-slate-900 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 text-white font-semibold h-12 px-6 rounded-lg w-full flex items-center justify-center sm:w-auto dark:bg-sky-500 dark:highlight-white/20 dark:hover:bg-sky-400" href="#">
  Get started
</a>

As you can see in the above example, the styling for the link element is done by using a bunch of utility classes instead of a single class and CSS styles.

I picked the above example on purpose. You may think: why would someone use this approach? Doesn't this look like tech debt for future maintainers?

Yes and no. Each tool has its advantages and disadvantages. We will cover them in this article.

Tailwind CSS cons

• Lengthy Class Attributes(as in above example or multiple memes on socials, like ). This makes the maintenance more difficult in the long run and "pollutes" the HTML, making it harder to read and more prominent in size.

• Learning curve - if you're not using Tailwind CSS daily(or never used it), you'll need some time to learn it. For example, what does px-6 mean?

• Additional tooling - yes, you'll need to install a few more dependencies in your project. IMHO, this is fine, as nowadays, scaling with what the platform provides is very hard for more complex projects. "CSS only" approach can be more than enough for small projects, though

• Hard to debug - Maybe it's only me, but I really like it when I inspect an element and see all its styles. Here are two examples to illustrate better the struggle:

Debugging styles with Tailwind CSS

Debugging styles alternative solutions

• And a sneaky one: when you start working with Tailwind CSS and it feels like CSS, the order of class attributes does not matter, as the position in the final CSS files is what actually matters. An example would be: px-2 px-4. Which one will be applied? There is a high chance that it is not the last, as the class order does not matter.

If Tailwind CSS is that bad, then why do people use it?
Let's discuss the Pros now :)

Why use Tailwind CSS

• performance via PurgeCSS - It all started when I saw this video: https://youtu.be/WxPtYJRjLL0?si=EzPcneUXthQ73XfA&t=1718. I really wanted a solution that would ship only the CSS that is used, ideally composed of multiple utility classes. That's why, despite all the ugly classes we saw earlier, I decided to learn and use Tailwind CSS. Fast forward four years, Meta released styleX, but I think it's too late, as there are many similar established solutions already.

• I don't need to think about the name of the class - a huge one for me. I don't want to spend mental effort to name my classes, which other engineers can interpret differently. Also, I hate when I need to do .containerWrapper or any other wrappers just to adjust the grid, spacings, or other small things. And yes, I know about CSS modules, but you still need to come up with a name there.

• documentation - Tailwind CSS has great docs, that are easy to navigate and search, and each utility class is well documented.

• highly customisable - each aspect of the Tailwind CSS can be customised. This can be achieved by updating the Tailwind CSS config file. You can go beyond and extend it with plugins as well(in case some of the utilities are missing)

• style colocation with markup - when I update the UI, I don't need to worry that I will accidentally break something somewhere because the CSS class has been reused. The same can be achieved with other tools, like CSS-in-JS libraries or CSS methodologies like BEM.

• not coupled to a specific framework/UI library - I can use Tailwind CSS with plain HTML, React, Laravel, RoR, Vue, Solid, Svelte... You got the point ;)

• development speed - very subjective, but I feel that you can move faster once you've learned how to use the utility classes

• AI ready - You can ask ChatGPT to build a component and style it with Tailwind CSS, and it will do it. There are also amazing projects like https://v0.dev/ that leverage AI to boost your productivity when building apps.

• ecosystem - with almost 8M weekly downloads on npm, Tailwind CSS has a huge ecosystem of ready-to-use templates, UI kits or libraries that can boost productivity or solve some of the Tailwind CSS issues.

Packages you may want to use with Tailwind CSS

• https://github.com/tailwindlabs/tailwindcss-intellisense - big time saver, as I don't need to check docs all the time for values of a specific class. And it works with both vscode and neovim.

• https://github.com/tailwindlabs/prettier-plugin-tailwindcss - this plugin will help with automatic sorting for the class attribute in the same order that Tailwind orders them in your CSS. You can get a more in-depth explanation of how it works here.

• https://cva.style/docs - Remember the long list of classes from above? Well, if you're using a framework where you have reusable components, most of the time, your class list will be something like: flex items-center, grid grid-cols-3, border border-gray-500 rounded-md shadow-md p-4, etc. The longest list will have your design system components. Please use this library to have a better way to manage classes and also enhance them with variants. You can also check out this awesome video: https://www.youtube.com/watch?v=T-Zv73yZ_QI

• https://github.com/dcastil/tailwind-merge - This library can help merge Tailwind CSS classes without having conflicts. For example, the above unknown behaviour for px-2 px-4 will be more clear with twMerge("px-2 px-4") as, in this case, it will result in only px-4 being rendered. Also, it's handy when you need to override some of the component styles.

• https://github.com/lukeed/clsx - It's not Tailwind CSS related, and most likely, you're using something like this already. This utility helps improve your long class list on your elements. The above example can look much more maintainable now:
  

    <a
      className={clsx(
        "bg-slate-900 text-white font-semibold h-12 px-6 rounded-lg w-full flex items-center justify-center",
        "focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50",
        "hover:bg-slate-700",
        "sm:w-auto",
        "dark:bg-sky-500 dark:highlight-white/20 dark:hover:bg-sky-400",
      )}
      href="#"
    >
      Get started
    </a>

Move faster with ready made components

Tailwind CSS community is huge. There are plenty of free and paid ready-to-use templates and UI kits that can save a lot of time when building a new project.
I will highlight a few:

• https://ui.shadcn.com/ - The hottest project of the 2023, a collection of UI components written in React, allowing customisable styling through Tailwind CSS. The source code for the provided components is added to your project, and you can freely customise and adjust it based on your needs. Very convenient!

• https://daisyui.com/ - The most popular component library for Tailwind CSS. You can use the components by utilising a set of predefined class lists, like in Bootstrap.

• https://tailwindui.com/ - Premium(paid) templates and components from the Tailwind CSS team, which can help build your next project much faster.

How to get started

• Start with the basics and learn CSS first if you want to have the biggest benefits.
• When building UI, think about what CSS you need to apply and then just put the right Tailwind CSS class
• Don't be afraid to experiment. You can start with some simple UIs to understand if this tool can solve your problem or not
• Please, do not use @apply. You can write regular CSS
• Please, use something like clsx. Future you will thank you for that

Conclusion

Tailwind CSS is a fantastic tool. Like any other tool out there, it may solve your problem, it may add more complexity, or it can be misused. It's up to you and your team to decide whether you want to use it. But you should try it, even if it's hard initially.
Personally, I will continue to use it, as I find a lot of value in it, and I have already highlighted the main benefits that I get from it.

If you like this post, don't forget to like and share it with your colleagues, and you're always welcome in the comments to share your experience with the Tailwind CSS.