I have a small issue with the wrapping of lines

[rabol]

Hi

I have a small issue with the formatting, but I cannot figure out if it is a problem of the extension or somewhere else:

here is the original blade

@section('title', config('app.name') . ' | ' . __('Account is blocked'))
<x-app-layout>
    <section class="py-12">
        <div class="max-w-7xl mx-auto px-8 py-8 bg-white text-gray-800 text-center lg:text-left">
            <div class="container mx-auto">
                <div class="grid lg:grid-cols-2 gap-12">
                    <div class="mt-12 lg:mt-0">
                        <h1 class="text-3xl md:text-6xl xl:text-5xl font-bold tracking-tight mb-12">{{ __('Oops...') }}</h1>
                        <p>{{ __('Your account has been blocked.') }}</p>
                        <p class="mt-4">
                            <x-primary-link-button href="{{ route('pages.contact') }}" label="{{ __('Contact us to unblock') }}" />
                        </p>
                    </div>
                    <div class="mb-12 lg:mb-0">
                        <img src="{{ asset('img/hero_account_blocked_640.jpg') }}" class="rounded-lg shadow-lg w-[640px] h-[320px]" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </section>
</x-app-layout>

here is my .bladeformatterrc.json

{
    "indentSize": 4,
    "wrapAttributes": "auto",
    "wrapLineLength": 220,
    "endWithNewLine": true,
    "noMultipleEmptyLines": false,
    "useTabs": false,
    "sortTailwindcssClasses": true,
    "sortHtmlAttributes": "none",
    "noPhpSyntaxCheck": false,
    "noSingleQuote": false
}

and when I save the file it get's formatted like this:

@section('title', config('app.name') . ' | ' . __('Account is blocked'))
<x-app-layout>
    <section class="py-12">
        <div class="max-w-7xl mx-auto px-8 py-8 bg-white text-gray-800 text-center lg:text-left">
            <div class="container mx-auto">
                <div class="grid lg:grid-cols-2 gap-12">
                    <div class="mt-12 lg:mt-0">
                        <h1 class="text-3xl md:text-6xl xl:text-5xl font-bold tracking-tight mb-12">{{ __('Oops...') }}
                        </h1>
                        <p>{{ __('Your account has been blocked.') }}</p>
                        <p class="mt-4">
                            <x-primary-link-button href="{{ route('pages.contact') }}"
                                label="{{ __('Contact us to unblock') }}" />
                        </p>
                    </div>
                    <div class="mb-12 lg:mb-0">
                        <img src="{{ asset('img/hero_account_blocked_640.jpg') }}"
                            class="rounded-lg shadow-lg w-[640px] h-[320px]" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </section>
</x-app-layout>

as it can be seen, the h1. x-primary-link-button and the img tag is wrapped, tailwind classes is not sorted

And I cannot really figure out why