Tailwind CSS Tips and Tricks

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. Let's say you want to style a button with increased box-shadow on hover. But, if the button is disabled, don't do anything. Historically, this required something like reading a disabled boolean on a button component, and only applying styles if (!disabled) { ... }.

Now, I can write shadow hover:enabled:shadow-xl. You can delete code!

Take a look at the quick reference for all the possible modifiers. They mostly map on to the real pseudo-class equivalents. 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.

Another example would be hover states,

function Component() {
  return (
    <div className="group hover:bg-red-100">
      <div className="group-hover:bg-green-100">
        colors!
      </div>
    </div>
  )
}

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.