In that case, isn't that basically style="color: var(--gray-500);" with extra steps? I love to see people experiment for the sake of experimentation, but I'd be hesitant to adopt Tailwind as an engineer unless I understood why they weren't just CSS variables.
They are variables in that they're specified in your Tailwind configuration file, which is what generates the utility classes that are generated. If you really wanted to you, you can extract it out as a variable if you wanted to use that color elsewhere, such as part of a box-shadow or background color or something like that.
CSS variables are still relatively new though, unsupported until about March 2018 in all browsers, yet the first commit over TailwindCSS is from Jul 20, 2017, nearly a year before browsers even supported the feature. Even today it seems like 11% of users doesn't have support for variables. Could make sense to add support for variables now, but for the sake of backward compatibility, it does make sense to keep it with classnames too.
I love though that as an engineer you would be hesitant to use Tailwind, but you are not aware of how new variables are.
I think Tailwind seems to make sense for any prototypes works and probably even an MVP for a company that still doesn't have a shared CSS that represent the style of the company.
For plain old `text-gray-500`, they're pretty similar. One advantage that Tailwind has is screen sizes - you might write `flex items-center justify-between mobile:flex-col` for a row that turns into a column on smaller screens where the UI becomes awkward, for example.
