(Photo by Cameron Venti on Unsplash)
About six months ago I first heard of tailwindcss. I looked at their website, but I was opposed when I saw all those classnames in the code. I didn't touch it back then.
A few months passed and I started seeing more and more tailwindcss mentions im my feeds. At some point I was intrigued enough to finally try it out.
The Struggle
I never used a CSS utility library before. My main workflow was scoped CSS using styled-components.
My first steps using tailwind were a struggle. I had to constantly lookup classnames in the documentation. Always asking myself whether this is really that much better than just writing the CSS myself.
The documentation is quite good though. The struggle of always looking up the classnames was eased that way. If the documentation was just a bit worse... I think I'd have switched back to styled-components.
The Realisation
Then, I started looking up classnames less and less. Especially after I found that there's a neat VSCode extension: Tailwind IntelliSense. I realized that I actually learned the basics of tailwind quite fast. It was just that comfortable feeling of using what you already know, which tried to nudge me back to writing my own CSS.
I soon split bigger components into smaller ones, like I usually would in my React applications. That's when I realized that tailwind is often less code than writing your own CSS. It's also scoped by nature... it's just classes.
Finally, I wanted to use my own color scheme and font. This is easily possible using a config file. That's when I realized that I was already creating beautiful UIs, without customizing anything. No need to think about defining good scales of font sizes, margins, break points etc. Very good defaults are already chosen for you. Just try multiple variations & pick the one that looks best.
The (Hidden) Benefits
No need to worry about naming conventions. Just hack pre-defined utility classnames into your keyboard to create beautiful UIs with ease. Everybody who is familiar with tailwind can work with it without any ramp-up time.
You only bundle what you use. As long as you don't deviate from tailwind's recommendation, any unused classes won't make it into the bundle.
Write less. Almost always, the utility classnames are shorter than the style they implement. Just use the classes grid grid-cols-3 gap-4 in you HTML. Instead of defining a class that implements its styles: .my-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }, and then using that class my-grid in your HTML.
Know what's what. Previously, when I was writing my own CSS, I had to look at the implementation of a CSS class to know what it's doing. Now, you see the tailwind utility class and immediately know what it is there for.
Build responsive fast. Just look at the animation on tailwind's front page. Seriously, go there and watch it for 30 seconds. Building responsiveness into your UIs is super fast with tailwind.
Is It For You?
If you're anything like me, you know your CSS but are no CSS artist, then it is definitely for you.
Try it out! If you don't know on what, check out Frontendmentor's challenges. Then please let me know your thoughts.
Last but not least, it's not the only thing you'll ever use. You'll still write your own styles sometimes, especially if you need to pixel-perfectly implement a design. Using a mix of tailwindcss and styled-components/sass/less/css/whatever is actually fine! In fact, that's how you'd introduce it into an existing project: Alongside the tools you already use.
What do I think now, after my initial hesitation? Well I think it really is like tailwind... it pushes you forward, whether you realize it or not.
Top comments (8)
I've build my last few frontend projects using Tailwind and it's been fantastic. By far the most coherent and useful CSS framework I've ever used.
I've never been a fan of block-element-modifier classes, and I end up wrestling with UI frameworks like Bootstrap and Bulma. Tailwind is especially useful for me since I do nearly all my own web design and component design.
I cannot get enough of Tailwind.
So did you decide to use it in next projects as main styling approach?
Currently in the same phase as you were before - using css modules and styled components. Also looking to try Tailwind.css out, experiment a bit and then make a decision to stick with it or not..
Yes I definitely plan to use it whenever possible from now on.
Nice, I'm curious to try out tailwind as using normal css hasn't been fast for me. Do you have any recommendations for online editors to try out tailwind.
Great! Definitely give it a try. I personally use VSCode with the intellisense extension mentioned in the post. The creator of tailwind also recorded a great tutorial series: tailwindcss.com/course/setting-up-...
But what about comparing to Bootstrap? I think this is the question many are wondering.
I think the main difference to bootstrap is that you get a list of utility classes with tailwind to build your custom UIs, while bootstrap offers you a list of component classes to instantly get something like a styled card or alert.