Tailwind CSS v4 is so easy to set up
I've recently been working with a client to kickstart the front-end development on their Drupal upgrade project from Drupal 7 to 10.
They've been working hard on the back-end code and migrations, but hadn't done anything on the front-end yet.
I was asked to come in and set up a new theme for them and provide some training to get them going.
A requirement they mentioned was to make it themable, so they could later change colours of buttons and other elements based on the page type being viewed or if they added sub-sites in the future.
This is something I've done a lot with Tailwind CSS and, as it's the CSS framework I'm most familiar with, we decided to go with Tailwind CSS - and specifically the alpha version of Tailwind CSS v4.
Although it's still in an alpha phase, I've been experimenting with Tailwind v4 in personal projects and on some live streams and it seemed stable enough to use in production.
It also makes theming a lot easier as it uses CSS variables everywhere, which made it a no-brainer for this project.
Aside from the new features, the setup for Tailwind CSS is so easy and straight forward.
There's no JavaScript configuration file and everything is done in a CSS file, making it simpler to set up and more consistent if you need to write CSS anyway to add custom fonts or work with CSS variables - these are no longer in separate places and are now combined in one stylesheet.
All the colour configuration and adding plugins is done in the CSS file and Tailwind will find the content files to scan automatically so you no longer need to declare where your template files are - it just knows.
It's worked well for this project, and I'll look forward to using Tailwind v4 more on YouTube and for personal and client projects.
- Oliver
