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.yaml

# .buoy.yaml

# 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>

Free PDF

Migrating from arbitrary values to theme tokens?

Step-by-step playbook for cleaning up your Tailwind codebase. Includes regex patterns and automation tips.

No spam. Unsubscribe anytime.