I’ve recently been using Tailwind CSS on a number of projects and have really enjoyed the experience so far.
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
I’ve seen several utility frameworks for CSS and the idea of them never appealed to me. I had a pretty good workflow which consisted of using SASS and the BEM methodology to keep things organised. It was by no means a perfect workflow, but it was good enough at the time.
With a utility framework, the idea of adding dozens of classes to each HTML element for basic styles seemed cumbersome and non-semantic. I think what made Tailwind CSS stand out was:
- It’s utility first, but you can still create your own re-usable components
- Ease of customisation and the full power of JavaScript
- Built by someone who I follow and know puts out a lot of good content and resources
- The ideas behind utility CSS have evolved and are more established from when I first encountered them
- I’ve been working more with React, which makes it easier to create and re-use components with utility CSS
- I had several small, low risk projects I could experiment with
So the above got me interested enough to try Tailwind CSS, and I’ve now mostly finished a large project with it, so it’s the perfect time to reflect on it. It’s actually responsible for me enjoying working on the front-end again.
I’m much more efficient
Since I’ve started using Tailwind CSS, I feel much, much more efficient at producing high quality UIs. I can scaffold out the basic layout in a few seconds with a handful of classes and create highly detailed components much more quickly as well.
I’ve always been a big fan of designing in the browser, but instead of tweaking a few styles and then copying those back into SASS, I just add a few classes and once I’m happy with it, I just copy them and apply to the element, and thanks to Chrome auto completing class names, it’s even faster.
I also find myself spending far less time worrying about responsive layouts. With a handful of responsive classes, it’s very easy to change the layout and make sure everything works.
The class names are also very intuitive. I prefer the slightly more verbose names compared to some alternative frameworks, but I very rarely find myself needing to refer to the documentation to figure out how to do something, as it’s normally what I would expect it to be.
Easy to get started with
Getting up and running with Tailwind CSS is incredibly straightforward. You can use the CDN version if you just want to experiment with it, but if you want to be able to customise the build, you’ll need it setup locally. The installation instructions are well written and show how to integrate it with a number of tools. I use it with Laravel Mix (outside of Laravel projects).
When I first started using Tailwind CSS, I removed anything I didn’t need from the default configuration to keep the file size down, but it’s actually very straightforward to integrate PurgeCSS with Tailwind, so I don’t need to worry about that.
As it’s so easy to get up and running with Tailwind CSS, I often find myself starting off with prototyping just the UI instead of starting off with the backend. Pair that with my Netlify workflow and it’s very easy to get a static HTML site up and running.
Easy to configure and extend
Not only is Tailwind CSS incredibly easy to get up and running, it’s also very easy to customise. You start with a very well documented tailwind.js file in your project which you can change and delete to your hearts content. And unlike with some CSS frameworks like Bootstrap, where changing one value has a knock-on effect for a dozen seemingly unrelated properties, there are no such side effects here.
The only exception to this is by default it will use the same color palette for things like backgrounds, text, borders etc, but this is just to make the workflow easier and you can easily have completely custom colors for each context or a subset.
The utility first approach, paired with how easy it is to customise results in sites that looks completely different, instead of everything looking like a Bootstrap site.
There are 2 main changes I make by default, which are:
- Add
xs,sm,md,lgandxlproperties for things like margin and padding, which I use in most cases, and just use the other values for specific cases - Create my own
wrapperas an alternative to the defaultcontaineras I want something which is fluid instead of only changing at set breakpoints
No problem naming components
When I used to write CSS, one of the hardest things was coming up with suitable names for components which could often be used in many different contexts.
There are only two hard things in Computer Science: cache invalidation and naming things.
— Phil Karlton
With utility based CSS, this is no longer a problem, as you just define the utility classes in the HTML. As a result, I’m not spending time or energy thinking about correctly naming items.
When I extract a component or create a new utility class, I follow the same naming convention as used by Tailwind CSS, so everything is consistent and the names come naturally.
Great community and plugins
Although the community is still very small when compared to long established CSS frameworks such as Bootstrap, there is a growing community around Tailwind CSS and plenty of resources.
When I first started considering using Tailwind CSS on some projects, I found the videos Adam done of re-building existing websites using Tailwind CSS to be very helpful. These included Netlify, Refactoring UI, Coinbase and Laravel.IO, and also help to show the progression of the framework over time.
There are also a number of [community plugins}(https://github.com/aniftyco/awesome-tailwindcss#plugins) to provide extra utility classes, some of the ones I use most commonly are Transition, Object fit, Gradients and Transforms
And things are set to get even better, as earlier this month, Adam Wathan announced that he will be working on Tailwind CSS full time. I’m looking forward to seeing how Tailwind CSS continues to evolve, and what else I discover as I continue to use it.