🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨

I've used this exact technique on the homepage of the new @thethinkmill website. You can check it out here: ✨

If you liked this, I have a @ProTailwind tutorial in the works that goes in **a lot more depth** about using CSS grid to control background color splits. I plan to release this tutorial **for free**, like the existing "Ribbon Banner" tutorial available at

👀

The reason the grid bands use half the height each is because our grid is using position: absolute with inset-0, making it occupy all the space of its relative parent. Each grid row uses "1fr" of space. If we had 4 divs inside that grid, they would each share 1/4 of the height!

Here's a link to the Tailwind Play used in this video:

Or alternatively, you could just use a gradient with 50% background: linear-gradient(180deg, white 50%, cyan 50%, cyan 50%);

I learn more CSS using @tailwindcss. Never heard of isolate prop.

@and3rsonsousa @tailwindcss It creates a new stacking context explicitely, and not as a "side effect" like using relative or another stacking context triggering property 👍

Nice. I usually reach for background gradients with a hard edge.

Ah yep this is also a good technique, 0 to 50, and 50 to 100 👍