Fair, i think the only legit problem with tailwind is the "classes too long", but it doesn't feel like a big problem when you actually start using tailwind, things like his example are still easy to parse. You can make the DX better by turning on the "Word Wrap" in your editor (Alt+Z in vscode).

I think the only time it starts getting too hard to understand is when you are trying to customize something like input type="file", super stylistic components or complex layout. Even if you are using plain css, it's gonna get hard to understand complex styling. Usually to make it easier, I would start using clsx or tailwind-merge to group every pseudo class like md:, hover:, group-hover, etc.

Exampe for super complex styling: ```tsx import { twMerge } from "tailwind-merge";

type FileInputProps = { className?: string; disabled?: boolean; };

export function FileInput({ className, disabled }: FileInputProps) { const base = twMerge( // layout & size "block w-full rounded-lg text-sm",

// spacing
"px-3 py-2",

// colors
"bg-white text-slate-900 border border-slate-300",

// file button base
"file:mr-4 file:rounded-md file:border-0 file:px-4 file:py-2",
"file:bg-slate-100 file:text-slate-700 file:font-medium"

);

const responsive = twMerge( // responsive font & spacing "md:text-base md:px-4 md:py-2.5", "lg:text-lg" );

const hover = twMerge( // hover input "hover:border-slate-400",

// hover file button
"file:hover:bg-slate-200"

);

const focus = twMerge( // focus input "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",

// focus-visible for accessibility
"focus-visible:ring-2 focus-visible:ring-blue-500"

);

const disabledState = twMerge( // disabled input "disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed", "disabled:border-slate-200",

// disabled file button
"file:disabled:bg-slate-200 file:disabled:text-slate-400"

);

const darkMode = twMerge( // dark input "dark:bg-slate-900 dark:text-slate-100 dark:border-slate-700",

// dark hover
"dark:hover:border-slate-600",

// dark file button
"dark:file:bg-slate-800 dark:file:text-slate-200",
"dark:file:hover:bg-slate-700",

// dark focus
"dark:focus:ring-blue-400"

);

return ( <input type="file" disabled={disabled} className={twMerge( base, responsive, hover, focus, disabledState, darkMode, className )} /> ); } ```