Using CSS Layers with Tailwind CSS
|
A couple of weeks ago, Zoran Jambor from CSS Weekly asked if I had examples of using CSS Cascade Layers in a real project. It’s probably going to surprising to most people that I use CSS Cascade Layers together with Tailwind CSS, because you were supposed to write utilities in the HTML directly. But of course, that statement is simply an opinion, not a truth. I’ve mentioned this many times by now: Tailwind and CSS are both tools — which means you can find a way to use the benefits of both tools at the same time. This CSS Cascade Layer trick is simply one of the layers (ha) of the synergistic I’ve found when using both Tailwind and CSS at the same time. By the way, the synergy between Tailwind and CSS is the premise behind Unorthodox Tailwind. It covers how I use Tailwind and CSS together in ways that may surprise you — because you’ll likely see improved clarity and ease when building your sites when you adopt this approach. The course is still heavily in WIP so there’s still a preorder discount if you’re interested. (I just rewrote the entire thing from scratch again to make it better). Today’s article is going to give you a sneak peek into one the layers I use in the Unorthodox Tailwind methodology. Hope you have fun reading this! |
Hi! My name is Zell and here are the things I’ve made
New article just dropped on CSS Tricks 😉. This one is about improving the Resize Observer API so it becomes much easier to use. So you go from this: To this: Hope you have fun reading through this one. I have one more article on improving the Mutation Observer and Intersection Observer in the same style coming up next week 🙂.
If you’ve never heard of zlFetch before, it’s a library that I’ve created that helps you with the Fetch API. It provides a ton of quality of life improvements like: Automatic response solution (so no need to use response.json) Promise-like error handling Usage with await easily Simple Basic and Token based authentication headers And a ton of other things Just my personal opinion: It’s better than axios cos it’s less complicated It’s better than ky cos it has better defaults Last Sunday, I sat...
I’m happy to announce that I am working on a new course — Unorthodox Tailwind. This course shows you how to use Tailwind and CSS in a synergistic manner. This is a great course to take if you have been wondering: How to use the best parts of Tailwind How to use the best parts of CSS How to combine the strengths of both Tailwind and CSS (While avoiding the HTML bloat that usually comes with Tailwind classes) This is also a great course to take if you’ve been yearning for a great system to...