Analyze and optimize Tailwind CSS output
Analyzes Tailwind CSS output and provides optimization recommendations for bundle size and performance.
/plugin marketplace add gopherguides/gopher-ai/plugin install tailwind@gopher-ai[--report|--fix]claude-sonnet-4-20250514If $ARGUMENTS is empty or not provided:
Analyze Tailwind CSS output and provide optimization recommendations.
Usage: /tailwind-optimize [options]
Examples:
/tailwind-optimize - Quick analysis/tailwind-optimize --report - Generate detailed report/tailwind-optimize --fix - Apply optimizationsWhat this command analyzes:
@source paths cover all templatesProceed with optimization analysis.
If $ARGUMENTS is provided:
Parse arguments:
Locate Tailwind CSS files:
# Find input CSS (with @import "tailwindcss")
grep -rl '@import.*tailwindcss' --include="*.css" . 2>/dev/null
# Find output CSS
ls **/output.css dist/**/*.css build/**/*.css public/**/*.css 2>/dev/null
# Build without minification
npx @tailwindcss/cli -i input.css -o /tmp/dev-output.css 2>&1
# Measure size
wc -c /tmp/dev-output.css
# Build with minification
npx @tailwindcss/cli -i input.css -o /tmp/prod-output.css --minify 2>&1
# Measure size
wc -c /tmp/prod-output.css
# Gzip size estimate
gzip -c /tmp/prod-output.css | wc -c
| Size Category | Range | Assessment |
|---|---|---|
| Excellent | < 10KB gzipped | Highly optimized |
| Good | 10-25KB gzipped | Normal for most apps |
| Acceptable | 25-50KB gzipped | Consider optimization |
| Large | > 50KB gzipped | Needs optimization |
Most Tailwind projects should ship < 10KB CSS gzipped.
# Count template files
fd -e html -e htm -e templ -e jsx -e tsx -e vue -e svelte -d 5 2>/dev/null | wc -l
# Show file types
fd -e html -e htm -e templ -e jsx -e tsx -e vue -e svelte -d 5 2>/dev/null | sed 's/.*\.//' | sort | uniq -c | sort -rn
Read the CSS input file and extract @source directives:
grep '@source' input.css
For each @source pattern, verify files are found:
# Example: @source "./src/**/*.{js,jsx}"
fd -e js -e jsx ./src 2>/dev/null | wc -l
Coverage issues to check:
| Issue | Symptom | Fix |
|---|---|---|
| Missing source | Classes not generated | Add @source for directory |
| Overly broad | Too much CSS generated | Use specific globs |
| Wrong path | Classes missing | Verify path exists |
# Extract class names from templates
grep -ohr 'class="[^"]*"' --include="*.html" --include="*.templ" --include="*.jsx" --include="*.tsx" . 2>/dev/null | \
sed 's/class="//g' | sed 's/"//g' | tr ' ' '\n' | sort -u > /tmp/used-classes.txt
wc -l /tmp/used-classes.txt
# Extract class names from CSS
grep -oE '\.[a-zA-Z][a-zA-Z0-9_-]*' output.css | sed 's/\.//' | sort -u > /tmp/css-classes.txt
# Find classes in CSS but not in templates
comm -23 /tmp/css-classes.txt /tmp/used-classes.txt | head -50
Note: Some "unused" classes may be:
bg-${color}-500)Tailwind v4 generates many CSS variables. Check for bloat:
# Count CSS variables in output
grep -c -- '--' output.css
# List unused color variables
grep -oE '--color-[a-z]+-[0-9]+' output.css | sort -u | wc -l
| Category | Expected | If Higher |
|---|---|---|
| Color vars | 50-100 | Using full palette when subset would work |
| Spacing vars | 20-30 | Normal |
| Font vars | 5-10 | Normal |
| Animation vars | 10-20 | Normal |
If too many unused variables, consider:
@theme {
/* Only define colors you actually use */
--color-primary: oklch(0.6 0.2 250);
--color-secondary: oklch(0.5 0.02 250);
/* Don't rely on full Tailwind palette */
}
# Time a production build
time npx @tailwindcss/cli -i input.css -o output.css --minify 2>&1
| Build Time | Assessment |
|---|---|
| < 100ms | Excellent |
| 100-500ms | Good |
| 500ms-2s | Acceptable |
| > 2s | Consider optimization |
--watch mode is much faster## Tailwind CSS Optimization Report
**Generated:** [date]
**Project:** [path]
### Bundle Size
| Metric | Size | Assessment |
|--------|------|------------|
| Development | XXX KB | - |
| Production | XXX KB | [assessment] |
| Gzipped | XXX KB | [assessment] |
### Source Coverage
| Source Pattern | Files Found | Status |
|----------------|-------------|--------|
| `./src/**/*.jsx` | 45 | OK |
| `./templates/**/*.templ` | 12 | OK |
| `./components/**/*.html` | 0 | Warning: No files |
### Class Usage
| Metric | Count |
|--------|-------|
| Unique classes in templates | XXX |
| Classes in generated CSS | XXX |
| Potentially unused | XXX |
### CSS Variables
| Category | Count | Status |
|----------|-------|--------|
| Total variables | XXX | - |
| Color variables | XXX | [status] |
| Unused estimates | XXX | [status] |
### Build Performance
| Metric | Value |
|--------|-------|
| Build time | XXX ms |
| Incremental | XXX ms |
### Recommendations
**High Priority:**
1. [Critical optimizations]
**Medium Priority:**
2. [Helpful optimizations]
**Low Priority:**
3. [Nice-to-have optimizations]
### Quick Wins
```bash
# Commands to apply recommended optimizations
[commands]
## Step 8: Apply Optimizations (if --fix)
When `--fix` flag is present:
1. **Add missing @source** - For uncovered template directories
2. **Remove overly broad sources** - Replace `**/*` with specific patterns
3. **Update build scripts** - Add `--minify` for production
**Do NOT auto-fix:**
- Class removal (may break dynamic classes)
- Theme variable removal (may be used elsewhere)
- Source path reduction (may cause missing classes)
## Notes
- Always test after optimization changes
- Some "unused" CSS is intentional (resets, future features)
- Gzipped size matters most for production
- Use browser DevTools "Coverage" tab for runtime analysis
- Consider code-splitting CSS for large applications