Feature Idea: class:<prefix> Attributes for Cleaner Templates & Component Styling

[Hardel-DW]

Hi Tailwind Team,
I have an idea for improving tailwind readability and DX. New attribute syntax like class:<prefix> to improve template readability in Tailwind.
The idea is to factor out common state/modifier prefixes (hover:, focus:, dark:, md:, custom ones, etc.) into their own attributes.

Example:

<!-- Input -->
<button
  class="font-bold"
  class:hover="bg-blue-700 text-white"
  class:focus="ring-2"
  class:dark="bg-gray-800"
>
  Click Me
</button>

<!-- Build-time Transformation (concept) -->
<button
  class="font-bold hover:bg-blue-700 hover:text-white focus:ring-2 dark:bg-gray-800"
>
  Click Me
</button>

Benefits:

1. Readability: Reduces repetition in long class strings, making complex states/responsive styles easier to manage and read, especially across multiple lines.
2. Component Authoring: A class:default attribute could define base styles, potentially simplifying how className props are merged and reducing the need for runtime utilities like cn/tailwind-merge. based on experimental “default” state idea that was designed for V4.

Further Composition Idea:
The "default" state could behave like "has-*" states, meaning it could be combined with other states.
We could potentially extend this by allowing combinations like class:default-<prefix>. This would group the base styles and their variants together, enhancing clarity:

const Button = ({ className, ...props }) => (
  <button
    class={className} // User overrides and custom styles
    class:default="px-4 py-2 bg-blue-500" // Base styles
    class:default-hover="bg-blue-600"     // Base hover styles
    class:default-disabled="opacity-50" // Base disabled styles
    class:dark="bg-gray-800"             // Dark mode overrides
  />
);

This pattern will be transformed to a correct class name and after Tailwind can generate the css files.

<button class="px-4 py-2 bg-blue-500 default-hover:bg-blue-600 default-disabled:opacity-50 dark:bg-gray-800">
  Click Me
</button>

This introduces a dedicated syntax rather than extending variant composition directly in the class string. It would require changes to how Tailwind scans templates but could offer significant DX improvements by grouping styles logically.

What are your thoughts on this direction?
Thanks!