Modifiers delete code.
For example, one that I like is
enabled. It's the opposite of
disabled. Historically, if I wanted to change the box shadow of a button on hover I would first check the
disabled boolean in code. But, with
shadow-lg hover:enabled:shadow-xl, I can now delete that code!
For example, historically dropdown menu open/closed state has been controlled by code. But, with
group on the parent and
hidden group-focus-within:block on the child, you can keep the dropdown open so long as the user stays within the input or dropdown itself. This also requires a tabindex on the dropdown
div so it can receive (and maintain) focus.
I might be missing something but if you want to lean heavily into CSS Grid, you will want to write custom CSS to do so. It would seem a bit unwieldy as custom grid classes anyways.