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>