🧁 Muffin CSS
CSS pre-processor
Transform plain CSS into atomic, type-safe utilities
input
output
@layer muffin{
.box {
width: 150px;
}
@media (max-width: 600px) {
.box {
background: lightcoral;
}
}
}
<div className={css(["box"])}>
Hello
</div>;
Atomic Styles
All styles are converted to atomic utility classes for maximum reusability and performance.
Type Safety
Access class names in a type-safe way via a generated css function for confident styling.
Snippets
Use @cv, @pattern, and @token directives to speed up development with smart code snippets.
Built-in Design System
Includes a Tailwind-like token library for colors, spacing, typography, and more to streamline development.