@frontfriend/tailwind

Design token management for Tailwind CSS. Seamlessly integrate your FrontFriend design system with Tailwind.

Features

• 🎨 Design Tokens: Automatically sync colors, fonts, and animations from FrontFriend
• 🌓 Dark Mode: Built-in support for light and dark themes
• ⚡ Performance: 7-day cache with automatic refresh
• 🔧 Framework Support: Works with Next.js, Vite, React, Vue, and vanilla JS
• 📦 Component Configs: Access design system component configurations
• 🛠️ TypeScript: Full TypeScript support with type definitions
• 🏗️ CLI Tools: Manage tokens and download components

Installation

npm install @frontfriend/tailwind

Quick Start

1. Create Configuration File

Create a frontfriend.config.js in your project root:

module.exports = {
  'ff-id': 'your-frontfriend-id'
}

2. Initialize Design Tokens

npx frontfriend init

This fetches your design tokens from FrontFriend and caches them locally.

3. Configure Tailwind

Add the plugin to your tailwind.config.js:

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
  plugins: [
    require('@frontfriend/tailwind')()
  ]
}

Framework Integration

Vite Plugin

For Vite projects (React, Vue, etc.):

// vite.config.js
import { defineConfig } from 'vite';
import frontfriend from '@frontfriend/tailwind/vite';

export default defineConfig({
  plugins: [
    frontfriend(),
    // ... other plugins
  ]
});

Next.js Plugin

For Next.js projects:

// next.config.js
const frontfriend = require('@frontfriend/tailwind/next');

module.exports = frontfriend({
  // Your Next.js config
});

Usage

Design Tokens

Once configured, use your design tokens as Tailwind utilities:

<!-- Semantic tokens -->
<div class="bg-brand-mid text-brand-strong">
  Semantic colors
</div>

<!-- Animations -->
<div class="animate-fadeIn">
  Animated content
</div>

CLI Commands

Initialize/Update Tokens

npx frontfriend init [options]

Options:
  --force    Force refresh even if cache is valid

Check Status

npx frontfriend status

Shows current configuration and cache status.

Download Components

npx frontfriend download <components...> [options]

Options:
  -f, --framework <framework>  Framework to download for (react/vue)
  -o, --output <path>          Output directory for components
  --overwrite                  Overwrite existing files

Examples:
  npx frontfriend download button card          # Download specific components
  npx frontfriend download all -f react         # Download all React components
  npx frontfriend download all -f vue -o ./src  # Download all Vue components to src/

Clean Cache

npx frontfriend clean

Removes cached design tokens.

Configuration

Plugin Options

require('@frontfriend/tailwind')({
  // Enable verbose logging
  verbose: true,
  
  // Extend Tailwind colors (merged with FrontFriend colors)
  extendColors: {
    custom: '#FF0000'
  },
  
  // Extend animations
  extendAnimations: {
    spin: 'spin 1s linear infinite'
  },
  
  // Content paths for PurgeCSS
  content: ['./src/**/*.{js,jsx,ts,tsx,vue}']
})

Configuration File

The frontfriend.config.js file supports both CommonJS and ES modules:

// CommonJS
module.exports = {
  'ff-id': 'your-frontfriend-id'
};

// ES Module
export default {
  'ff-id': 'your-frontfriend-id'
};

TypeScript

Full TypeScript support is included:

import plugin from '@frontfriend/tailwind';
import { cn } from '@frontfriend/tailwind/lib/react/utils';
import type { PluginOptions } from '@frontfriend/tailwind';

const options: PluginOptions = {
  verbose: true
};

Troubleshooting

Cache not found

npx frontfriend init

Cache expired

npx frontfriend init --force

ff-id not found

Ensure your frontfriend.config.js includes:

module.exports = {
  'ff-id': 'your-frontfriend-id'
};

Components not downloading

1. Check your ff-id is correct
2. Ensure you have access to the components
3. Try specifying framework: npx frontfriend download button -f react

License

This is proprietary software. Usage is restricted to licensed FrontFriend clients only. See LICENSE file for details.

© 2025 FrontFriend. All rights reserved.