Atomizer

esbuild

A simple guide to setup Atomizer with esbuild.

On this page

Install the plugin

An esbuild plugin is available as part of the atomizer-plugins package. Install the package in your project first.

npm i atomizer-plugins -D

Create your Atomizer config

Make sure Atomizer can find your NuxtJS files in your atomizer.config.js file.

module.exports = {
    content: [
        './src/**/*.{html,js}',
    ],
}

Update the config

Then configure your esbuild.config.js to add the plugin.

import { build } from 'esbuild';
import { esbuild } from 'atomizer-plugins';

const atomizer = esbuild({
    /* options */
    config: atomizerConfig,
    outfile: 'dist/atomizer.css',
});

build({
    // ... esbuild config
    plugins: [atomizer],
});

Configuration information and examples are available in the atomizer-plugins repository.

Start your build process

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

npm run dev

Begin using Atomizer

Add the generated Atomizer 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/atomizer.css" />
    </head>
    <body>
        <h1 class="Fw(b) Fz(2rem)">Welcome!</h1>
    </body>
</html>