Tailwind CSS Tips and Tricks

Image of Author
Invalid Date (last updated October 18, 2022)

Use modifiers

https://tailwindcss.com/docs/hover-focus-and-other-states

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!

Take a look at the Quick reference for all the possible modifiers. They mostly map on to the real pseudo-class equivalent. Some other powerful ones include: focus-within, required, and only-of-type.

Use group and peer

When you can, group and peer are powerful modifiers that will, again, let you delete 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.

CSS Grid utilities are insufficient

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.