To what extent is a good practice break wide HTML class lines?

Question

I'm not sure if there's a right question for this, but I'd like to know you think about. To what extent is it a good practice to break wide HTML class lines? I'm using tailwind-ements components of Tailwind CSS, and for some simple code examples like a checkbox, it utilizes wide lines. However, I've started to break the lines for better readability, and the problem is that this causes a giant block of code for a simple checkbox. What do you think about that? What do you usually do in these cases?

A example of what was said:

<input
    class="relative float-left -ms-[1.5rem] me-[6px] mt-[0.15rem] h-[1.125rem] w-[1.125rem]
    appearance-none rounded-[0.25rem] border-[0.125rem] border-solid border-secondary-500 outline-none
    before:pointer-events-none before:absolute before:h-[0.875rem] before:w-[0.875rem] before:scale-0
    before:rounded-full before:bg-transparent before:opacity-0 before:shadow-checkbox before:shadow-transparent
    before:content-[''] checked:border-primary checked:bg-primary checked:before:opacity-[0.16]
    checked:after:absolute checked:after:-mt-px checked:after:ms-[0.25rem]
    checked:after:block checked:after:h-[0.8125rem] checked:after:w-[0.375rem] checked:after:rotate-45
    checked:after:border-[0.125rem] checked:after:border-l-0 checked:after:border-t-0
    checked:after:border-solid checked:after:border-white checked:after:bg-transparent
    checked:after:content-[''] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-black/60
    focus:shadow-none focus:transition-[border-color_0.2s] focus:before:scale-100
    focus:before:opacity-[0.12] focus:before:shadow-black/60
    focus:before:transition-[box-shadow_0.2s,transform_0.2s] focus:after:absolute focus:after:z-[1]
    focus:after:block focus:after:h-[0.875rem] focus:after:w-[0.875rem] focus:after:rounded-[0.125rem]
    focus:after:content-[''] checked:focus:before:scale-100 checked:focus:before:shadow-checkbox
    checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:after:-mt-px
    checked:focus:after:ms-[0.25rem] checked:focus:after:h-[0.8125rem] checked:focus:after:w-[0.375rem]
    checked:focus:after:rotate-45 checked:focus:after:rounded-none checked:focus:after:border-[0.125rem]
    checked:focus:after:border-l-0 checked:focus:after:border-t-0 checked:focus:after:border-solid
    checked:focus:after:border-white checked:focus:after:bg-transparent rtl:float-right
    dark:border-neutral-400 dark:checked:border-primary dark:checked:bg-primary flex items-center justify-center text-gray-500 dark:text-white"