radixPlugin.js

// add to your tailwind.config.js

const plugin = require("tailwindcss/plugin")

const radixPlugin = plugin(({ addVariant }) => {
  const dataStates = [
    "open",
    "closed",
    "active",
    "inactive",
    "on",
    "off",
    "checked",
    "unchecked",
    "indeterminate",
    "loading",
    "complete",
    "hidden",
    "delayed-open",
  ]

  dataStates.forEach((state) => {
    // e.g. state-open:text-slate-500
    addVariant(`state-${state}`, `&[data-state="${state}"]`)

    // e.g. group-state-open:text-slate-500
    addVariant(
      `group-state-${state}`,
      `:merge(.group)[data-state="${state}"] &`
    )
  })
})

module.exports = {
  ...yourConfig,
  plugins: [
    ...yourPlugins,
    radixPlugin
  ]
}