Get Started

Stylify generates CSS dynamically based on what you write. It can be used directly in the browser or in a Node.js environment. It is inspired by Tailwind and Tachynos.

Unlike these CSS frameworks, Stylify uses native syntax like CSS property:value as selectors. Therefore, you don't have to study or remember the selectors because they are almost the same like pure CSS. In case you want shorter or completely different selectors you can configure them or create a whole new preset.

Quick Start

The easiest way to start is to use Stylify through CDN. Create an index.html file and copy the code bellow into it (you can also try our Codepen Playground).

<script src="https://cdn.jsdelivr.net/npm/@stylify/stylify@latest/dist/stylify.native.min.js"></script>
<script>
// This will be used for the configuration in examples bellow
const compilerConfig = {};
Stylify.runtime.configure({
    compiler: compilerConfig
})
</script>

Writting first CSS

Before you start writting selectors, there are few rules you need to know:

• Selectors are almost the same like css property:value
• Use __ (two underscores) for a space and ^ (a hat) for a quote
• The default syntax pattern is <screen>:<pseudo classes>:<property>:<value>

Screens usage

In the Native Preset there are predefined shortcuts like sm, md, lg you may know from Tailwind or Bootstrap and dynamic screens such as minw, maxw, rng. Dynamic screens are flexible and the generated media query depends on the value you choose when using them. Checkout the full list.

When not using the Native Preset, you have to define your own screens as shown bellow in the configuration section.

Screens can also be randomly combined by using logical operands. There is a logical AND && and a logical OR ||. Don't worry about the screens order. They are sorted before the CSS is generated (see screens documentation).

If you want to add a custom screen, you can do that like this:

const compilerConfig = {
    screens: {
        'xs': '(min-width: 400px)',
        // Screens can also be functions
        // That allows you to make as flexible screen as possible
        'minw\\w+': (screen) => `(min-width: ${screen.replace('minw', '')})`
    }
};

Adding a Variable

It's not a good practice to have hardcoded variables in the code. Therefore you can define Variables.

Variable can be defined in a content (expects an object without surounding brackets) when used localy (one file / a few pages) or in a compiler config, when used globally.

In a compiler config:

const compilerConfig = {
    variables: {
        fontSize: '24px',
        fontSizeLg: '32px',
        textShadow: '0 4px 8px #379adf'
    }
};

Defining a Component

When we want to reuse a piece of code, for example for a button without duplicating classes, we can define a component like this:

Variable can be defined in a content (expects an object without surounding brackets) when used localy (one file / a few pages) or in a compiler config, when used globally.

In a compiler config:

const compilerConfig = {
    components: {
        'label-icon': 'lg:font-size:48px margin-left:8px',
        label: \`
            display:flex
            line-height:1.2
            font-size:32px
            align-items:center
        \`,
    }
};

Custom selectors

In case you want to add a custom selector, for example a shorter variant for margin-left like ml, you can do that as follows:

const compilerConfig = {
    macros: {
        'ml:(\\S+?)': function (macroMatch, cssProperties): void {
            // ml:24px => will create => margin-left: 24px
            cssProperties.add('margin-left', macroMatch.getCapture(0));
        }
    }
};

More Configuration

Checkout the compiler documentation to learn, how to configure Stylify even more.

The way to pass the configuration depends on how and where you use the Stylify. Make shure to checkout our guides bellow on how to integrate the Stylify into various tools.

Stylify Packages

Stylify ships with multiple packages. All of them can be installed using NPM or YARN. Stylify and Profiler can also be used directly through CDN:

• @stylify/stylify - For generating CSS
• @stylify/bundler - Generates CSS bundles for your project
• @stylify/unplugin - Universal plugin for Rollup, Webpack, Vite and Esbuild
• @stylify/nuxt - A module for Nuxt.js v3
• @stylify/nuxt-module - A module for Nuxt.js v2 < v3
• @stylify/profiler - This package shows you what is happening under the hood
• @stylify/autoprefixer - Autoprefixer for dynamic prefixing in SSR apps

Try Stylify with your favorite tool!

For easier start with your favorite tool checkout the integration examples.

Browser