Tailwind CSS - a tool worth checking
As a matter of fact, the world of web development is not as it was 10 years ago. As time goes on and development evolves, new approaches emerges, become popular and eventually, some of them go absolete. CSS is no exception. In this short article I want to express my feelings about CSS arcitectual approaches, frameworks and of course about using Tailwind CSS.
About preferences
Despite a huge popularity of BEM, I have never liked it. I don't like it for the wordy classes and lowering classes inheritance. I do realise that it's popular for good reasons and it might be extremely beneficial for large projects and collaborative development. Nevertheless, if I have to, I would rather go for SMACSS. For me it looks way more balanced and reasonable, like a solid alternative to BEM.
Anyway, those are well-tested approaches but there are more, and the one I would like to talk here is Atomic CSS, also known as Utility First or Functional CSS, and a particular representative of this approache - Tailwind CSS.
Tailwind allows developers quickly define a style for an elemet with a set of predefined utility classes. Classes with Tailwing might look wordy too, but it's a bit different since any class has a meaning and that meaning conveyed event if you look in a browser dev tools. I will not try to write a quick start guide here with a bunch of simple examples but rather express what do I think about it after some time using it.
Firstly, considering atomic css, or using predefined classes - I prefer not to use such tools and frameworks. Let's tale Bootstrap for example. Yes, it's quick and easy to use but it's also somewhat limited. Along with predefined classes and components developer gets constraints and I think that's not cool.
Secondly, getting constraints with Bootstrap doesn't there is none in Tailwind CSS. That also dosn't meat that Bootstrap is a worth tool, no, it's just a tool for a certain cases and a good one if you utilize it's strong sides. Nevertheless, comparing Bootstrap and Tailwind I'm sure Tailwind is much better.
Tailwind IntelliSense
What do I like about Tailwind?
- A versatile set of classes that cover pretty much any use-case
- Ability to extend predefined classes
- Ability to combine commonly used together classes
- Ability to use custom values apart from predefined, i.e. arbitrary values
- Ability to mix it with existing css/scss.
- Ability to quickly make a responsive component in 1 place
- And many more
So, usually if I'm planning to start a project with Tailwind I get it set up and running, define a few additional utilities (for flexbox for example), define my styling system (basically custom utils as well) and here we go.
Overall, I find this tool absolutely amazing to use with React. It's easy to set up and start the project, simple and easy-to-guess api (with a bit of experience remembering utilities is pretty easy), easy to use states, responsiveness and reuse styles.
Should dev's use it always? No, of course not.
It's a good tool to quickly bring up a UI, nice way to handle styling of a small or mid-size project - that's where it shines. For big projects I would not recomment it, though some dev's will argue about that :)