Long-term maintainability with utility classes and Tailwind CSS
One of the common initial concerns of utility classes and Tailwind CSS is its maintainability.
How you manage all the classes within the HTML and how easy is it to make changes?
Today, I saw this tweet:
You can say whatever you want about @tailwindcss, but I just opened a legacy project with tailwind 0.7 that I didn't touch for almost three years... and I was able to update the whole branding in 30 minutes.
One of my earliest Tailwind projects was the PHP South West website. We worked on this in November 2017 and it still uses Tailwind CSS 0.5.
These are the classes used on the main menu:
bg-grey-lightest hidden absolute z-20 w-full border border-grey-lighter sm:flex sm:relative sm:w-auto sm:border-none
Even though Tailwind CSS is now on version 3.2.4, I can still read this and know exactly what the classes do, and I'm confident that I could easily make changes to this or any other element on the website.
That probably isn't something that I could say for other projects that use different approaches to styling, and definitely an advantage of styling with small, reusable utility classes.
- Oliver
P.S. If you're creating a new Drupal module, try my free Drupal module template.
