Minimize class names

[mitar]

I am looking at production output of my Vue-based app and I see that many pieces of content in minimized JavaScript components are class strings which automatic tools for minimization take as opaque strings and do not change. With TailwindCSS pattern of not creating new CSS classes but instead having Vue components output same sets of classes again and again, for example, for our button, we have: relative select-none rounded font-medium uppercase leading-tight shadow outline-none focus:ring-2 focus:ring-offset-1 text-center. So some of utility TailwindCSS classes are already short, but many are not.

But in production, names of those classes should not matter really. TailwindCSS compilation should be able to find/replace those with shorter non-human-readable versions. Both in JS code and CSS files.

I know that GZ compression optimizes that, but maybe we can improve things here even before that.