Normally, I like to publish one of these updates every few months. But seeing as the last one dates back to September of last year, I’m well off that mark and figured it’s high time to put pen to paper. The fact is that a lot is happening around here at CSS-Tricks — and it’s all good stuff.
In the last post of 2024, I said that filling the Almanac was a top priority heading into this year. We had recently refreshed the whole dang thing, complete with completely new sections for documenting CSS selectors, at-rules, and functions on top of the sections we already had for properties and pseudo-selectors. The only problem is that those new sections were pretty bare.
Well, not only has this team stepped up to produce a bunch of new content for those new sections, but so have you. Together, we’ve published 21 new Almanac entries since the start of 2025. Here they are in all their glory:
animation-timelineinterpolate-sizeoverlay@charset@counter-style@import@keyframes@namspace@page@view-transitionattr()calc-size()counter()counters()hsl()lab()lch()light-dark()oklch()rgb()symbols()What’s even better? There are currently fourteen more in the hopper that we’re actively working on. I certainly do not expect us to sustain this sort of pace all year. A lot of work goes into each and every entry. Plus, if all we ever did was write in Almanac, we would never get new articles and tutorials out to you, which is really what we’re all about around here.
Those of you who know me know that I’m not the most social person in all the land. Yes, I like hanging out with folks and all that, but I tend to keep my activities to back-of-the-house stuff and prefer to stay out of view.
So, that’s why it’s weird for me to call out a few recent podcast and event appearances. It’s not like I do these things all that often, but they are fun and I like to note them, even if its only for posterity.
We published it just the other week! I’ll be honest and say that a complete guide about styling counters in CSS was not the first thing that came to my mind when we started planning new ideas, but I’ll be darned if Juan didn’t demonstrate just how big a topic it is. There are so many considerations when it comes to styling counters — design! accessibility! semantics! — and the number of tools we have in CSS to style them is mind-boggling, including two functions that look very similar but have vastly different capabilities for creating custom counters — counter() and counters() (which are also freshly published in the Almanac).
At the end of last year, I said I hoped to publish 1-2 new guides, and here we are in the first quarter of 2025 with our first one out in the wild! That gives me hope that we’ll be able to get another comprehensive guide out before the end of the year.
I think the most exciting update of all is getting to recognize the folks who have published new articles with us since the last update. Please help me extend a huge round of applause to all the faces who have rolled up their sleeves and shared their knowledge with us.
And, of course, nothing on this site would be possible without ongoing help from Juan Diego Rodriguez and Ryan Trimble. Those two not only do a lot of heavy lifting to keep the content machine fed, but they are also just two wonderful people who make my job a lot more fun and enjoyable. Seriously, guys, you mean a lot to this site and me!
CSS-Tricks Chronicles XLIII originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
If I were starting with CSS today for the very first time, I would first want to spend time understanding writing modes because that’s a great place to wrap your head around direction and document flow. But right after that, and even more excitedly so, I would jump right into display and get a firm grasp on layout strategies.
And where would I learn that? There are lots of great resources out there. I mean, I have a full course called The Basics that gets into all that. I’d say you’d do yourself justice getting that from Andy Bell’s Complete CSS course as well.
But, hey, here’s a brand new way to bone up on layout: Miriam Suzanne is running a workshop later this month. Cascading Layouts is all about building more resilient and maintainable web layouts using modern CSS, without relying on third-party tools. Remember, Miriam works on CSS specifications, is a core contributor to Sass, and is just plain an all-around great educator. There are few, if any, who are more qualified to cover the ins and outs of CSS layout, and I can tell you that her work really helped inspire and inform the content in my course. The workshop is online, runs April 28-30, and is a whopping $ 100 off if you register by April 12.
Just a taste of what’s included:
Cascading Layouts: A Workshop on Resilient CSS Layouts originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
By this point, it’s not a secret to most people that I like Tailwind.
But, unknown to many people (who often jump to conclusions when you mention Tailwind), I don’t like vanilla Tailwind. In fact, I find most of it horrible and I shall refrain from saying further unkind words about it.
But I recognize and see that Tailwind’s methodology has merits — lots of them, in fact — and they go a long way to making your styles more maintainable and performant.
Today, I want to explore one of these merit-producing features that has been severely undersold — Tailwind’s @apply feature.
@apply doesTailwind’s @apply features lets you “apply” (or simply put, copy-and-paste) a Tailwind utility into your CSS.
Most of the time, people showcase Tailwind’s @apply feature with one of Tailwind’s single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn’t sound promising at all. It sounds downright stupid. So obviously, nobody wants to use it.
/* Input */
.selector {
@apply p-4;
}
/* Output */
.selector {
padding: 1rem;
}To make it worse, Adam Wathan recommends against using @apply, so the uptake couldn’t be worse.
Confession: The `apply` feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework.
— Adam Wathan (@adamwathan) February 9, 2020
You should almost never use it 😬
Reuse your utility-littered HTML instead.https://t.co/x6y4ksDwrt
Personally, I think Tailwind’s @apply feature is better than described.
@apply is like Sass’s @includesIf you have been around during the time where Sass is the dominant CSS processing tool, you’ve probably heard of Sass mixins. They are blocks of code that you can make — in advance — to copy-paste into the rest of your code.
@mixin@includes// Defining the mixin
@mixin some-mixin() {
color: red;
background: blue;
}
// Using the mixin
.selector {
@include some-mixin();
}
/* Output */
.selector {
color: red;
background: blue;
}Tailwind’s @apply feature works the same way. You can define Tailwind utilities in advance and use them later in your code.
/* Defining the utility */
@utility some-utility {
color: red;
background: blue;
}
/* Applying the utility */
.selector {
@apply some-utility;
}
/* Output */
.selector {
color: red;
background: blue;
}Tailwind’s utilities can be used directly in the HTML, so you don’t have to write a CSS rule for it to work.
@utility some-utility {
color: red;
background: blue;
}<div class="some-utility">...</div> On the contrary, for Sass mixins, you need to create an extra selector to house your @includes before using them in the HTML. That’s one extra step. Many of these extra steps add up to a lot.
@mixin some-mixin() {
color: red;
background: blue;
}
.selector {
@include some-mixin();
}
/* Output */
.selector {
color: red;
background: blue;
}<div class="selector">...</div>Tailwind’s utilities can also be used with their responsive variants. This unlocks media queries straight in the HTML and can be a superpower for creating responsive layouts.
<div class="utility1 md:utility2">…</div> One of my favorite — and most easily understood — examples of all time is a combination of two utilities that I’ve built for Splendid Layouts (a part of Splendid Labz):
vertical: makes a vertical layouthorizontal: makes a horizontal layoutDefining these two utilities is easy.
vertical, we can use flexbox with flex-direction set to column.horizontal, we use flexbox with flex-direction set to row.@utility horizontal {
display: flex;
flex-direction: row;
gap: 1rem;
}
@utility vertical {
display: flex;
flex-direction: column;
gap: 1rem;
}After defining these utilities, we can use them directly inside the HTML. So, if we want to create a vertical layout on mobile and a horizontal one on tablet or desktop, we can use the following classes:
<div class="vertical sm:horizontal">...</div>For those who are new to Tailwind, sm: here is a breakpoint variant that tells Tailwind to activate a class when it goes beyond a certain breakpoint. By default, sm is set to 640px, so the above HTML produces a vertical layout on mobile, then switches to a horizontal layout at 640px.
If you prefer traditional CSS over composing classes like the example above, you can treat @apply like Sass @includes and use them directly in your CSS.
<div class="your-layout">...</div> .your-layout {
@apply vertical;
@media (width >= 640px) {
@apply horizontal;
}
}The beautiful part about both of these approaches is you can immediately see what’s happening with your layout — in plain English — without parsing code through a CSS lens. This means faster recognition and more maintainable code in the long run.
Sass mixins are more powerful than Tailwind utilities because:
@if and @for loops.@mixin avatar($size, $circle: false) {
width: $size;
height: $size;
@if $circle {
border-radius: math.div($size, 2);
}
}On the other hand, Tailwind utilities don’t have these powers. At the very maximum, Tailwind can let you take in one variable through their functional utilities.
/* Tailwind Functional Utility */
@utility tab-* {
tab-size: --value(--tab-size-*);
}Fortunately, we’re not affected by this “lack of power” much because we can take advantage of all modern CSS improvements — including CSS variables. This gives you a ton of room to create very useful utilities.
A second example I often like to showcase is the grid-simple utility that lets you create grids with CSS Grid easily.
We can declare a simple example here:
@utility grid-simple {
display: grid;
grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
gap: var(--gap, 1rem);
}By doing this, we have effectively created a reusable CSS grid (and we no longer have to manually declare minmax everywhere).
After we have defined this utility, we can use Tailwind’s arbitrary properties to adjust the number of columns on the fly.
<div class="grid-simple [--cols:3]">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>To make the grid responsive, we can add Tailwind’s responsive variants with arbitrary properties so we only set --cols:3 on a larger breakpoint.
<div class="grid-simple sm:[--cols:3]">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>This makes your layouts very declarative. You can immediately tell what’s going on when you read the HTML.
Now, on the other hand, if you’re uncomfortable with too much Tailwind magic, you can always use @apply to copy-paste the utility into your CSS. This way, you don’t have to bother writing repeat and minmax declarations every time you need a grid that grid-simple can create.
.your-layout {
@apply grid-simple;
@media (width >= 640px) {
--cols: 3;
}
}<div class="your-layout"> ... </div>By the way, using @apply this way is surprisingly useful for creating complex layouts! But that seems out of scope for this article so I’ll be happy to show you an example another day.
Tailwind’s utilities are very powerful by themselves, but they’re even more powerful if you allow yourself to use @apply (and allow yourself to detach from traditional Tailwind advice). By doing this, you gain access to Tailwind as a tool instead of it being a dogmatic approach.
To make Tailwind’s utilities even more powerful, you might want to consider building utilities that can help you create layouts and nice visual effects quickly and easily.
I’ve built a handful of these utilities for Splendid Labz and I’m happy to share them with you if you’re interested! Just check out Splendid Layouts to see a subset of the utilities I’ve prepared.
By the way, the utilities I showed you above are watered-down versions of the actual ones I’m using in Splendid Labz.
One more note: When writing this, Splendid Layouts work with Tailwind 3, not Tailwind 4. I’m working on a release soon, so sign up for updates if you’re interested!
Tailwind’s @apply Feature is Better Than it Sounds 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 61F. Currently, it's 71F and Clear outside. Current wind speeds: 9 from the Southeast Pollen: 3 Su...
