Atomizer

PostCSS

A simple guide to setup Atomizer with PostCSS.

On this page

Install the plugin

A PostCSS plugin is available as part of the postcss-atomizer package. Install the package in your project first.

npm i postcss-atomizer postcss -D

Update the config

Add the Atomizer plugin to your PostCSS config.

// postcss.config.js
const atomizer = require('postcss-atomizer');

module.exports = {
    plugins: [
        atomizer({ /* options */ }),
    ]
};

Option information and an example is available in the postcss-atomizer repository.

Start your dev setup

Run your build setup as configured in your project’s package.json.

npm run dev

Begin using Atomizer

Add the generated PostCSS CSS to your template, then start adding Atomizer classes to your markup.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="/dist/main.css" />
    </head>
    <body>
        <h1 class="Fw(b) Fz(2rem)">Welcome!</h1>
    </body>
</html>