In late 2019 we started using Tailwind CSS on a few of our projects and have so far really enjoyed the experience.
Historically, we utilised frameworks like Bootstrap due to its popularity and ease of use and in the latest version (Bootstrap 4), a lot more utility classes were added - which was a great addition but we still found it was lacking. This essentially meant writing more CSS, we often found ourselves repeating code and coming up with suitable names for components.
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
What does utility-first even mean?
A utility-first library basically means that unlike Bootstrap, Tailwind doesn’t give us automatically prestyled components. Rather, it gives us utility classes that help us style our component in certain ways and allows us to build our own classes using these utility classes. Let’s explain this further using two simple examples.
Below is a default Bootstrap card component - we've overwritten some of the default styling to make it look different (look in the CSS tab). If you click the link above you'll see the prestyled card from Bootstrap.
If you click into the CSS tab, you'll see we've had to write some styles to make it look a little different to the default styling.
See the Pen Bootstrap card component by Nathan Cope (@nathancope) on CodePen.
Here's the same (pretty much) in Tailwind. Now you may look and not see any real difference, but if you check out the CSS tab you'll see nothing!
We've created this card component just by writing code in the HTML section by using utility classes only. And remember, Tailwind doesn't offer us any prestyled components so it's completely unopinionated on how things should look.
See the Pen Tailwind CSS card component by Nathan Cope (@nathancope) on CodePen.
If you look carefully at the Tailwind example, you should be able to work out a few of the utility classes used to make things look a certain way. For example, adding bg-green-500 to the a tag changed the background colour to green -- this is the main difference as we don't have to write specific styles in a separate stylesheet.
Since we started using Tailwind, we're definitely much more efficient when it comes to producing high quality layouts and components.
Adding dozens of classes to each HTML element can seem cumbersome and non-semantic at first, but once you start working with it you'll never look back!
The combination of Craft CMS and Tailwind has helped us streamline our workflow whilst producing a higher quality product for the customer.