u/AshTeriyaki

So quite a while ago I began writing some tooling for myself. I've always been a big fan on Tailwind, but I've found at codebases grow, it becomes quite hard to manage longer term. I love the ergonomics of quickly throwing together prototypes with it, but not so much the mess you can often end up with once you start involving extensive responsive breakpoints, dark mode styling and groups. And with TW4 I've found it increasingly difficult to always remember everything, I'll just forget the name of a single use property and one day I thought to myself.

"Why am I remembering alternate names for single CSS properties, and why do I have to wait for the tailwind team to wrap a new CSS feature before using it?"

Modern scoped CSS solves a lot of the problems TW aims to solve and you can still have that same prototyping velocity without buying into the whole framework. And the most contentious part...Sass. Sass is still really good and I can (and did) recreate an awful lot of the parts of TW I like in relatively little markup. Vanilla CSS still hasn't quite caught up.

So anyway, here it is:

https://github.com/TeriyakiBomb/crayon

It actually took longer to write the documentation (Which is comprehensive but still WIP I'd say) than it did the toolkit. It takes the core features of tailwind (colors, sizes, text, layout) but draws a line there, for each utility class, there is both a corresponding Sass mixin, CSS var and all of the functions used to generate them are exposed too.
You're actively encouraged to choose the approach that works best for what you're doing. It feels a bit vibey at first but quite natural after a while.

The philosophy is - centralise the things that change globally, but don't reinvent the wheel when you need CSS. Again, the idea of using Sass might sound contradictory but in the interest of allowing you to move fast, using mixins and a bunch of composition tools in Crayon actually means you can move really quickly and it ends up more readable than a massive list of TW classes much of the time. Plus Sass is still pretty phenomenal for more complex work as well. I'd not used it in years and I've been really pleased with how much I like modern Sass.

It compiles quickly and the end bundle size is actually pretty small. As it uses purgeCSS instead of a JIT like TW, you can also often avoid stuff like twMerge as well.

This absolutely will not be everyone's cup of tea, and really I'm putting it out more because I'm curious if anyone else is interested in using it. It's a quirky project and it's been quite well received amongst colleagues and some friends.

FWIW if you're AI inclined, everything is familiar enough for it to be picked up quickly, it has sassdoc so it works with the some-sass LSP and it works everywhere Sass does, but I've documented Vue, Svelte, Astro and emberjs.