Tailwind CSS Design Token Extraction

Tailwind Integration Features

Arbitrary Value Detection

Find arbitrary values like [#ff0000] or [16px] that bypass your Tailwind theme.

Theme Extraction

Extract design tokens from your tailwind.config.ts as the source of truth.

Class Analysis

Analyze class usage patterns and detect inconsistent utility combinations.

Custom Class Detection

Find custom CSS that could be replaced with Tailwind utilities.

@apply Scanning

Scan @apply directives for hardcoded values and unused utilities.

JIT Compatibility

Works with Tailwind JIT mode and v4 CSS-first configuration.

See it in action

buoy-cli

⚓ Scanning Tailwind usage...

Found 2,847 Tailwind class usages

Found 156 unique utility classes

WARNING 23 arbitrary values detected

├─ bg-[#3b82f6] → use bg-primary

├─ p-[14px] → use p-3.5

└─ text-[13px] → use text-sm

INFO 8 classes could use theme values

Configuration Example

buoy.config.mjs

// buoy.config.mjs
export default {
  // Path to your Tailwind config
  tailwind: './tailwind.config.ts',

  // Tailwind-specific options
  tailwindOptions: {
    // Warn on arbitrary values
    warnArbitrary: true,

    // Allow these arbitrary values
    allowArbitrary: [
      'text-\[inherit\]',
      'bg-\[transparent\]',
    ],

    // Extract theme as tokens
    extractTheme: true,
  },

  include: ['src/**/*.tsx'],
}

Arbitrary Values → Theme Values

✗ Before

<div class="bg-[#3b82f6] p-[14px] text-[13px]">
  Content
</div>

✓ After

<div class="bg-primary p-3.5 text-sm">
  Content
</div>