It's easy to migrate Tailwind CSS projects to Sfumato.
Sfumato utility class and function naming conventions are largely compatible with Tailwind CSS (version 4), which is a similar tool. This is done to allow for easy migration in either direction, giving you the flexibility to decide which works best for you.
But class and function naming conventions are where the similarity ends. Sfumato is built from the ground up to be a better, faster tool that many developers will prefer.
Sfumato is built with high-performance, multi-threaded, async C# code, compiled as native code for Windows, macOS, and Linux. It can be installed, updated, or removed with a single terminal command.
Some of the benefits of this approach are:
Single, easy installation, updates, and removals
Install once and use Sfumato on any projects now and in the future.
Fastest way to build
Sfumato is a multi-threaded, 64-bit native, super fast cross-platform app. It's up to 3x faster than Tailwind CSS 4.1!
No dependencies
When using Sfumato your project remains clean. Tailwind CSS uses Node.js with a bunch of third party dependencies and adds a node-modules folder to your project containing a ton of extra files.
Multi-project builds
Sfumato can build and watch multiple project configurations at once. It's so fast you may not even notice a difference.
One of the reasons we built Sfumato was to fill gaps in the Tailwind CSS feature set. As active software developers these new features were important to us, and we wanted to control the roadmap to make sure our needs were being met. We think yours will be too.
Some of the enhancements we made include:
Works great with ASP.NET
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").
Imported CSS files work as-is
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.
Better dark theme support
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).
Adaptive design baked in
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.).
Integrated form element styles
Sfumato includes form field styles that are class name compatible with the Tailwind forms plugin.
More colorful
The Sfumato color library provides 20 shade steps per color (values of 50-1000 in increments of 50).
More compact CSS
Sfumato combines media queries (like dark theme styles), reducing the size of the generated CSS even without minification.
Workflow-friendly
Sfumato supports redirected input for use in automation workflows.
