preact-css-extract

I also did some experiments in this space as I have the same complaints about Tailwind https://github.com/aziis98/preact-css-extract I made this as I couldn't stand writing another 2K lines css file and wanted to try the atomic css wagon without having to switch from preact or having to learn tailwind

This is a small TailwindCSS alternative based on a css template literal. I was inspired by styled-components and EmotionCSS, which however do not work well with ViteJS and specifically Preact. This provides a better experience than Tailwind, as you can use all CSS language features without learning new conventions while maintaining a per-component styling approach. This also turns out to be more inspectable in the browser's dev-tools, as snippets are extracted as-is and are not fragmented across thousands of small classes. I wanted something more optimized than other CSS-in-JS alternatives that generate CSS at runtime, so I created a ViteJS plugin for this. It extracts all style snippets, replaces them with classes like css-a1b2c3, and injects all the corresponding styles into a CSS file in place of an "@extracted-css" directive. There is