29 lines
1.5 KiB
Markdown
29 lines
1.5 KiB
Markdown
---
|
|
title: >
|
|
Long-term maintainability with utility classes and Tailwind CSS
|
|
pubDate: 2023-01-19
|
|
permalink: >-
|
|
archive/2023/01/19/long-term-maintainability-with-utility-classes-and-tailwind-css
|
|
tags:
|
|
- css
|
|
- 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](https://twitter.com/mauro_codes/status/1615726036737576960):
|
|
|
|
> 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](https://phpsw.uk). We [worked on this in November 2017](https://twitter.com/opdavies/status/934488762276564993) 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.
|