Tailwind Style Validator

# Scan all content and layouts
node .claude/skills/tailwind-style-validator/tailwind-validate.js

# Scan specific file
node .claude/skills/tailwind-style-validator/tailwind-validate.js --path content/docs/getting-started.md

# Scan with detailed output
node .claude/skills/tailwind-style-validator/tailwind-validate.js --verbose

Validation Checks

1. Class Extraction

• Extracts all class="..." attributes from content and layout files
• Parses Tailwind classes, Hextra classes (hx:), and custom classes

2. Hugo Stats Verification

• Checks if classes are included in hugo_stats.json
• Identifies classes that may be purged during build

3. Hextra Conflict Check

• Detects potential conflicts with Hextra's hx: prefixed classes
• Warns about classes that may override Hextra styles

4. Common Issues Detection

• Invalid responsive prefixes
• Deprecated Tailwind v3 syntax
• Missing PostCSS processing

Report Format

# Tailwind CSS Validation Report

## Scan Summary
- Files scanned: XX
- Total classes found: XX
- Tailwind classes: XX
- Hextra classes (hx:): XX
- Unknown classes: XX

## Issues Found

### Missing from hugo_stats.json
- `custom-class` in content/docs/page.md:15

### Potential Hextra Conflicts
- `sr-only` may conflict with `hx:sr-only`

### Recommendations
- Run `hugo --gc` to regenerate stats
- Run `npm run build:css` to rebuild CSS

## Build Verification
- CSS build: Pending
- Hugo build: Pending

Common Tailwind Patterns

Recommended Patterns

/* Gradients */
bg-gradient-to-r from-blue-500 to-purple-600

/* Text Gradient */
bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent

/* Animations */
animate-pulse animate-bounce animate-spin

/* Transforms */