anon1378

I cannot believe how anyone can look at the following code below and think that it's maintainable, just for an input box with additional styles for states:

    <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" />

How is mushing every single style into a class attribute supposed to help with readability and maintainability? Even if you use `@apply` to reduce the clutter, you are basically venturing back into "vanilla" CSS territory, and which their docs expressly said to avoid (https://tailwindcss.com/docs/reusing-styles#avoiding-prematu...).

And even if I decided to march forward with tailwind CSS despite all of this, how do I format the code? Break up the classes for different states into separate lines, like so?

    <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" />

Yeah, I do not see how this is more readable than plain CSS. Is all of this worth it, just to avoid having the developer think up of class names, or defining their own theme using CSS variables?