analyze-usage

Analyze TailwindCSS Usage

This command analyzes your TailwindCSS usage patterns across your codebase to identify optimization opportunities, unused utilities, and usage statistics.

What This Command Does

1. Usage Pattern Analysis

   • Scans all template files for TailwindCSS class usage
   • Identifies most and least used utility patterns
   • Generates usage frequency reports
   • Detects potential optimization opportunities

2. Bundle Size Analysis

   • Analyzes generated CSS bundle size
   • Identifies largest utility categories
   • Compares before/after optimization results
   • Tracks bundle size over time

3. Code Quality Insights

   • Identifies overly complex utility combinations
   • Suggests component extraction opportunities
   • Detects inconsistent utility usage patterns
   • Highlights potential refactoring opportunities

4. Performance Recommendations

   • Suggests safelist optimizations
   • Identifies unused CSS that can be purged
   • Recommends content path improvements
   • Provides bundle optimization suggestions

Usage Examples

Basic Usage Analysis

# Analyze utility usage in all template files
grep -r "class[Name]*=" src/ --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" | \
sed -E 's/.*class[Name]*=["'\''`]([^"'\''`]*)["'\''`].*/\1/' | \
tr ' ' '\n' | \
sort | uniq -c | sort -nr > tailwind-usage-report.txt

# View top 20 most used utilities
head -20 tailwind-usage-report.txt

# View least used utilities
tail -20 tailwind-usage-report.txt

Advanced Pattern Analysis

# Find all TailwindCSS classes in codebase
find src -name "*.{js,jsx,ts,tsx,vue,html}" -exec grep -l "class" {} \; | \
xargs grep -o "class[Name]*=['\"][^'\"]*['\"]" | \
sed -E 's/.*class[Name]*=["'\''`]([^"'\''`]*)["'\''`].*/\1/' | \
tr ' ' '\n' | \
grep -E '^[a-zA-Z]' | \
sort | uniq -c | sort -nr

Component Complexity Analysis

# Find components with many utility classes (potential extraction candidates)
find src/components -name "*.{jsx,tsx}" -exec sh -c '
  for file do
    count=$(grep -o "class[Name]*=['\"][^'\"]*['\"]" "$file" | \
            sed -E "s/.*class[Name]*=[\"\'\`]([^\"\'\`]*)[\"\'\`].*/\1/" | \
            tr " " "\n" | wc -l)
    echo "$count $file"
  done
' sh {} + | sort -nr | head -10