Introduction

Find out more about Sfumato and how it can speed web development.

What is Sfumato?

Sfumato is a command line interface (CLI) tool that generates 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!

Step 1: Watch your project for changes

> sfumato watch /projects/website/css/source.css

Step 2: Work on your project!

This panel uses Sfumato utility classes for styling.

<div class="mx-auto p-6 w-72 rounded-xl shadow-md text-balance text-center bg-blue-500 text-white">
    <p class="font-semibold">This panel uses Sfumato utility classes for styling.</p>
</div>

Use in custom CSS

It's not required, but you can use Sfumato utility classes (and other features) in your custom CSS code. Here's an example:

.story-heading {
    @apply text-lg font-bold text-black;
}

@variant desk {
    .story-heading {
        @apply text-xl;
    }
}

@variant dark {
    .story-heading {
        @apply text-white;
    }
}

Tailwind CSS compatible

Introduction

What is Sfumato?

Step 1: Watch your project for changes

Step 2: Work on your project!

Use in custom CSS

Sfumato

Community