tailwind-analyze

A CLI tool that finds repeated utility class patterns in your Tailwind CSS codebase using frequent pattern mining (FP-Growth).

Tailwind's philosophy is "utility-first" — you're supposed to repeat flex items-center 498 times across your codebase and feel good about it. The docs literally tell you not to abstract prematurely. And they're right! Until they're not.

This tool doesn't judge. It just counts. And then it tells you that 56 of your elements independently converged on the exact same 4-class combination, which is not a coincidence — it's a component that doesn't know it's a component yet.

Install

npx tailwind-analyze .

That's it. Zero dependencies. No build step. No config. Works on any repo with .tsx, .jsx, .html, .vue, .svelte, or .astro files.

What it does

Scans your source files for class / className attributes, groups the utility classes per element, then runs FP-Growth (the algorithm behind Amazon's "frequently bought together") to find which class combinations appear together most often.

You get two things:

1. Prime Class Frequency Table — how often each individual utility class appears across all elements.

  Class            Count  % of groups
  flex               500        25.7%
  items-center       253        13.0%
  text-sm            248        12.8%
  flex-col           201        10.3%

2. Suggested Composites — groups of classes that frequently co-occur, ranked by how many class attribute tokens you'd eliminate by extracting them.

  #1  flex items-center
      Frequency: 237 groups | Size: 2 classes | Est. saving: 471 attrs

  #2  flex flex-col
      Frequency: 199 groups | Size: 2 classes | Est. saving: 395 attrs

  #3  flex items-center justify-center
      Frequency: 82 groups | Size: 3 classes | Est. saving: 242 attrs

Options

npx tailwind-analyze [directory] [options]

--min-support <n>   Minimum elements sharing a pattern (default: 3)
--min-set-size <n>  Minimum classes in a suggestion (default: 2)
--max-set-size <n>  Maximum classes in a suggestion (default: 8)
--top <n>           Number of suggestions to show (default: 20)
--prime-limit <n>   Number of prime classes to show (default: 30)
--json              Output as JSON

Examples

# Analyze current directory
npx tailwind-analyze .

# Only show patterns shared by 10+ elements
npx tailwind-analyze ./src --min-support 10

# Get the top 5 biggest wins
npx tailwind-analyze . --top 5

# Pipe JSON into other tools
npx tailwind-analyze . --json > report.json

How it works

1. Walks your source tree (skips node_modules, .next, dist, etc.)
2. Extracts class="..." and className="..." values via regex
3. Splits each attribute into individual utility classes (one "transaction" per element)
4. Builds an FP-tree from all transactions, sorted by descending frequency
5. Mines frequent itemsets via conditional pattern bases (recursive)
6. Ranks results by (frequency - 1) * set_size - 1 (estimated class attribute tokens saved)

The whole thing is ~300 lines of JS. No native binaries. No AST parsing. Just regex and a tree.

What to do with the results

That's between you and your codebase. Some options:

• Extract components — if 56 elements share the same 4 classes, maybe that's a <SectionHeading>
• Use @apply — create a composite class in your CSS (Tailwind supports this, even if they sigh about it)
• Do nothing — the report is informational. Sometimes duplication is fine. The tool just makes sure it's a choice, not an accident

Acknowledgments

Built with mild OCD and an FP-Growth implementation written from scratch at 2am.

Uses the same frequent itemset mining algorithm as market basket analysis in retail — except instead of "people who buy diapers also buy beer," it's "divs that use flex also use items-center." Same energy honestly.