These seem hard to find; they’re all either overly complex, or behind a paywall. Here’s a few easy ones.

Center a div

The classic.

<div className="flex justify-center bg-gray-200">
  <div className="bg-gray-400">I'm centered!</div>
</div>

Gradient text

Nice for titles & headers! First line just makes the text & gradient easier to see. bg-gradient-to-br goes towards bottom right.

<div className="text-6xl font-extrabold p-3
            bg-gradient-to-br from-blue-100 to-blue-500
            bg-clip-text text-transparent">
  A gradient.
</div>

Jumping elements due to scrollbar appearing

This issue drove me crazy before realizing it happened between short / long pages with / without scrollbars. There’s a convenient, recent feature to avoid the jump, scrollbar-gutter: stable (MDN). It’s not actually in Pop this into your Html.astro layout, or wherever you keep CSS:

<style>
	html {
		scrollbar-gutter: stable;
	}
</style>