For this issue of What’s !important, we have a healthy balance of old CSS that you might’ve missed and new CSS that you don’t want to miss. This includes random(), random-item(), folded corners using clip-path, backdrop-filter, font-variant-numeric: tabular-nums, the Popover API, anchored container queries, anchor positioning in general, DOOM in CSS, customizable <select>, :open, scroll-triggered animations, <toolbar>, and somehow, more.
Let’s dig in.
random() and random-item()Alvaro Montoro explains how the random() and random-item() CSS functions work. As it turns out, they’re actually quite complex:
width: random(--w element-shared, 1rem, 2rem);
color: random-item(--c, red, orange, yellow, darkkhaki);clip-pathMy first solution to folded corners involved actual images. Not a great solution, but that was the way to do it in the noughties. Since then we’ve been able to do it with box-shadow, but Kitty Giraudel has come up with a CSS clip-path solution that clips a custom shape (hover the kitty to see it in action):
backdrop-filter and font-variant-numeric: tabular-numsStuart Robson talks about backdrop-filter. It’s not a new CSS property, but it’s very useful and hardly ever talked about. In fact, up until now, I thought that it was for the ::backdrop pseudo-element, but we can actually use it to create all kinds of background effects for all kinds of elements, like this:
font-variant-numeric: tabular-nums is another one. This property and value prevents layout shift when numbers change dynamically, as they do with live clocks, counters, timers, financial tables, and so on. Amit Merchant walks you through it with this demo:
Godstime Aburu does a deep dive on the Popover API, a new(ish) but everyday web platform feature that simplifies tooltip and tooltip-like UI patterns, but isn’t without its nuances.
Just another anchor positioning quirk, this time from Chris Coyier. These quirks have been piling up for a while now. We’ve talked about them time and time again, but the thing is, they’re not bugs. Anchor positioning works in a way that isn’t commonly understood, so Chris’ article is definitely worth a read, as are the articles that he references.
In this walkthrough, I demonstrate how to build dynamic toggletips using anchored container queries. Also, I ran into an anchor positioning quirk, so if you’re looking to solidify your understanding of all that, I think the walkthrough will help with that too.
Demo (full effect requires Chrome 143+):
DOOM in CSS. DOOM. In CSS.
DOOM fully rendered in CSS. Every surface is a <div> that has a background image, with a clipping path with 3D transforms applied. Of course CSS does not have a movable camera, so we rotate and translate the scene around the user.
— Niels Leenheer (@html5test.com) Mar 13, 2026 at 20:32
[image or embed]
<select>:open (to my surprise, as I thought it was Baseline already)In addition, Chrome will ship every two weeks starting September.
From the Quick Hits reel, you might’ve missed that Font Awesome launched a Kickstarter campaign to transform Eleventy into Build Awesome, cancelled it because their emails failed to send (despite meeting their goal!), and vowed to try again. You can subscribe to the relaunch notification.
Also, <toolbar> is coming along according to Luke Warlow. This is akin to <focusgroup>, which we can actually test in Chrome 146 with the “Experimental Web Platform features” flag enabled.
Right, I’m off to slay some demons in DOOM. Until next time!
P.S. Congratulations to Kevin Powell for making it to 1 million YouTube subs!
What’s !important #7: random(), Folded Corners, Anchored Container Queries, and More originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
When I talk about layouts, I’m referring to how you place items on a page. The CSS properties that are widely used here include:
display — often grid or flex nowadaysmarginpaddingwidthheightpositiontop, left, bottom, rightI often include border-width as a minor item in this list as well.
At this point, there’s only one thing I’d like to say.
Tailwind is really great for making layouts.
There are many reasons why.
When we shift layouts into CSS, we lose the mental structure and it takes effort to re-establish them. Imagine the following three-column grid in HTML and CSS:
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>.grid {
display: grid;
grid-template-columns: 2fr 1fr;
.grid-item:first-child {
grid-column: span 2
}
.grid-item:last-child {
grid-column: span 1
}
}
Now cover the HTML structure and just read the CSS. As you do that, notice you need to exert effort to imagine the HTML structure that this applies to.
Now imagine the same, but built with Tailwind utilities:
<div class="grid grid-cols-3">
<div class="col-span-2"></div>
<div class="col-span-1"></div>
</div>You might almost begin to see the layout manifest in your eyes without seeing the actual output. It’s pretty clear: A three-column grid, first item spans two columns while the second one spans one column.
But grid-cols-3 and col-span-2 are kinda weird and foreign-looking because we’re trying to parse Tailwind’s method of writing CSS.
Now, watch what happens when we shift the syntax out of the way and use CSS variables to define the layout instead. The layout becomes crystal clear immediately:
<div class="grid-simple [--cols:3]">
<div class="[--span:2]"> ... </div>
<div class="[--span:1]"> ... </div>
</div>Same three-column layout.
But it makes the layout much easier to write, read, and visualize. It also has other benefits, but I’ll let you explore its documentation instead of explaining it here.
For now, let’s move on.
2fr 1fr?It makes sense to write 2fr 1fr for a three-column grid, doesn’t it?
.grid {
display: grid;
grid-template-columns: 2fr 1fr;
}Unfortunately, it won’t work. This is because fr is calculated based on the available space after subtracting away the grid’s gutters (or gap).
Since 2fr 1fr only contains two columns, the output from 2fr 1fr will be different from a standard three-column grid.
Alright. Let’s continue with the reasons that make Tailwind great for building layouts.
I think layouts are the hardest things to name. I rarely come up with better names than:
.two-columns.content-sidebarBut these names don’t do the layout justice. You can’t really tell what’s going on, even if you see .two-columns, because .two-columns can mean a variety of things:
1fr autoauto 1frYou can already see me tripping up when I try to explain that last one there…
Instead of forcing ourselves to name the layout, we can let the numbers do the talking — then the whole structure becomes very clear.
<div class="grid-simple [--cols:7]">
<div class="[--span:4]"> ... </div>
<div class="[--span:3]"> ... </div>
</div>The variables paint a picture.
A “two-column” layout might have different properties when used in different contexts. Here’s an example.
In this example, you can see that:
gap is used between the I and J groups.gap is used within the I and J groups.The difference in gap sizes is subtle, but used to show that the items are of separate groups.
Here’s an example where this concept is used in a real project. You can see the difference between the gap used within the newsletter container and the gap used between the newsletter and quote containers.
If this sort of layout is only used in one place, we don’t have to create a modifier class just to change the gap value. We can change it directly.
<div class="grid-simple [--cols:2] gap-8">
<div class="grid-simple gap-4 [--cols:2]"> ... </div>
<div class="grid-simple gap-4 [--cols:2]"> ... </div>
</div>Let’s say you have a heading for a marketing section. The heading would look nicer if you are able to vary its max-width so the text isn’t orphaned.
text-balance might work here, but this is often nicer with manual positioning.
Without Tailwind, you might write an inline style for it.
<h2 class="h2" style="max-width: 12em;">
Your subscription has been confirmed
</h2>With Tailwind, you can specify the max-width in a more terse way:
<h2 class="h2 max-w-[12em]">
Your subscription has been confirmed
</h2>
“At which breakpoint would you change your layouts?” is another factor you’d want to consider when designing your layouts. I shall term this the responsive factor for this section.
Most likely, similar layouts should have the same responsive factor. In that case, it makes sense to group the layouts together into a named layout.
.two-column {
@apply grid-simple;
/* --cols: 1 is the default */
@media (width >= 800px) {
--cols:2;
}
}However, you may have layouts where you want two-column grids on a mobile and a much larger column count on tablets and desktops. This layout style is commonly used in a site footer component.
Since the footer grid is unique, we can add Tailwind’s responsive variants and change the layout on the fly.
<div class="grid-simple [--cols:2] md:[--cols:5]">
<!-- span set to 1 by default so there's no need to specify them -->
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
Again, we get to create a new layout on the fly without creating an additional modifier class — this keeps our CSS clean and focused.
This article is a sample lesson from my course, Unorthodox Tailwind, where I show you how to use Tailwind and CSS synergistically.
Personally, I think the best way to use Tailwind is not to litter your HTML with Tailwind utilities, but to create utilities that let you create layouts and styles easily.
I cover much more of that in the course if you’re interested to find out more!
4 Reasons That Make Tailwind Great for Building Layouts originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
With a high of F and a low of 28F. Currently, it's 39F and Cloudy outside. Current wind speeds: 10 from the South Pollen: 0 Sunr...
