@tokiforge/tailwind

Tailwind CSS integration for TokiForge design tokens (v1.1.2).

Installation

npm install @tokiforge/tailwind@^1.1.2 @tokiforge/core@^1.1.2 tailwindcss

Usage

Option 1: Generate tailwind.config.js

npx tokiforge tailwind:generate

Or programmatically:

import { generateTailwindConfigFile } from '@tokiforge/tailwind';

const config = generateTailwindConfigFile({
  tokensPath: './tokens.json',
  prefix: 'hf',
  useCSSVariables: true,
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
});

// Write to tailwind.config.js
import { writeFileSync } from 'fs';
writeFileSync('tailwind.config.js', config);

Option 2: Use in tailwind.config.js

import { generateTailwindConfig } from '@tokiforge/tailwind';

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: generateTailwindConfig({
      tokensPath: './tokens.json',
      prefix: 'hf',
      useCSSVariables: true,
    }).theme.extend,
  },
  plugins: [],
};

Options

• tokensPath: Path to your tokens file (JSON or YAML)
• tokens: Design tokens object (alternative to tokensPath)
• prefix: CSS variable prefix (default: 'hf')
• useCSSVariables: Use CSS variables in Tailwind config (default: true)
• themeMappings: Custom theme key mappings

Example

Given tokens.json:

{
  "color": {
    "primary": { "value": "#7C3AED" },
    "secondary": { "value": "#06B6D4" }
  },
  "spacing": {
    "sm": { "value": "8px" },
    "md": { "value": "16px" }
  }
}

Generates Tailwind config:

{
  theme: {
    extend: {
      colors: {
        primary: 'var(--hf-color-primary)',
        secondary: 'var(--hf-color-secondary)',
      },
      spacing: {
        sm: 'var(--hf-spacing-sm)',
        md: 'var(--hf-spacing-md)',
      },
    },
  },
}

Then use in your components:

<div className="bg-primary p-md">
  Content
</div>