Somtochukwu Okafor

Posted on Jul 28, 2022

Tailwind CSS: My experience in 2022

#tailwindcss #css #webdev #beginners

It's 2022, and it's officially been 5 years since Tailwinds launch. Now some might ask what exactly is Tailwind CSS, well according to their website:

Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces.

I have always been a Bootstrap guy (mainly for its grid column system and many prebuilt components) but after I joined my current organization, I’ve been required to work with Tailwind and it has truly been an experience. In this little article I'll go over the highs and lows I have encountered while working with Tailwind CSS.

Lows

1. No prebuilt components
When I started using Tailwind, I was blown away when I wanted a quick navigation bar and I couldn't see any which was of much use. This was a major shock for me because I was used to using Bootstraps prebuilt components, where I could easily tweak them to suit my needs. With Tailwind, I had to build all my components from scratch, make it responsive and add all the required JavaScript code to further improve on them.

2. HTML code looked jumbled
My HTML files are constantly in disarray, like a lot's going on in them. Normally, a separate CSS file would be required to house the styling and make the HTML file contain strictly markup but with Tailwind you'd have to code the Tailwind tags inline with your HTML code.

/*Vanilla CSS*/
div {
   font-weight: 700;
   font-size: 16px;
   border-radius: 8px;
   color: white;
  }

/*Tailwind CSS*/
<div class="font-bold text-base rounded text-white"></div>

It really just feels like a lot's going on, and indeed it is.

3. Repetition of Tailwind styles
I constantly see myself repeating Tailwind styles over and over again. Multiple div tags with the same class attributes over multiple files eventually becomes awfully repetitive and tiresome.

Highs

1. Reduced CSS code
I noticed I was writing less CSS. Sometimes having the ability to change the background color of a div tag <div class="bg-gray-100"></div> or increasing the font size of a text by simply doing <p class="text-lg">Hello World</p> felt more intuitive than switching over to my external stylesheet to write it.

2.Improved my understanding of CSS
Whenever I stumble on some properties in Tailwind that I have little or no knowledge of, I quickly consult my editor to find and test out the CSS equivalent of that property, and how it fully works and operates thus improving my all round knowledge of the language.

3. Responsiveness has never been truly easier
With tags like xs, sm, lg etc... that could be applied to every aspect of my HTML file, manipulating CSS breakpoints has been a breeze. I almost never have to write media queries because Tailwind does a fine job of handling the aspect of responsiveness.

Summary

It's currently an interesting experience for me, using Tailwind. The question is, will I continue with Tailwind CSS after leaving my organization or when working on a personal project? Well for now, it's not certain, but what I do know is that it's a thrilling new experience and I'm here for every bit of it.🥳🥳

Top comments (67)

Mangor1no • Jul 28 '22 • Edited

If you feeling like the Tailwind's classes are bloated, you can have some options:

Split the components.
Write normal classes and use @apply tag to write tailwind's classes inside them. For example:
```
.big-green-circle {
  @apply w-5 h-5 rounded-full border-none bg-green-500;
}
```
Do both things above.

Ben Sinclair • Jul 29 '22

Using semantic classes and putting everything in CSS with @apply is the only way I can see Tailwind being used. Anything else is just two steps backwards.

spotnick • Jul 29 '22

Then you have not understood why tailwind was made. No offence it is your right to think like that and I have thought the same. But using tailwind now daily is just the creme on the cake. It’s easy and awesome :)

Ben Sinclair • Jul 29 '22

No, I get why Tailwind was made, and how it's generally used. It's just that I think those uses are detrimental to the web.

farid • Jul 30 '22

A few days ago I found this interesting post about tailwindcss.
javascript.plainenglish.io/tailwin...
I must say that the only way I found tailwind usable is via creating group classes via @apply
I came to tailwinds a couple of years ago searching for a lighter solution because I was tired of bootstrap and its heavy css file.
I tried bulma, foundation ui toolkit and MUI too but none of them convinced me

Salih • Jul 31 '22

@faridsa so what do you think about tailwind now, do you think it's positive? should we use

Ben Sinclair • Jul 31 '22

This is a good article and fits my point of view quite nicely.

farid • Jul 31 '22

My personal position is using tailwindcss to solve fast mockups or little projects as landing pages, because it is really light in final css file.
But when it comes to large and long term projects I do prefer to create my own stylesheet using css variables and necessary classes with sass. I found that more sustainable.
In any case, I think that each developer ends up using the tool that best suits their modality.

Aileen Rae • Jul 28 '22 • Edited

Nice. I’ve never checked out Tailwind because the cluttered HTML is just not my style but this apply feature makes it look a lot more appealing. Glad I stumbled across this comment!

Somtochukwu Okafor • Jul 28 '22

Wow, I didn't know of this. Thank you @mangor1no

Paweł Miczka • Aug 12 '22

I agree - dividing code into small pieces like components helps a lot and for me tailwind is great example of framework / library that force you to use some patterns in code.

Using @apply isn't great idea. Tailwind after build removes unused classes so if you create new one it won't be removed but created as new one which means that Tailwind doesn't make sense to use - it now reminds me some things like BEM

Aslam Shah • Aug 23 '22 • Edited

I don't see why would you add an apply instead of writing pure css 💅 Its fun 🎉

Rei Krom • Jul 31 '22

last time i checked using tailwind @apply it converts the classes to css and begins to bloat everything as you're not using utility classes anymore. is this still true?

Rense Bakker • Jul 29 '22

I'm very strongly against using Tailwind exactly for the list of "highs" you wrote down... Granted I'm looking at this mostly from a React perspective... But every UI framework out there offers those same highs, but with less of the lows. My major low for Tailwind is that you have to handle all accessibility coding yourself, like adding element role and for attributes. I always prefer using a framework with pre-built components that give me options to override styles by adjusting a theme and using CSS in JS solutions.

RRKallan • Jul 29 '22

I’m also not a fan of tailwind.
One of the highs is better understanding css. Because trying equalivent class with inspect element. I think you can also do that with changing the css value in inspect element.

Somtochukwu Okafor • Jul 29 '22

Funny enough I use React too but yes I'd prefer a CSS framework with more configurable prebuilt components like Bootstrap. Maybe with time Tailwind would have this but for now I'm still confined to having to build from scratch up.

RRKallan • Jul 29 '22

If you write one time a reusable component, you can reused it also on other project. For maintainability you can create own package.

Somtochukwu Okafor • Jul 29 '22

Thanks @rkallan , creating my own package might actually be the way to go in the long run.

Oscar Ortiz • Jul 28 '22

Every framework has its purpose.
Tailwind has made it easier for me to produce web pages faster without having to style everything with vanilla CSS.

Bootstrap is great as well. ReactStrap is what I use more.

Again. Each to their own. That’s the best part about programming.

So many different solutions 😎

Great article by the way

Peter Vivo • Jul 29 '22

No prebuilds components:

You can found tons of tailwind solutions too, even for complex layout tailwindui or even CSS component library like daisyui

Somtochukwu Okafor • Jul 29 '22

Thank you @pengeszikra , will be sure to check them out.

Andy Freidenfelds • Jul 29 '22

github.com/michal-wrzosek/cntl

This utility 👆 was a huge help for me when dealing with the "short comings" of tailwind. Grouping the utility classes in list notation is way cleaner IMO.

As many have mentioned, separating tailwind from the markup is an anti-pattern. The value prop is to stay within the markup to style and not have to search/context-switch. it definitely takes getting used to. the key for me was IDE integration. once you setup your IDE properly, it can suggest/auto-complete all the tailwind utility classes. and not just base tailwind either. if you customize things like your color palette, those classes will be suggested as well.

if you do end up using cntl or a similar lib, there may be some additional tweaks to make to the IDE integration. but once that is working, i found tailwind to be a great dev-ex!

Somtochukwu Okafor • Jul 29 '22

Thanks a lot @afreidz . I'll be sure to check out the utility package.

Aaron Reisman • Aug 1 '22

If you're using React, you can hide away the jumbled CSS in a UI Component, that way all styling is encapsulated within the component, and you don't have dangling classNames all over the codebase.

Example here: gist.github.com/lifeiscontent/84bb...

Somtochukwu Okafor • Aug 3 '22

Thank you @lifeiscontent , so basically CSS in JS components ..like Styled Components? I'll check out the example.

Julia 👩🏻‍💻 GDE • Jul 30 '22

I really like your article about a new experience you had lately. It shows that you are open minded and can adopt new things when needed. If you choose to go your (private) future with Tailwind or not, just keep up the great work 💯

Somtochukwu Okafor • Jul 30 '22

Thanks @yuridevat

Nicholas Lane • Jul 29 '22

The responsiveness does make my life a lot easy than stating a hundred media queries in separate stylesheets!

Fox Scarlett • Jul 30 '22

If you have to use 100 (or whatever) media queries, maybe your CSS is inefficient? Or even more likely, the design isn't good (won't break cleanly between devices so you need different breakpoints on every element)? I say this as someone who was doing this constantly in my first dev job until I realized (after 2+ years) that having a media query every 50 px is a sure sign that your CSS and the design both suck :D Having said that, sometimes you gotta do what you gotta do.

Nicholas Lane • Jul 31 '22

Well i was going for hyperbole in that comment...
But you aren't too far off base! I am sure I've written a lot of bad css haha.

Fox Scarlett • Jul 31 '22

We all have! 😅

Amirreza Zarkesh • Jul 28 '22

If you use javascript frameworks, you can create javascript component to prevent repeating your styles.

Somtochukwu Okafor • Jul 28 '22

Thanks, I will try that out next time .

Locksi • Jul 30 '22

Tailwind in html is ugly. The only way I use it is with the @apply. You’re right about the sm, lg prefix for responsiveness. It makes life easier.

barbra okafor • Jul 28 '22

Good read and very informative. I always look forward to your articles

Somtochukwu Okafor • Jul 28 '22

Thank you

Rense Bakker • Jul 29 '22

Are there other good libraries that offer pre-built components for tailwind?

eshimischi • Jul 29 '22

tailwindui, flowbite, daisyui etc

Somtochukwu Okafor • Jul 29 '22

I tried out Flowbite React but its components were not easily configurable and were more a headache than a solution.

eshimischi • Jul 29 '22

Put commonly used tailwind ui libs here only, had experience with daisy ui and Vue before

Rense Bakker • Jul 29 '22

I must say I do not have experience with any of those. I did take a look at Tailwind UI a little while ago and it looked good, but then I found out you have to pay for it :S

eshimischi • Jul 29 '22

Well yes, but it doesn’t mean it is bad or smth. Their templates are pretty well developed

J.D Nicholls • Jul 30 '22

I constantly see myself repeating Tailwind styles over and over again.

That's why you need to create a component or use PostCSS with TailwindCSS to create utility classes 😁

Orim Dominic Adah • Jul 29 '22

A quite balanced review from someone new to Tailwind.
Hoping to see the v2 of the article when you're more experienced with it
👍

Somtochukwu Okafor • Jul 29 '22

Thanks @orimdominic , it'll be sure to come.

Erick Eduardo Petrucelli • Aug 1 '22

Nope, it isn't an antipattern.

Yes, it's.

From Tailwind documentation on Avoiding premature abstraction:

Whatever you do, don’t use @apply just to make things look “cleaner”. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse.

If you start using @apply for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you, for example:

You have to think up class names all the time — nothing will slow you down or drain your energy like coming up with a class name for something that doesn’t deserve to be named.

You have to jump between multiple files to make changes — which is a way bigger workflow killer than you’d think before co-locating everything together.

Changing styles is scarier — CSS is global, are you sure you can change the min-width value in that class without breaking something in another part of the site?

Your CSS bundle will be bigger — oof.

If you’re going to use @apply, use it for very small, highly reusable things like buttons and form controls — and even then only if you’re not using a framework like React where a component would be a better choice.

And if you allow me to put my personal opinion on top of that, everyone that feels @apply is unavoidable with Tailwind are just either:

Too closed to the semantic classes mindset (probably because of things like Bootstrap). Not blaming you, I was this way as well.
Not using components based development (with Vue, React, Svelte, Web Components, whatever). And by "using components" I mean really understanding how to properly split down a complex UI into small abstract and reusable pieces. Like others said, Atomic Design way can help a lot.