I just finished following a quick tutorial about TailwindCSS, you can find it here. My first impressions are really good, but let’s go in details about what I liked, a few questions and some extra resources.
What I liked most: Easy to get started (with a caveat) 🔗
Getting started with TailwindCSS, once you understand the concept, is very easy. Just add a few classes to your HTML, and you get desired styling. The classes are clear in what they achieve, you get sane defaults and pairing colors out of the box. Fantastic for someone with basically no experience, as these can be overwhelming to define when getting started.
You don’t get every styling option with those classes, but you can still use CSS directly for specific elements. Do the bulk of the work done with TailwindCSS, then tweak a style or two in pure CSS.
Reducing the scope of what is available makes it much easier for a beginner to get started, and for an advanced user to go faster. It reduces the number of decisions you have to make and allows you to focus directly on the core of your work: styling. No more “how should I call this class ?”, or “Which color should I choose amongst the hex full color palette ?”.
That’s a tool for people who want to ship, not just debate if a color should be #ABABAB or
#ACACAC.
The caveat though, is that to be able to learn about this, I had to follow a tutorial that was not on the official TailwindCSS website. Don’t get me wrong, the documentation is very complete (although I missed a few elements like padding at first), but I just wanted to get started learning the syntax, to see if it was worth the time to invest in installing it.
Reusability 🔗
The first that came to mind was: How to create a style that you can reuse ? When designing a component, having the style duplicated on each element seems a bit redundant, and changing any part will quickly become a mess.
You can extract your style to a class for that. This is very easy to do in TailwindCSS, and I would not have asked the question if I read the documentation correctly from the start (oups…). This maintainability concern was explained very clearly here, and redirects to great resources proving that the approach works at any scale.
Basically, you simply need to create a new class inserting an @apply directive in it. For example:
.my-box {
@apply bg-blue-500 p-4
}
You will then have to process your file with TailwindCSS, as described here.
You can also use TailwindCSS directly from CDN, but you will not have access to those directives.
Using TailwindCSS with Rails 🔗
Since I have been trying out Rails lately, I had to find a way to integrate TailwindCSS with it. Fortunately, @soulchildpls has already done the work of figuring this integration out, and you can just follow the tutorial for it here.
The final word 🔗
Researching further to write this post allowed me to learn more about TailwindCSS (PostCSS, file processing, class extraction, maintainability). I understand it better, and want to use it even more than after a brief overview.
I’ll keep using TailwindCSS for now, because it allowed me to be much faster developing a very simple interface and reduced how much I had to think about details. I strongly suggest you to try it out ! And please let me know what you thought about it 🙏