Complete guide to tailwindcss in 2024

Mihail — Mon, 22 Jan 2024 20:47:08 +0000

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 // Detect dark theme var iframe = document.getElementById('tweet-1745394119889801454-699'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1745394119889801454&theme=dark" } ). 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.

Debugging Node.js like a PRO

Mihail — Fri, 27 Oct 2023 11:34:31 +0000

If you opened this post, you want to unlock the ultimate power of debugging node.js apps. I think you will agree that the console.log is still the king. It's time you close the article now. Or not...

The other day, I was trying to debug why a migration takes forever to run. Unfortunately, it was using a 3rd party package to do that, so I did not have direct access to the codebase(except by going to the node_modules folder or GitHub). But even if I can open the code, of course, it's tough to understand it.

If there could be a way to hook into the code execution...

Wait, there actually is. Just follow the official guide for Debugging in node, and you're done. However, for some reason(I bet it has something to do with the worker_threads or some child process) it didn't worked in my case.

Another option would be to use the .vscode/launch.json file, but I always find it painful to create and read.

Can there be an even easier way to run debug mode for node?

The answer is simple: YES. And this was the day when I found the Debug: Toggle Auto Attach command in VS Code(my current editor of choice, as I can't finish my Neovim config 😀). Just press Cmd(or Ctrl)+Shift+P, paste Debug: Toggle Auto Attach and choose from one of the available modes: Always, Smart, Only With Flag, Disabled. You can read more about each option here.

After selecting the option, all you have to do now is to restart your terminal in VS Code, add the breakpoint in your code, run the node script(via node, npm, yarn, etc) and focus on identifying and solving the problem.

For my case, I used the Always option, as I wanted to have the debugger running for all the node processes that run in my terminal. This way, I was able to find and report the problem of why the migration ran slow(fetched too many rows because of a specific config option, which should not be the case). Once I was done, I chose Disabled option and got back to the king of debugging, console.log.

I hope you enjoyed the post and it was somewhat helpful.

DEV Community: Mihail