A single class that will contain other classes

[AregGhazaryan]

I was thinking about the problem that tailwind constantly faces, that is the cluttering of classes, and them being too long for one element. The idea i purpose is maybe in tailwind.config.js we can add a custom class, which will contain tailwindcss classes in an array. Then when we will use it on our html/jsx it would use all these classes as one without affecting developer experience. What i imagine would look like this.

module.exports = {
  // ... other Tailwind CSS configurations
  GroupedClasses: {
    primary-button: ['bg-blue-500', 'text-white', 'px-4', 'py-2',  'rounded-md'],
  },
}

and then on the front end

<button class="primary-button">Submit</button>

Which will reuse all the classes mentioned in the config.

[crswll]

You can use @apply or plain CSS with theme() to accomplish this.

[browner12]

https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

[AregGhazaryan]

didn't know that, thanks