Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/tokenami/tokenami/llms.txt

Use this file to discover all available pages before exploring further.

The Tokenami CLI provides commands to initialize your project, generate stylesheets, and validate token usage.

​
Installation

The CLI is included with the tokenami package: 
npm install tokenami
# or
pnpm add tokenami
# or
yarn add tokenami

​
Available Commands

The CLI provides three main commands:
  • init - Initialize Tokenami in your project
  • check - Validate token usage and type safety
  • Default command - Generate CSS stylesheet from token usage

​
Default Command (Generate)

Generate a CSS stylesheet from your token usage.

​
Usage

tokenami [files] [options]

​
Arguments

​
files
string
Glob pattern for files to include. Overrides include from config.

​
Options

​
-c, --config
string
Path to a custom config file.Default: ./tokenami.config.{ts,js}
​
-o, --output
string
Output path for the generated CSS file.Default: public/tokenami.css
​
-w, --watch
boolean
Watch for file changes and rebuild automatically.
​
--minify
boolean
Minify the generated CSS output.

​
Examples

​
Basic Generation

Generate CSS using config file settings: 
tokenami

​
With Custom Config

Use a custom config file: 
tokenami --config ./config/tokens.ts

​
Custom Output Path

Generate CSS to a specific location: 
tokenami --output ./dist/styles.css

​
Watch Mode

Continuously watch for changes and regenerate: 
tokenami --watch

​
Minified Production Build

Generate minified CSS for production: 
tokenami --minify --output ./dist/tokenami.min.css

​
Override Include Pattern

Scan specific files instead of using config: 
tokenami "./src/**/*.tsx" --output ./public/tokenami.css

​
Watch with Custom Config and Minify

Combine multiple options: 
tokenami \
  --config ./config/tokens.ts \
  --output ./dist/styles.css \
  --minify \
  --watch

​
How It Works

The CLI:
  1. Loads Configuration: Reads your tokenami.config.{ts,js} file
  2. Scans Files: Uses include patterns to find all files using tokens
  3. Extracts Tokens: Parses token properties and values from your code
  4. Generates CSS: Creates a CSS file with:
    • CSS custom properties for your theme
    • Responsive variants
    • Selector variants
    • Global styles
    • Keyframe animations
    • Component styles from css.compose()
  5. Optimizes Output: Processes with Lightning CSS for browser compatibility
  6. Writes File: Outputs the final CSS to the specified path

​
Generated CSS Structure

The generated CSS follows this structure: 
/* CSS Layers */
@layer tokenami.reset, tokenami.tokens, tokenami.components, tokenami.utilities;

/* Theme tokens */
@layer tokenami.tokens {
  :root {
    --color_primary: #007bff;
    --space_4: 1rem;
    /* ... */
  }
  
  /* Theme modes */
  [data-theme="dark"] {
    --color_primary: #66b3ff;
    /* ... */
  }
}

/* Global styles */
@layer tokenami.reset {
  * {
    box-sizing: border-box;
  }
  /* ... */
}

/* Keyframe animations */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Component styles from css.compose() */
@layer tokenami.components {
  .tk-abc123 {
    --padding: var(--space_3);
    padding: var(--padding);
  }
}

/* Responsive variants */
@media (min-width: 768px) {
  .tk-abc123 {
    --md_padding: var(--space_4);
    padding: var(--md_padding);
  }
}

/* Selector variants */
.tk-abc123:hover {
  --hover_background-color: var(--color_primary-dark);
  background-color: var(--hover_background-color);
}

​
Including the CSS

After generation, include the CSS in your application:

​
HTML

<link rel="stylesheet" href="/tokenami.css" />

​
Next.js

app/layout.tsx
import './tokenami.css';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

​
Vite

src/main.tsx
import './tokenami.css';

​
Remix

app/root.tsx
import styles from './tokenami.css';

export const links = () => [
  { rel: 'stylesheet', href: styles }
];

​
CI/CD Integration

Integrate into your build pipeline:

​
package.json Scripts

{
  "scripts": {
    "dev": "tokenami --watch & next dev",
    "build": "tokenami --minify && next build",
    "tokenami:generate": "tokenami",
    "tokenami:watch": "tokenami --watch"
  }
}

​
Pre-commit Hook

package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "tokenami --minify"
    }
  }
}

​
Environment Variables

The CLI respects these environment variables:
  • NODE_ENV - Affects browserslist target selection
  • BROWSERSLIST_ENV - Override browserslist environment
NODE_ENV=production tokenami --minify

​
Performance

The CLI is optimized for large codebases:
  • Fast scanning: Uses fast-glob for file discovery
  • Parallel processing: Processes files concurrently
  • Smart caching: Only rebuilds when files change in watch mode
  • Lightning CSS: Uses Rust-based CSS processing for speed
Typical performance:
  • Small project (under 100 files): ~1s
  • Medium project (100-500 files): 1-3s
  • Large project (500+ files): 3-10s

​
Troubleshooting

​
Config Not Found

# Ensure config file exists
ls tokenami.config.ts

# Or specify path explicitly
tokenami --config ./config/tokenami.config.ts

​
No Tokens Found

# Check include patterns in config
# Ensure files match the pattern
tokenami "./src/**/*.tsx" --output ./test.css

​
TypeScript Config Errors

# Ensure your tsconfig.json is valid
npx tsc --noEmit

​
Related

Build docs developers (and LLMs) love

Get started for freeTalk to us