Inline Custom Class Generation

[alexander-schranz]

I'm using tailwind a lot in PHP Template Engines like Twig. And sometimes I would really like to avoid so many classes on my atoms components as they make my HTML really big when appearing a lot of times.

Example I have a button component which has a lot of classes on it.

{% set skinClasses = {
    primary: 'border-transparent text-white bg-primary-500 hover:bg-primary-600 shadow-sm focus:ring-offset-2 focus:ring-primary-300 focus:outline-none focus:ring-2',
    secondary: 'border-transparent text-white bg-primary-500 hover:bg-primary-600 shadow-sm focus:ring-offset-2 focus:ring-primary-300 focus:outline-none focus:ring-2',
    warning: 'mborder-transparent text-white bg-primary-500 hover:bg-primary-600 shadow-sm focus:ring-offset-2 focus:ring-primary-300 focus:outline-none focus:ring-2',
} %}

<button class="{{ skinClasses[skin] }}">
    Button
</button>

Instead I would really like without have to switch to a CSS file generate a custom class example by wrapping the class in a class() method e.g.

instead of:

'border-transparent text-white bg-primary-500 hover:bg-primary-600 shadow-sm focus:ring-offset-2 focus:ring-primary-300 focus:outline-none focus:ring-2' 

it would maybe be:

class('button--primary', 'border-transparent text-white bg-primary-500 hover:bg-primary-600 shadow-sm focus:ring-offset-2 focus:ring-primary-300 focus:outline-none focus:ring-2')

I'm not sure what yet the right cross syntax could be, so it works in JS based Applications, PHP Template Engines and so on but it will basically generate something like this:

.button--primary {
    @apply border-transparent text-white bg-primary-500 hover:bg-primary-600 shadow-sm focus:ring-offset-2 focus:ring-primary-300 focus:outline-none focus:ring-2;
}

And I could then use <button class="button--primary">. What sure need to keep in mind that button--primary could only exist in a single location and not multiple times in the same build. Another possibility is that maybe button--primary is optional and instead a hash algorithm is used over the classes, which could implemented via a Template Engine Extension / Function to get the correct hash based class.