DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for Tailwind CSS: My experience in 2022
Somtochukwu Okafor
Somtochukwu Okafor

Posted on

Tailwind CSS: My experience in 2022

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>
Enter fullscreen mode Exit fullscreen mode

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 (75)

Collapse
mangor1no profile image
Mangor1no • Edited on

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

  1. Split the components.
  2. 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;
    }
    
  3. Do both things above.

Collapse
moopet profile image
Ben Sinclair

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.

Collapse
spotnick profile image
spotnick

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 :)

Thread Thread
moopet profile image
Ben Sinclair

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.

Thread Thread
faridsa profile image
faridsa

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

Thread Thread
hanifeoglu profile image
Salih

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

Thread Thread
moopet profile image
Ben Sinclair

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

Thread Thread
faridsa profile image
faridsa

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.

Collapse
natescode profile image
Nathan Hedglin

@apply it is an anti-pattern. If a component has a ton of classes then it is probably too big.

I use atomic design which has layout components that handle the margin etc.

Collapse
brense profile image
Rense Bakker

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

Thread Thread
eshimischi profile image
eshimischi

tailwindui, flowbite, daisyui etc

Thread Thread
somtookaforr profile image
Somtochukwu Okafor Author

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

Thread Thread
eshimischi profile image
eshimischi

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

Thread Thread
brense profile image
Rense Bakker

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

Thread Thread
eshimischi profile image
eshimischi

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

Collapse
yoquiale profile image
Alex

Nope, it isn't an antipattern. If a component has a ton of classes then it's a you problem, not a tailwind problem.

Thread Thread
natescode profile image
Nathan Hedglin

Even the creators say @apply is an anti pattern. It is using Tailwind to make classes with extra steps. It is better to just use BEM and sass at that point.

Thread Thread
yoquiale profile image
Alex

It's not, taliwind already includes helpful utility classes. SASS and BEM are not utility frameworks.

Thread Thread
natescode profile image
Nathan Hedglin

Yes, but @apply isn't either. It is a poor man's mixin. It is just compiler-assisted copy-paste. You're bloating your spreadsheet and making classes. You lose all the benefits of Tailwind and are better off using sass mixins and some other library imho.

Thread Thread
erickpetru profile image
Erick Eduardo Petrucelli

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.
Thread Thread
yoquiale profile image
Alex

I do component-based development in vue and split stuff by functionality and reusability. I use \@apply in each component's tag.</p>

Thread Thread
natescode profile image
Nathan Hedglin

Why? I don't see the benefit of Tailwind if one is using compiler directives to write CSS classes. The point of Tailwind is to not write CSS classes that have to be named, can't semantically be reused and grow with each component. There is no benefit other than limiting CSS property values which can be done with custom props. @apply is just a weak mixin that can't take parameters.

If you just want to restrict property values, I highly recommend using a custom props library like open props. If you're defining styles per component anyways then couple open props with styled components and you're set.

Hope that helps. So many interesting CSS approaches these days.

Collapse
balaji043 profile image
Balaji Ramasamy

can you please some good article on the atomic design thing?

Thread Thread
natescode profile image
Nathan Hedglin

The canonical link for Atomic Design . Mostly theory though.

I'm working on a blog post on my thoughts actually using Tailwind, React, Next and Atomic Design. Theory and practice rarely align.

Collapse
aileenr profile image
Aileen Rae • Edited on

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!

Collapse
somtookaforr profile image
Somtochukwu Okafor Author

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

Collapse
pawelmiczka profile image
Paweล‚ Miczka

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

Collapse
hunzaboy profile image
Aslam Shah • Edited on

I don't see why would you add an apply instead of writing pure css ๐Ÿ’… Its fun ๐ŸŽ‰

Collapse
reikrom profile image
Rei Krom

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?

Collapse
brense profile image
Rense Bakker

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.

Collapse
rkallan profile image
RRKallan

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.

Collapse
somtookaforr profile image
Somtochukwu Okafor Author

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.

Collapse
natescode profile image
Nathan Hedglin

Tailwind is a CSS library not a component framework. You can use Tailwind with most any component framework, it is just classes.

Collapse
rkallan profile image
RRKallan

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

Thread Thread
somtookaforr profile image
Somtochukwu Okafor Author

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

Collapse
natescode profile image
Nathan Hedglin

Tailwind is only CSS, NOT a component library. Use MUI, Headless UI, Mantine etc for that with Tailwind. Don't conflate CSS and HTML components.

Collapse
cleveroscar profile image
Oscar Ortiz

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

Collapse
natescode profile image
Nathan Hedglin

I'd recommend something like Headless UI for a Tailwind compatible component library. MUI or Mantine can be made to work too.

I never use @apply, it is an anti-pattern. Instead, I follow, more or less, atomic design. Breaking up my components keeps the class lists small. I have layout components that only handle layout as well.

I'm still experimenting with Tailwind too.

Collapse
afreidz profile image
Andy Freidenfelds

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!

Collapse
somtookaforr profile image
Somtochukwu Okafor Author

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

Collapse
pengeszikra profile image
Peter Vivo

No prebuilds components:

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

Collapse
somtookaforr profile image
Somtochukwu Okafor Author

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

Collapse
yuridevat profile image
๐•๐•ฆ๐•๐•š๐•’ ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

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 ๐Ÿ’ฏ

Collapse
somtookaforr profile image
Somtochukwu Okafor Author

Thanks @yuridevat

Collapse
lifeiscontent profile image
Aaron Reisman

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...

Collapse
somtookaforr profile image
Somtochukwu Okafor Author

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

Collapse
locksi_desmond profile image
Locksi

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.

Collapse
nicklane profile image
Nicholas Lane

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

Collapse
foxonthe1 profile image
Fox Scarlett

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.

Collapse
nicklane profile image
Nicholas Lane

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.

Thread Thread
foxonthe1 profile image
Fox Scarlett

We all have! ๐Ÿ˜…

Collapse
barbra_okafor profile image
barbra okafor

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

Collapse
somtookaforr profile image
Somtochukwu Okafor Author

Thank you

Collapse
arzarkesh profile image
Amirreza Zarkesh

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

Collapse
somtookaforr profile image
Somtochukwu Okafor Author

Thanks, I will try that out next time .

Collapse
orimdominic profile image
Orim Dominic Adah

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

Collapse
somtookaforr profile image
Somtochukwu Okafor Author

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

Collapse
jdnichollsc profile image
J.D Nicholls

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 ๐Ÿ˜

Collapse
mactechschool profile image
mactechschool

this is helpful, thank you for sharing

Collapse
nedu_boyy profile image
nedu

Well detailed, will always check in for more

Collapse
somtookaforr profile image
Somtochukwu Okafor Author

Thank you

Collapse
lnfel profile image
Dale Ryan • Edited on

Lows
No prebuilt components

While pre-built components helped with development of web layouts for a very long time. Pre-built components add more work by having to be configured EVERYTIME you make a new project. You can technically reuse some of the configurations you have used in the past but that will not work for every project you will have throughout your career as a web developer. Tailwind did a pretty great job on removing this pain when starting a new project from scratch.

HTML code looked jumbled

As if other ways of writing CSS is not jumbled. Consider BEM:

<img class="photo--highlighted photo__img">
Enter fullscreen mode Exit fullscreen mode

Seems better than Tailwind right? Actually no, and that is not the point of using Tailwind. It is always up to you how you name your classes and Tailwind does not care about that. Tailwind is created to aid in making prototyping of custom layouts faster without the pain of overriding css framework opinionated defaults.

When you are done prototyping, you should always merge tailwind classes into components using @apply. This will reduce the file size of your HTML when you deploy to production and will make maintainability of your CSS easier.

Collapse
somtookaforr profile image
Somtochukwu Okafor Author

True, having to always configure pre-built components is definitely more work but isn't building them all from scratch even greater work? Tailwind just makes it faster building it from scratch.

Thank you for the @apply info, although I'm hearing that it is an anti-pattern to Tailwind itself.

Collapse
lnfel profile image
Dale Ryan

Pre-built components has never been a goal of Tailwind. If you need a working layout and component prototype real quick without bothering with css, Tailwind is not the right solution.

The issue with @apply only occurs if you have opted too early on using it.

Somebody already provided citation about this but here is the gist:

Avoiding premature abstraction
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.

@apply is there to help you merge classes when the design is ready for production.

Relevant thread about the so called anti-pattern where Adam gives an insight on how to properly use @apply. The infamous article about Tailwind is just a bunch of early impressions about what tailwind does and not what Tailwind sets out to solve. In my honest opinion CSS modules are far more the worst offender in the whole history of CSS, instead of making a css file as the single source for CSS definitions, somebody decides to spread them in multiple files instead.

Thread Thread
somtookaforr profile image
Somtochukwu Okafor Author

Thank you @lnfel , I'll check out the GitHub discussion thread on apply . From what I can see, component based might be the way to go with when using Tailwind.

instead of making a css file as the single source for CSS definitions, somebody decides to spread them in multiple files instead.

I'm not really familiar with modular CSS but from what I've read up on it, isn't that more or less what Tailwind is doing?

Collapse
elnobun profile image
Ellis • Edited on

I understand you @somtochukwunigeria many of us have been (or still are) in your situation, where your personal preference is overridden by the force that puts food on the table.

At the end of the day, it all boils down to which team you are working with. I have noticed that the argument for tailwind or bootstrap is mostly (I repeat mostly, not all) by people who are either solo developers, freelancers or working in a very small highly flexible team that are not too strict on code base optimisation and structure.

No matter how much one loves tailwind, if the company you work for opt for bootstrap, you will use bootstrap. If the team opt for tailwind, no matter how much you love bootstrap, you will use tailwind.

I am yet to see someone leave a company because the company switched to a css framework that was not to their taste. (Note: there may be people who have made this move, but I have not seen anyone do so in my 6 years web developer journey).

I have rather seen senior developers adopt and adapted to technologies based on product/clientele demand at that point in time.

Just because a team get profitable experience with tailwind, does not rule out the benefits other teams have from bootstrap and vice versa.

And for the records, I use tailwind (most times), itโ€™s a utility system that allows developers to focus on System logic rather than User Interface. However I prefer writing css using โ€œSassโ€ and/or โ€œbootstrap sassโ€ - I am more efficient and faster. ๐Ÿ˜Ž

Collapse
somtookaforr profile image
Somtochukwu Okafor Author

I agree, at the end of the day it all boils down to what technology the organization uses. It's your job as a good developer to be able to adapt to the ever present changes but we are still allowed to have preferences in these technologies we often jump unto. I've always used CSS/SCSS and Bootstrap for as long I can remember so it's grown on me so trying Tailwind was a different feel for me but I'm getting the hang of it. @elnobun

Collapse
elnobun profile image
Ellis

Because of your strong background in vanilla CSS/SCSS way of styling the markup, tailwind will not be much of a hassle other than the technicalities of "class names" used to represent a css property. This will keep you going back and forth the documentation until you get a hang of it.

I can tell: If your company is building a Product, and want to focus majorly on the product functionalities rather than styling user interface, then tailwind may be a viable option indeed, as this will save cost, meet product milestones quicker and offer deliverables within reasonable time frame while the team focus mainly on backend.

I wish you the best. Please update us on your overall experience when you are completely hands on with tailwind. Cheers! ๐Ÿ‘๐Ÿฝ

Thread Thread
somtookaforr profile image
Somtochukwu Okafor Author

Lol yes I still do, the Tailwind documentation is always frequented for better understanding.

Thank you @elnobun , I will do that, for now I'll just need to keep familiarizing myself with it.

Collapse
possibly1 profile image
possibly1

Tell me how this statement is incorrect. Developers learn more about custom, federated styleguides and css using Tailwind vs using bootstrap. I get it, a strong css dev will see Tailwind generally as an unnecessary additional step when they could have just written the classes themselves, however when working in large teams on many projects it rarely matters how great one developers code is if nobody else can easily adopt it.

Collapse
lnfel profile image
Dale Ryan

I wrote a bunch of CSS since 2007 and confident to write them fast and well. Tailwind just takes the writing part so I can prototype a layout or component with less time consumed if I were to write my own css for every project I have. You should have said:

Bootstrap gives you unnecessary pre-built components that you would probably overwrite anyway for every single project you have.

Now please define unnecessary.

Collapse
glstephen profile image
Stephen Johnston

Tailwind is made for components. If you're repeating stuff a lot then you aren't using components enough most likely.

Collapse
06ergin06 profile image
ฤฐbrahim Hakkฤฑ Ergin

I think you should read the tailwind document

Collapse
somtookaforr profile image
Somtochukwu Okafor Author

I have @06ergin06 .

Collapse
yessjo5 profile image
yessjo5

tailwind is one of the great projects.

๐ŸŒš Life is too short to browse without dark mode