Idea for "theme-grouping" utility classes

[MichaelAllenWarner]

With Tailwind's matchUtilities API, it's possible to use arbitrary-value syntax to apply utility classes to multiple themes in a single declaration, like:

<div class="themes-[theme-1,theme-2|bg-black•underline]">...</div>

where I've chosen the | character to separate the theme-names from the utility classes, a comma to separate the theme-names from each other, and the bullet to separate the utility-classes from each other. Here is the matchUtilities plugin I've used to achieve this:

matchUtilities({
  themes: value => {
    // pipe separates theme-names from utility-classes
    const [rawThemeNames, rawUtilities] = value.split('|');

    // commas separate theme-names, bullets separate utility-classes
    const themeNames = rawThemeNames.split(',');
    const utilities = rawUtilities.split('•');

    const themedUtilities = themeNames.flatMap(themeName => (
      utilities.map(utility => `theme-${themeName}:${utility}`)
    ));

    return {
      '&': {
        [`@apply ${themedUtilities.join(' ')}`]: '',
      },
    };
  },
});

Here is a working demo (this demo also includes the nesting-mechanism I mentioned in #6): https://play.tailwindcss.com/gpeh0ciLbe

Worth noting that because of the @apply, Tailwind will give you an error message if you try to use an invalid utility-class.

[Ryan Clements]

Great idea! I'm going to let this sit open for a bit so adoption can mature better.

The idea here is that I want to see how people use this plugin before we move forward.

[github-actions]

This issue has been automatically marked stale because it it received no activity for 60 days. If you wish to keep this open, please leave a comment. Thanks.

[github-actions]

This issue has been automatically closed because it received no activity for 60 days. If you think this was closed by accident, please leave a comment. Thanks.