wtf is unocss?

UnoCSS is a tool that lets you write CSS styling in your code using short, reusable class names, but it generates only the CSS you actually use. Instead of downloading a huge stylesheet upfront, it creates styles on demand as you add classes to your HTML. The benefit: your website loads faster because you're not shipping unused styling code. The way it works is different from older CSS tools. Traditional systems scan your files looking for class names, then build CSS from that. UnoCSS skips that scanning step entirely, it generates styles instantly as your code runs, which is why it's roughly five times faster than competing tools. It's also tiny (about 6 kilobytes compressed) with no extra dependencies, so you can even use it directly in a browser without a build step. You'd use this if you're building a website or web app and want a fast, flexible way to style components. A designer might use it because they can quickly prototype layouts by adding descriptive class names like flex gap-4 rounded-lg without touching raw CSS. A developer working on a large project would appreciate that only the styles they use get shipped to users. It works with popular build tools like Vite, Nuxt, and Astro, as well as older systems like Webpack, and there's even a VS Code extension so your editor can autocomplete the class names. What makes this project distinctive is how customizable it is, there are no fixed built-in style rules. Instead, you configure "presets" that define what classes are available, so teams can tailor it to their own design system. It also has bonus features like using icon libraries as single CSS classes, grouping related styles into HTML attributes, and an interactive inspector tool for debugging what styles are actually being generated.