Introducing new divs solely for the purpose of grouping related css classes

While using https://tailwindcss.com/, it often happens to me that a lot of utility classes land on one element. This makes the code a bit unreadable in my opinion. Example:

<div className="container m-auto pt-2 px-4 flex items-center justify-between md:block md:relative">
    ...
</div>

Is it a good practice to introduce new div in this example just to group related css classes and make the code more readable? For example like this:

<div className="container m-auto pt-2 px-4 md:relative">
    <div className="flex items-center justify-between md:block">
        ...
    </div>
</div>

Does creating additional and arguably "unnecessary" elements in the DOM cause significant speed / performance / or other problems?