Installation

Install emilyCSS, wire outputs into your app, and verify everything is generated correctly.

1. Install and initialize

Start by installing the package and creating a baseline config. The init command is safe to run in an existing project and gives you a predictable starting point.

npm install emily-css
npx emily-css init

2. Set output and tooling paths

Keep a stable CSS output path and enable manifest/IntelliSense when you need machine-readable tooling data. New init projects commonly use the same path for both dev and production CSS.

{
  "output": {
    "css": "dist/emily.css",
    "fullCss": "dist/emily.css"
  },
  "manifest": true,
  "intellisense": {
    "enabled": true,
    "output": "dist/emily.intellisense.json"
  }
}

3. Build and watch

npx emily-css build
npx emily-css watch
npx emily-css watch --prod

Use build in CI/release, and watch in local development. Use watch --prod only when you explicitly want purge + minify on each file change.

4. Link the stylesheet

export default defineNuxtConfig({
  app: {
    head: {
      link: [{ rel: 'stylesheet', href: '/dist/emily.css' }]
    }
  }
})

If you are not using Nuxt, add the same file with a normal <link> tag in your app shell.

Quick verification checklist

output.css exists and changes when token/config inputs change.
output.fullCss updates when running watch mode.
Manifest and IntelliSense files are present when enabled.
The docs Utilities page reflects your latest generated classes.

Common setup mistakes

Forgetting to include template paths in purge.sourceGlobs.
Writing generated files into ignored or non-public locations by mistake.
Running docs without regenerating manifest and IntelliSense after config edits.
Mixing manual color overrides with generated token utilities across pages.

Next step

Continue to Configuration for a full reference of every config key.