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>