But What is TailwindCSS ?

TailwindCSS is a utility-first CSS framework aiming at building user interface in the fastest way possible.

I built this site using TailwindCSS 😉

Overview

Before getting into TailwindCSS people often see TailwindCSS as yet another variant of Bootstrap. While Bootstrap's utility classes apply fixed styles to your HTML elements Tailwind works quite differently.

Tailwind also works with utility classes but the utility classes here do not apply any fixed style to you HTML element rather, it provides a short-hand name to all the CSS properties available, like flex for (display: flex), pt-4 for (padding-top: 4 units), text-center for (text-align: center) and rotate-90 so on.

What TailwindCSS addresses ?

Just like Bootstrap we provide Tailwind's utility classes in the className attribute of a JSX or class of an HTML element. You don't need to maintain a separate stylesheet to handle the styles.

I personally hated switching between CSS and the HTML/JSX files just to add one more style and again back to looking at the logic part. Tailwind cleverly addresses this issue and gives you the best of both worlds - the power of CSS right in side your HTML/JSX and without having to maintain a separate stylesheet.

One more issue I faced with traditional CSS was naming the custom classes, in my case I would sometimes spend at least a minute just to find a suitable class name but with Tailwind there is never such scenario.

The best part of Tailwind is that it gives you full control of the styles just like ordinary CSS but great ease.

Is Tailwind the BEST ?

To answer this let's look at how Tailwind is used.

image

Seems familiar or looks like Bootstrap, indeed yes, it looks similar to how Bootstrap is used.

The class names seem interesting right ? You can do anything with Tailwind that you can do with traditional CSS.

This is a basic overview of Tailwind.

Drawbacks of Tailwind

There are no as such drawbacks of Tailwind.. But, imagine a React component that is very responsive aiming at a rich UX. Assume a component with the following properties - varying text size, custom text color, scale on hover, background color of violet, display is flex, display none for medium sized screens, rotating animation with duration of 3 seconds, with a shadow, border color of gray, centered text ah come on.... that to for different breakpoints.

What would TailwindCSS look like for the above few 🥶 properties ?

<div className = "text-sm lg:text-2xl text-[#23F554] scale-105 bg-violet-600 flex md:hidden animate-spin 
lg:animate-none shadow-md lg: shadow-lg border border-gray-300 text-center lg:text-start" >
Man this is huge...
</div>

Looks a bit clumsy right ? Imagine if your component was even more dynamic and responsive the className would blast out your screen. This is probably the only drawback you would find.

One hack I would suggest is if your are confident with you styles simply make a const variable (string) that will contain the styles and use this variable in your JSX.

Pros

I purposely put Pros after Cons because, if you are fine with the downsides of Tailwind then you will surely consider using Tailwind in your next application. Let's look at the pros..

  • Fast development
  • Extensive control over styles
  • No switching between files
  • Great documentation
  • Huge community

Working with Markdowns ? Tailwind got you covered the typography plugin by Tailwind will inject styles directly in to your markdown. The page you are now looking at is also a Markdown fetched from a headless CMS and styled by Tailwind 🔥

Learning curve

If you are decent with your CSS skills and are knowledgeable of what property is used for what usecase , you are ready to take off with Tailwind. All the utility-classes are named very close to the actual CSS property names. If at times you don't remember the class name Google's got you covered simply search, for eg: 'display none in TailwindCSS' you will find your answer.

Most of the times your IDE will suggest you the class name while you type and folks at Tailwind have curated some of best documentation which covers all you need for your next beautiful application.

In addition to what Tailwind offers us, Tailwind is extensively customizable the tailwind.config.js will allow you to customize Tailwind in whatever way you want 😉.

Resources

Documentation: https://tailwindcss.com/docs/installation

All the best for your next beautiful web app with TailwindCSS.

Until next time 👋