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.π₯³π₯³
Latest comments (67)
tailwind is one of the great projects.
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.
As if other ways of writing CSS is not jumbled. Consider BEM:
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.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
@applyinfo, although I'm hearing that it is an anti-pattern to Tailwind itself.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
@applyonly occurs if you have opted too early on using it.Somebody already provided citation about this but here is the gist:
@applyis there to help you merge classes when the design is ready for production.Relevant thread about the so called anti-pattern where
Adamgives 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 opinionCSS modulesare 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.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.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?
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. π
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
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! ππ½
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.
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...
Thank you @lifeiscontent , so basically CSS in JS components ..like Styled Components? I'll check out the example.
Yes, it's.
From Tailwind documentation on Avoiding premature abstraction:
And if you allow me to put my personal opinion on top of that, everyone that feels
@applyis unavoidable with Tailwind are just either:I do component-based development in vue and split stuff by functionality and reusability. I use \@apply in each component's tag.</p>
can you please some good article on the atomic design thing?
Tailwind is made for components. If you're repeating stuff a lot then you aren't using components enough most likely.
this is helpful, thank you for sharing
It's not, taliwind already includes helpful utility classes. SASS and BEM are not utility frameworks.
Nope, it isn't an antipattern. If a component has a ton of classes then it's a you problem, not a tailwind problem.
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.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.
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:
Now please define unnecessary.
That's why you need to create a component or use PostCSS with TailwindCSS to create utility classes π
I think you should read the tailwind document
I have @06ergin06 .
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 π―
Thanks @yuridevat