@lawpath-tech/tailwind-config

LawPath Tailwind CSS configuration with design tokens and automated injection script.

Features

• 🎨 44 Design System Colors - Complete LawPath color palette
• 📱 5 Responsive Breakpoints - Mobile-first responsive design
• 🔧 Smart Config Injection - Automatically merges with existing configs
• 💾 Backup Protection - Creates backups before making changes
• 🔄 Conflict Resolution - Existing project tokens take priority

Installation

npm install -D @lawpath-tech/tailwind-config

Usage

NPX Command (Recommended)

Inject LawPath design tokens into your project:

# In your project root
npx @lawpath-tech/tailwind-config

# Or specify a target directory
npx @lawpath-tech/tailwind-config ./path/to/project

Package Script

# Run from the package directory
pnpm inject-config [target-path]

What Gets Injected

Colors

• Primary: #1A81D5
• Secondary: #2CCAE2
• Error: #CD133F
• Success: #16987C
• Warning: #DB8300
• Upgrade: #993DDC
• Neutral: #697BA5
• Content: dark, medium, light
• Surface: dark0, dark1, dark2, light0, light1, light2
• Overlay: light, dark

Breakpoints

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

Smart Merging

The injection script intelligently merges LawPath tokens with your existing config:

✅ Preserves existing tokens - Your custom colors/breakpoints are kept
✅ Adds new LawPath tokens - Only missing tokens are added
✅ Creates automatic backups - Original config is backed up
✅ Maintains structure - Existing content, plugins, etc. are preserved

Example

Before:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#0066cc',
        primary: '#custom-primary', // This will be kept
      }
    }
  }
}

After:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#0066cc',         // ✅ Preserved
        primary: '#custom-primary',      // ✅ Preserved (takes priority)
        secondary: '#2CCAE2',           // ➕ Added from LawPath
        error: '#CD133F',               // ➕ Added from LawPath
        // ... 40+ more LawPath colors
      },
      screens: {
        sm: '640px',                    // ➕ Added from LawPath
        md: '768px',                    // ➕ Added from LawPath
        // ... more breakpoints
      }
    }
  }
}

Manual Usage

You can also import the design tokens directly:

import { colors, breakpoints } from '@lawpath-tech/tailwind-config'

export default {
  theme: {
    extend: {
      colors,
      screens: {
        sm: `${breakpoints.sm}px`,
        md: `${breakpoints.md}px`,
        lg: `${breakpoints.lg}px`,
        xl: `${breakpoints.xl}px`,
        '2xl': `${breakpoints['2xl']}px`,
      }
    }
  }
}

Development

# Build the package
pnpm build

# Test injection locally
pnpm inject-config ./test-project

# Publish
pnpm release

Requirements

• Node.js 14+
• Tailwind CSS 3.0+
• TypeScript (for .ts configs)

License

MIT