New config option: Generate base class when variant is used (for nice fallback with react-aria or similar)

[jeyj0]

(This request is fully backwards-compatible)

Edit: this can be made to work using the current configuration, but it's not very nice. See Option C.
Edit 2: I realized I overcomplicated my implementation, and simplified it a ton. I'd still love to have Option B instead (so I don't have to figure out the right base class regex), but this is certainly a fine way to do it.

Problem

I am using react-aria to handle hover, focus, etc states. This allows me to apply tailwind classes conditionally, which works really well. However, if the javascript doesn't load (oh no!), there is no fallback; instead, any hover/... states simply don't work at all.

To work around this, I currently write all the hover/focus/... styles twice: once with the prefix, once without, rendering the prefixed versions on the server, then removing them during hydration. This requires a lot of annoying typing.

Instead, what I'd like to be able to do is make my (for example) button component smart enough to accept a simple className prop. It would filter all the relevant variant classes and remove the variants dynamically for the javascript implementation, so it would render <button className="bg-red-500 hover:bg-green-500"> during SSR, then replace it with <button className="bg-red-500"> after hydration and <button className="bg-green-500"> during react-aria-detected hover:

function Button({ className }) {
  const isSSR = useIsSSR()
  const { hoverProps, isHovered } = useHover(..)

  const hoverClasses = className.split(' ').filter(c => c.startsWith('hover:')).map(c => c.substr(6)).join(' ')
  const baseClasses = className.split(' ').filter(c => !c.startsWith('hover:')).join(' ')

  return (
    <button
      {...hoverProps}
      className={isSSR ? className : twMerge(baseClasses, isHovered && hoverClasses)}
    >
      ...
    </button>
  )
}

// <Button className="bg-red-500 hover:bg-green-500" />

Proposed solution

I would like to be able to configure tailwind to always generate the base class if its hover/focus/... variant is generated.

That means the input <div class="bg-red-500 hover:bg-green-500" /> would be handled as if all of the following three classes were included: bg-red-500, bg-green-500, and hover:bg-green-500.

Option A: Configurable list of variants

In the tailwind.config.js, a new option like variantsToGenerateBaseClassFor (name is awful, I know, please suggest better ideas) is added, which accepts a list of variants like ['hover', 'focus', 'focus-within']. For any class found in the source that uses these variants, the behavior is changed as above.

Option B: Configurable function to modify list of generated classes

In tailwind.config.js, a new option is added: modifyClassList (again, probably not the best possible name). This option would accept a function that takes an array of strings (the classes that would be generated) and returns an array of strings (the classes that should be generated). This would allow the following implementation:

// When input = ['bg-red-500', 'hover:bg-green-500']
// Then output = ['bg-red-500', 'hover:bg-green-500', 'bg-green-500']
function modifyClassList(input) {
  const out = []
  for (c of input) {
    out.push(c)
    // only handling hover for simplicity
    if (c.startsWith('hover:')) {
      out.push(c.substr(6))
    }
  }
  return out
}

Option C: With current configuration options

This can currently be implemented by using the content.transform configuration option, but it's everything but easy. See the below attempt at an implementation. I'm least sure about the baseClass regex—I wasn't able to find a better reference, so I wrote this by hand myself.

const variants = [
  'hover',
  'active',
  'focus',
  'focus-within',
]

const baseClassRegex = "[\\w\\-_:\\[\\]#]+"

const regex = new RegExp(
  `(?<variant>(${
    variants.map(variant=>variant+":").join('|')
  })+)(?<base>${baseClassRegex})`,
  "g"
)

module.exports = {
  content: {
    files: ['./index.html'],
    transform: {
      html: (content) => {
        const newContent = content.replace(regex, (...match) => {
          const groups = match[match.length-1]
          const baseClass = groups.base
          const variants = groups.variant
          return `${baseClass} ${variants}${baseClass}`
        })
        console.log(newContent)
        return newContent
      }
    }
  },
  // ...
}