Once you start noticing patterns of repeated classes in your component/application, you can use the apply key to map a more appropriate name to an array of utility classes.

js
import { ConfigProvider, jsx } from "benefit-react"
return (
  <ConfigProvider
    config={config => {
      return {
        ...config,
        apply: {
          "hero-banner": [
            "p-8",
            "text-2xl",
            "text-center",
            "uppercase",
            "bg-blue-500",
            "text-white",
            "tracking-tight",
          ],
        },
      }
    }}
  >
    <section className="hero-banner">Business at the speed of light</section>
  </ConfigProvider>
)