Skip to content
Stilvoll

Getting Started

Stilvoll is an utility CSS engine, that’s based around CSS custom properties to define tokens, generating typesafe utility CSS. It’s un-opinionated and designed to be flexible. By default it does not generate any utility CSS classes. All utilities are opt-in via rules. Stilvoll comes with rules to pick up or let’s you easily define your own rules to fit your project.

stilvoll.config.js
import { flexRules } from '@stilvoll/rules';


export default {
  input: ['./src/index.css'],
  rules: [
    // Pre-made rule
    ...flexRules,


    // Custom defined rules
    ['hidden', { display: 'none' }],
    ['visible', { visibility: 'visible' }],
  ]
}

This will add hidden and visible CSS utilities to your project. If configured to watch markup files it won’t add them to your codebase until you’re actually using them.

<div class="hidden">I'm hidden</div>

When using the typesafe CSS you can import the sv object from stilvoll to access your utility classes.

import { sv } from 'stilvoll';


function() {
  return (
    <div className={sv.hidden}>I'm hidden</div>
  );
}

Both will output the following CSS:

.hidden { display: none; }

Integrations

Stilvoll comes with integrations to be plug and play with popular tech stacks.

Vite Plugin
PostCSS Plugin
CLI

Examples

Vite
Postcss
Next.js