Sfumato is a pair of tools that generate CSS for your web-based projects. You can create HTML markup and use pre-defined utility class names to style the rendered markup, without actually writing any CSS code or leaving your HTML editor!
The resulting HTML markup is clean, readable, and consistent. And the generated CSS file is tiny, even if it hasn't been minified!
The first tool is the command line interface (CLI), which you can install once and use on any projects. It will watch/build CSS as you work.
The second tool is a Nuget package that you can add to a compatible .NET project. And after adding a snippet of code to your startup, Sfumato will build/watch as you run your app or debug, generating CSS on the fly.
Sfumato is compatible with the Tailwind CSS v4 class naming structure and has the following additional features:
Sfumato supports ASP.NET, Blazor, and other Microsoft stack projects by handling "@@" escapes in razor/cshtml markup files. So you can use arbitrary variants and container utilities like "@container" by escaping them in razor syntax (e.g. "@@container").
In addition to using the CLI tool to build and watch your project, you can instead add the Sfumato Core Nuget package to your project to have Sfumato build CSS as you debug, or when you build or publish.
Sfumato features can be used in imported CSS files without any modifications. It just works. Tailwind's Node.js pipeline requires additional changes to be made in imported CSS files that use Tailwind features and setup is finicky.
Unlike Tailwind, Sfumato allows you to provide "system", "light", and "dark" options in your web app without writing any JavaScript code (other than widget UI code).
In addition to the standard media breakpoint variants (e.g. sm, md, lg, etc.) Sfumato has adaptive breakpoints that use viewport aspect ratio for better device identification (e.g. mobi, tabp, tabl, desk, etc.).
Sfumato includes form field styles that are class name compatible with the Tailwind forms plugin.
The Sfumato color library provides 20 shade steps per color (values of 50-1000 in increments of 50).
Sfumato combines media queries (like dark theme styles), reducing the size of the generated CSS even without minification.
Sfumato supports redirected input for use in automation workflows.
There's usually more to the story so if you have questions or comments about this post let us know!
Do you need a new software development partner for an upcoming project? We would love to work with you! From websites and mobile apps to cloud services and custom software, we can help!
