reduce repetitive status writing,support: <class="md:w-32 md:h-full"/> to <class:md="w-32 h-full"/>

[mzzsfy]

like this https://www.tailwindcss.cn/docs/hover-focus-and-other-states#form-states

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Username</span>
    <!-- Using form state modifiers, the classes can be identical for every input -->
    <input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
      disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
      invalid:border-pink-500 invalid:text-pink-600
      focus:invalid:border-pink-500 focus:invalid:ring-pink-500
    "/>
  </label>
  <!-- ... -->
</form>

to

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Username</span>
    <!-- Using form state modifiers, the classes can be identical for every input -->
    <input type="text" value="tbone" disabled 
      class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400"
      class:focus="outline-none border-sky-500 ring-1 ring-sky-500"
      class:disabled="bg-slate-50 text-slate-500 border-slate-200 shadow-none"
      class:invalid="border-pink-500 text-pink-600"
      class:focus:invalid="border-pink-500 ring-pink-500"
    />
  </label>
  <!-- ... -->
</form>

this greatly improves the reading experience
maybe a plug-in can be provided to mix in at compile time

[silvaptk]

This came to my mind right now and I was about to open a similar issue. I just think that vertical code is easier to read and to maintain

[mzzsfy]

Did this proposal go unnoticed? Maybe I need to develop a plug-in myself to complete this function.