I've been working for about 8-9 years now. 6 years of freelancing and 2+ years professionally.
Writing CSS used to be second nature.
Then Tailwind came along and made me question everything.
Before Tailwind, my typical flow was first write the HTML structure, then write the classes, then the CSS of those classes.
I've come across Bootstrap, and it saved so many hours of writing stuff myself. I just add btn in the class and all is good! I just need to modify the styles of some stuff according to theme by writing a new CSS file and ensure that it’s placed under the Bootstrap stylesheet link tag.
Then comes the era of Material Design. Fancy looking buttons, ripples everywhere even when it's not needed. Same thing as bootstrap, I just add classes and everything just works!
Then the era of Material-UI (or known today as MUI) came! (Or JS frameworks that require a build step in general) Still material design but for the era of React. Just importing <Button> no need for classes or styles unless major modification.
Many more libraries came out, I even tried to make one just because I love the idea of plug n' play stuff.
Everything looks good!
And everything looks the same... I've grown tired of it.
Then one day, I saw a new trend from YouTube... Tailwind.
First time of using it, I tried to find components like Card, Button, Dropdown and I saw nothing. It was just almost the same as bootstrap I thought and my first impression was, "what was the point?".
But when I got used to it, I can never go back.
What's up with Tailwind?
There are two types of web dev:
Those who like Tailwind
and those who don't
I'm the former.
What people don't like about Tailwind?
Many people don't like Tailwind because of how to write it.
About
Welcome to my blog! A random corner of the internet where I drop thoughts, ideas, cool finds, and whatever else pops into my head. No theme, just vibes.
I get it. It's ugly, but let me ask. Is it really unreadable?
From the class py-6 px-4 sm:p-6 md:py-10 md:px-8 in the first line, we get:
(Assuming Tailwind's default scale, where 1 unit = 0.25rem = 4px)
Top & bottom padding: 6 * 4px = 24px
Left & right padding: 4 * 4px = 16px
At sm, all sides = 6 * 4px = 24px
At md, top/bottom = 10 * 4px = 40px
At md, left/right = 8 * 4px = 32px
hmm.... not readable huh...
I don't know this project but I can imagine how this thing looks.
Now let's try to put that into a CSS file and call the class container.
We'll have <main class="container">. Now I can't imagine what this thing looks like.
Can you see what I'm getting here? From the markup alone, I can already imagine what it looks like. I don't need to project wide search for the class and see the properties in there.
Pretty efficient and time saver thing if I say so myself. Everything is in the markup!
The era modular components
The modern web dev ecosystem consists of 3 things...
JavaScript
JS
and node_modules
Ok. Joking aside, the modern front-end web dev now uses modular, reusable components. Meaning you create one thing and use it everywhere.
If you're not used to Tailwind, you probably can't imagine this. You can still imagine the button but there are now some more complicated classes that's a bit harder to imagine and takes more of your brain to visualize it. Like the class to target specifically the svg inside it.
BUT, this thing you see. You only write it once!
I know for something like a showcase type of website or portfolio type, you probably have different kinds of buttons there. Then, sure Tailwind is ugly for it. I probably won't use Tailwind for it anyways (I've used Tailwind for my portfolio though).
But for web apps, consistency is always a thing. Same looking buttons, same size, same spacing and many more. That's why reusable components is a thing!
So that button, you put it on a file, export it as just <Button>. Now you just import that everywhere!
You almost don't see classes that long when you're actually in the middle of development! You frequently add classes for layouts.
Themes are styled at the start of the project - the point where you're establishing the theme of the app.
After that, all that's left is where you place those base components and business logic!
Ok but why did it actually broke me?
I was tasked to maintain an old project. The stack?
This thing, uses Angular 11 and SCSS. I applied as a React dev btw.
I personally don't mind. If it's JS framework, the framework's ecosystem is the only thing I need to learn. Pretty easy.
I saw SCSS for the first time in forever. Bruh... It's also the first time in forever that I needed to use splits in my editor (I use Neovim BTW) which I rarely do!
It's been a long time! I've never been annoyed like this (totally exaggerated). I need to edit a class, find that in the SCSS file, check a bunch nested classes, if it's the correct one, 6 line media queries AAAAGHHH.
Believe me, I stared at the 1300 line file of the SCSS for a minute.
I'm too used to Tailwind that a SCSS file scares me!
Scared of SASS meme
Of course I've exaggerated this a bit. It's just kind of frustrating and I'm venting out!
All styling solutions out there is totally valid. The meta right now in terms of styling is Tailwind just because it's really fast to ship with it.
The fact that you don't have to name things is really efficient!
One of the things that holds a developer back is naming things. If you don’t struggle with naming things, then you're not experienced enough I guess.
It's not perfect though
Tailwind by no means is perfect. You'll often get repetitive modifiers that you wish you can just group them together and add just the relevant classes.
e.g.:
As you can see, we're repeating md in here and I personally think this is what makes it incomprehensible.
It would've been better if we can just have a modifier grouping method thing so we can just add the base class withing the modifier group. Maybe something similar to...
which I personally think that grouping with parenthesis makes it more readable.
And of course there are many more flaws and I'm not stating that this will fix it. It's not perfect and with people having different project requirements, making it perfect is impossible.
We just have to do with what we currently have in hand.
Conclusion
Tailwind made my workflow faster and more efficient.
I don't need to change files when looking at style properties. I can somewhat visualize the silhouette of an element just by seeing the Tailwind classes and that itself is a huge efficiency boost!
Is it repetitive? Yeah it is, but come on... in bootstrap you have container every where and you think that's not repetitive?
Would you rather use Vanilla CSS or Tailwind? If we're talking about using modularized component-based dev tooling, then I'll use Tailwind.
Should I use Tailwind? It depends.
Like I said, your project might have different needs. That’s okay! Tailwind isn’t for everything. There are probably libraries that would suit you're requirements better than Tailwind and make you more efficient.
I'd say in your free time, play with it! Try creating a simple dashboard from scratch with it. No templates. Just your code alone.
You'll probably improve how you would write components and learn a better way to separate files. Really, some of them should be separated in the first place, Tailwind or not.
