Just recently, the progress on the next major version of Tailwind CSS was open-sourced, along with a preview post. This is very exciting news to me, and I love the direction they’ve taken with this release. Tailwind can be a pretty polarizing topic among developers, but I believe that we can find some common ground and live in harmony. In this post, we’ll look at how the CSS + Tailwind hybrid approach is getting an upgrade in v4 and some of the patterns that we can take advantage of to provide a stellar styling experience on our websites.
The hybrid approach
It doesn’t matter what your personal take on Tailwind is, the fact is utility classes are an incredibly useful pattern for styling websites with CSS. I’m not sold on the hard-line, all-or-nothing approach that Tailwind has always recommended. Having a class string that extends way off the screen on an ultra-wide monitor is not pretty. Combining traditional CSS classes with utility classes helps cut down on the styling noise in your markup and provides some advantages when applied correctly. This post will cover some useful patterns and best practices for using CSS and Tailwind in harmony
Tailwind going “CSS-native”
In the v4 introduction post, they state
A major goal of Tailwind CSS v4.0 is making the framework feel CSS-native, and less like a JavaScript library.
I love that they are heading in this direction, and I’m imagining Tailwind as the toolkit for styling websites with CSS. It is going to replace the plethora of tools from the past and provide support for all the modern niceties like:
- Importing CSS files with
@import - Vendor prefixing (no more autoprefixr)
- Improved browser support for modern features like CSS nesting and media query ranges.
This means less worry for us as developers. We can write our code and build our sites using the modern features that the platform provides without sweating all the other details and edge cases. The talented folks at Tailwind and the open-source community have our backs.
Tailwind v4 CSS configuration
The biggest step in the “CSS-native” direction and the feature that I’m most excited about is the CSS configuration. This is great for embracing CSS and Tailwind as one instead of two factions at battle. If you’ve been using Tailwind exclusively for a long time like I have, you might be out of touch with all the great features and tools that CSS provides out of the box now. This is a great opportunity to get back to learning and using the platform.
In Tailwind v4 we do our configuration and theming with CSS variables. To get an idea of what this looks like check out the default theme on GitHub. In our configuration we can override any values from the default theme or extend it with new values.
@import "tailwindcss";
@theme {
--color-*: initial;
--color-gray-50: #f8fafc;
--color-gray-100: #f1f5f9;
--color-gray-200: #e2e8f0;
--color-green-800: #3f6212;
--color-green-900: #365314;
--color-green-950: #1a2e05;
}
All the values from the theme are exposed as CSS variables. We can reference them in our CSS files or directly in our utility classes.
.badge--red {
background-color: var(--color-red-50);
color: var(--color-red-600);
}
<div class="p-[calc(var(--spacing-6)-1px)]">
<!-- ... -->
</div>
Best practices for combining CSS with utility classes
I can understand why Tailwind recommends using strictly utility classes. It’s easy to shoot yourself in the foot and run into the issues that utility classes set out to solve in the first place. I believe if you follow some general guidelines you can safely have the best of both worlds.
Create focused/specialized classes
CSS tends to get messy when we use classes that are overly specific with styles that apply to just one or a small number of use cases.
Take a calendar where the days are custom checkboxes. You might have some pretty specialized styles for this bit of UI.
.calendar-date {
color: var(--color-gray-300);
background-color: var(--color-gray-800);
&:hover,
&:has(input[type="checkbox"]:focus) {
background-color: var(--color-gray-700);
}
& input[type="checkbox"]:checked + time {
background-color: var(--color-indigo-600);
color: var(--color-white);
}
}
Notice that we just add some specific styles that apply to this use case. This gives us the flexibility to keep composing our styles with utility classes.
Some things are better left to utilities
The best way to avoid wandering too far off the path of enlightenment is to stick with utility classes for certain (most?) things. Spacing and layouting are examples of things that are probably best left to utility classes. These typically vary all across a page, and encoding them in a class will make it a lot less flexible.
A code smell to look out for: If you have abstracted something to a class and you end up overriding certain aspects of its styles in different places. Those styles should probably be utility classes.
Classes as components
Tailwind has always recommended using a component system for your UI components so that your utility classes are all defined in a single place. You don’t want to have to edit 50 different files to make a change to the style of your buttons across your website. I’ve found that defining things that might be simple “components” like buttons, badges, links, etc as classes works just as well in most cases.
You can use Tailwind CSS with the @apply directive or traditional class definitions for this:
.badge {
@apply inline-flex items-center gap-x-1.5 rounded-md py-0.5 text-sm/5 font-medium sm:text-xs/5;
}
You can even bring the BEM naming convention back to compose variants on top of base component styles. (or name them however you’d like!)
.badge--yellow {
@apply bg-yellow-400/20 text-yellow-700 ;
}
Now we can easily define badges in our markup:
<span class="badge badge--yellow">Warning</span>
Modern CSS and other interesting utility hybrid patterns
I think a lot of us are realizing that modern CSS is pretty great. There are a ton of awesome new features gaining support across major browsers, like CSS nesting, container queries, and more! More and more people are also coming around to the utility of utility classes. If you want to dive deeper and see other interesting approaches and patterns when combining modern CSS with utility classes, check out the post: Modern CSS patterns in Campfire.
Summary
I’m looking forward to the Tailwind CSS configuration and other awesome updates coming in v4. Using Tailwind doesn’t have to be a one-size-fits-all approach. If you want to write some CSS, I say go for it! Hopefully, some of the points in this post will lead to success if you decide to do so.
About the author
