Remix

A simple guide to setup Atomizer with Remix.

Create a new project

If you do not have a project setup already, you can create a new one using Remix’s Getting Started page.

npx create-remix@latest my-app cd my-app 

Install the PostCSS plugin

Remix supports PostCSS for CSS integration. Therefore, install the Atomizer PostCSS plugin npm package into your project.

npm install postcss-atomizer -D 

Create your Atomizer config

Create an ./atomizer.config.js config file so that Atomizer can parse your Remix files.

module.exports = { content: [ './app/**/*.{js,ts,jsx,tsx}', ], } 

Create the PostCSS config

Create the ./postcss.config.cjs file to configure the Atomizer plugin. Make sure to enable the postcss: true flag in your ./remix.config.js file.

const atomizer = require('postcss-atomizer'); module.exports = { plugins: [ atomizer({ config: './atomizer.config.js', }), ], }; 

Start your build process

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

npm run dev 

Begin using Atomizer

Start adding Atomizer classes to your code base, an example ./app/routes/_index.jsx file.

export default function Index() { return ( <h1 className="Fw(b) Fz(2rem)">Welcome to Remix</h1>  ); }