What is TailwindCSS?

TailwindCSS is a CSS framework used for rapidly building websites without leaving your HTML. It should not be confused with TailwindUI which is a set of prebuilt HTML templates (using TailwindCSS) created by the makers of TailwindCSS.

Tailwind have tailored it to be a "highly customizable, low-level CSS framework". This allows you to be able to build out custom components in a utility-first approach which has saved developers hours of work by improving their workflow.

TailwindCSS has been compared to Bootstrap but this comparison is flawed for one major reason...

Bootstrap is a great way for beginners to build out designs quickly because it comes with pre-designed components. It is exactly this "pre-built" nature of Bootstrap though that makes it somewhat inflexible and a hindrance for developers looking to simply extend or modify existing Bootstrap styles.

I'm not saying it can't be done... because it can.

But the almost atomic approach to Tailwind is what sets it apart from Bootstrap. Tailwind provides you with the building blocks which you can then use to construct your designs in a manner you see fit without the annoying problem of mistakenly overriding styles or battling with default configurations.

Tailwind makes your life easier as a developer, whether you're a pro at CSS or not.

Writing CSS more easily means less frustration and more productivity - important factors for all of us who value our time.

How can TailwindCSS help you code faster? Let's look into that.

Benefits of Using Tailwind

Tailwind not only saves you time as a developer, but also makes the whole process of writing CSS quite enjoyable.

It's predictable in that it uses meaningful variables and predefined classes while outputting a very small bundle size with PurgeCSS. Custom CSS components are even possible with TailwindCSS thanks to the possibility of composing a parent class with a number of Tailwind utility classes.

This is just the start of the benefits of Tailwind. Here are a few more:

1. Easy Onboarding

Say you work on a project and a new developer is brought in.

Getting the new developer up to speed with the codebase can take a significant amount of time due to it being new code.

This is completely normal.

Add in the complexity that even well-written CSS brings in and the chances of a quick, seamless under-one-hour onboarding becomes a dream. Fair to say that a project’s CSS code can be a significant hurdle to get over before the developer is able to confidently extend and modify the existing codebase.

Tailwind comes to the rescue here as it provides all the naming and organization which remains consistent across projects.

Sure, there are of course means for complexity thanks to Tailwind’s extensibility which allows custom configs to be set up. But, overall, the barrier to entry is several magnitudes lower than when walking into a vanilla CSS or CSS-in-JS codebase.

2. Zero Context Switching

It is completely possible to style out your entire HTML without physically leaving the HTML code when using Tailwind.

This is a true time-saver. Just think about the number of times you’ve looked at your HTML, gone into the CSS to make a tweak, and then spent at least a second or two picking up where you left off in the HTML.

While this may sound trivial at first glance, anyone who has coded for a long time will know how these little context switches can break concentration or, at the very least, waste a lot of time over months and years.

3. Existing Design System

Working out font scales, consistent spacing rhythms and color variants can take ages for those who are not designers or developers who have not had a perfectly annotated design handed over to them.

Unfortunately, this is quite common.

Fortunately, Tailwind solves this issue by providing the design system.

A design system set in place allows for less mental overhead deciding between two very similar shades of teal or a slightly smaller font size.

A design system is constraining which is necessary for those that want to build slick and consistent layouts in the shortest possible time frame. This allows for more time focused on writing code that gets the job done without sacrificing design quality.

Tailwind’s design system is extensible, so the constraints can be overridden. But it is this initial system that saves developers oodles of time when they just want to get up and running as quickly as possible.

4. Logical Utilities

The days of racking your brain for a new class name that fits in the rest of your CSS code are over, thanks to Tailwind.

All the classes used are utility classes meaning that they correlate to a very small, modular snippet of CSS code which is often only one line long. What this gives you is atomic control of your layouts without any issues of unintentionally overriding previous styles.

These utility classes are used directly in the HTML allowing you to easily see where you’ve repeated or overridden yourself. This reduces code duplication and a common source of developer frustration.

For example, the class “mt-4” can be added as a class directly to an HTML element. This would add a top margin of 1 REM (typically 16px) to the element it has been applied to.

Should you wish to bundle a few utility classes into one parent class such as “.button”, Tailwind have made it simple by allowing you to use the “@apply” directive.

Adding the “.button” class to an HTML element will then apply all the utilities defined under the “.button” CSS class. This improves readability and allows for time-saving reusability if you have multiple HTML elements you’d like to use the “.button” class on.

While the atomic, utility-based Tailwind classes will serve your design needs almost every time, Tailwind has been built in a way that allows you to further customize the system when needed.

5. Responsiveness is a Priority

Responsive designs are an absolute must with over 50% of web content being viewed on mobile these days. It’s simple, if you’re not building responsive layouts then you’re locking out a certain number of users or giving them an awful experience when interacting with your sites.

Making your designs responsive could not be any easier or faster with Tailwind thanks to what they’ve termed “variants”.

All of the Tailwind utilities are generated with responsive versions, or variants, allowing you to simply prepend a certain size (“xs:”, “sm:”, “lg:”, “xl:”, etc.) to a utility class for it to only apply at that size. By default, Tailwind classes apply to the smallest screen size so it’s best to use the responsive sizing names as your screen size increases.

Gone are the days of writing out separate CSS for your various screen breakpoints which can often lead to overriding issues which sap more development time.

Customization is also possible here.

If you would like to customize your desired screen sizes then you can redefine what the variant prefixes correspond to, in terms of pixel width, in a special Tailwind config file that is generated when starting a Tailwind project.

6. Smaller Bundle Size to Save Your Users Time

Tailwind doesn’t just save you time as a developer, it also saves your users time.

You may not think so when you first lay your eyes on the CSS file outputted by Tailwind (around 480kb).

But…

Tailwind initially comes packaged with all of the possible utilities you may need. This naturally results in a huge CSS file which you certainly shouldn’t ship to production if you care even the slightest about site load times and user satisfaction.

What this initial, large CSS file allows for is fast prototyping in the development environment. You’re able to add and remove different utilities in your HTML without having to touch the CSS file. The magic happens when you’re ready to ship your code to production…

Tailwind is set up to work with PurgCSS and a simple build command will tell PurgeCSS (defined in the tailwind.config.js file) to go through the HTML and find all the Tailwind utilities used.

PurgeCSS then rakes the development Tailwind CSS file and removes all the utilities not used in the HTML.

Setting up PurgeCSS to work with Tailwind is easy thanks to the fantastic explanation over on the TailwindCSS website.

In this way, the generated CSS file for production is greatly reduced in size and only includes what is actually used in the HTML. The client now only loads the CSS necessary for the site to work which means no time is spent loading useless code.

Limitations of Tailwind

Nothing is perfect (except for my tennis forehand), not even Tailwind.

While it has a ton of benefits like improving consistency, performance, and developer time-efficiency, no library is perfect for every developer or team and Tailwind is no different.

1. Readability

The first glaringly obvious limitation, at least to those who are new to Tailwind, is its readability. Those coming from a BEM-style of writing their CSS may be totally put off by HTML littered with tiny class names which appear to clog what is happening in the code.

This is actually not a limitation that lasts very long. Most developers who have felt annoyed by this initially learn to get used to the way it reads. In fact, some have done full 180, like Shawn Wang, Swyx, who went from calling it “classname soup” to saying “Tailwind is easier to learn than I thought”.

The “classname soup” can certainly be off-putting but there are component abstractions (remember the “.button” class we spoke of earlier?) that can mitigate this and generally your eyes will learn to get used to and may even learn to love it (if you don’t already).

With TailwindCSS, what you see is what you get. If you are initially a little put off, give it some time by viewing it as a learning curve. If you still cannot accept all the Tailwind utility names in your HTML, then abstract them to custom CSS names and use them as you normally would use CSS classes.

You’d still be getting most of the benefits of using Tailwind.

2. Lack of Complex Animation Support

Only support for simple animations is included. More can be added through the config file but more difficult animations are tricky if you want to do them strictly with Tailwind.

If you are after complex animations, then you may be better served by writing vanilla CSS or using an animation library.

But most cases will be served well by the handy animations that come with Tailwind such as “.animate-pulse”, “.animate-bounce”, and “.animate-ping”.

I’m sure they will be adding more animations to this in the future though.

Conclusion

Tailwind is a hugely beneficial CSS framework that has several fantastic benefits if you’re a developer looking to build out great-looking designs as quickly as possible.

Working quickly often involves a trade-off of some kind such as quality, but using Tailwind allows you to save time and improve the quality of your code and layouts.

It achieves this by providing a design system that is easy to understand and extend.

While many still prefer to write vanilla CSS or use CSS-in-JS, Tailwind provides us with a way to get sites up quickly without making speed or design sacrifices. It doesn’t have to replace your vanilla CSS but can be used in conjunction with it.

You could, for example, write out all your base layouts using Tailwind and then use vanilla CSS for custom animations or very specific, repeating components.

Either way, you should certainly give Tailwind a chance as it has the potential to drastically improve your efficiency as a developer.

If you’re interested in learning how to use Tailwind, check out their fantastic docs. The screencasts are also a great way to see Tailwind in action as the creator, Adam Wathan, shows.

What do you think of Tailwind?

I’d also like to thank to Rey for his great help with this article <3