JosiahSiegel/tailwindcss-debugging
plugins/tailwindcss-master/skills/tailwindcss-debugging/SKILL.md
Tailwind CSS debugging and troubleshooting common issues. PROACTIVELY activate for: (1) classes not applying / no styles in browser, (2) JIT mode not picking up dynamic class names (string concatenation), (3) v3-to-v4 migration errors, (4) PostCSS configuration issues, (5) IntelliSense not autocompleting in VS Code, (6) production build missing classes (purge/content config), (7) CSS variable conflicts, (8) specificity issues with @layer, (9) prefix conflicts with other CSS frameworks, (10) HMR not updating styles. Provides: troubleshooting decision tree, dynamic-class allowlist patterns, content-config templates, IntelliSense setup, and PostCSS debugging steps.
$ install --global
skillsauthnpx skillsauth add JosiahSiegel/claude-plugin-marketplace tailwindcss-debuggingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 26, 2026, 7:42 AM92.8s2 files scanned
SKILL.md
- name:
- tailwindcss-debugging
- description:
- |
- PROACTIVELY activate for:
- (1) classes not applying / no styles in browser, (2) JIT mode not picking up dynamic class names (string concatenation), (3) v3-to-v4 migration errors, (4) PostCSS configuration issues, (5) IntelliSense not autocompleting in VS Code, (6) production build missing classes (purge/content config), (7) CSS variable conflicts, (8) specificity issues with @layer, (9) prefix conflicts with other CSS frameworks, (10) HMR not updating styles.
- Provides:
- troubleshooting decision tree, dynamic-class allowlist patterns, content-config templates, IntelliSense setup, and PostCSS debugging steps.
Tailwind CSS Debugging & Troubleshooting
Common Issues & Solutions
1. Styles Not Applying
Check Content Detection
v4 automatically detects content, but if styles are missing:
/* Explicitly specify sources */
@import "tailwindcss";
@source "./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}";
Verify Class Names
<!-- WRONG - Dynamic class won't be detected -->
<div class={`text-${color}-500`}>
<!-- CORRECT - Use complete class names -->
<div class={color === 'blue' ? 'text-blue-500' : 'text-red-500'}>
Check Build Process
# Restart dev server
npm run dev
# Clear cache and rebuild
rm -rf node_modules/.vite
npm run build
2. v4 Migration Issues
PostCSS Plugin Changed
// OLD (v3)
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
// NEW (v4)
export default {
plugins: {
'@tailwindcss/postcss': {}
}
}
Configuration Moved to CSS
/* v4 - Configure in CSS, not JS */
@import "tailwindcss";
@theme {
--color-primary: oklch(0.6 0.2 250);
}
Dark Mode Variant
/* v4 - Add if using selector strategy */
@custom-variant dark (&:where(.dark, .dark *));
3. Classes Being Overridden
Check Specificity
/* Browser DevTools: Inspect element → Styles panel */
/* Look for crossed-out styles */
Solutions
<!-- Use !important (last resort) -->
<div class="!mt-0">
<!-- Or increase specificity with variants -->
<div class="[&]:mt-0">
Check Import Order
/* Your custom CSS should come after Tailwind */
@import "tailwindcss";
@import "./custom.css"; /* After Tailwind */
4. Typography Plugin Issues
Styles Not Applied
/* Ensure plugin is loaded */
@plugin "@tailwindcss/typography";
Utilities Overridden by Prose
<!-- Use element modifiers -->
<article class="prose prose-h1:text-4xl prose-a:text-blue-600">
<!-- Or escape prose entirely -->
<article class="prose">
<div class="not-prose">
<CustomComponent />
</div>
</article>
5. Forms Plugin Issues
Styles Not Applied to Plain Inputs
<!-- Forms plugin only styles inputs with type attribute -->
<input type="text" /> <!-- ✓ Styled -->
<input /> <!-- ✗ Not styled -->
Using Class Strategy
@plugin "@tailwindcss/forms" {
strategy: class;
}
<!-- Now explicitly opt-in -->
<input type="text" class="form-input" />
Debugging Tools
VS Code Extension
# Install Tailwind CSS IntelliSense
code --install-extension bradlc.vscode-tailwindcss
Features:
- Autocomplete for class names
- Hover previews showing CSS
- Linting for errors
- Color decorators
Debug Screens Plugin
npm install -D @tailwindcss/debug-screens
@plugin "@tailwindcss/debug-screens";
<!-- Shows current breakpoint in corner -->
<body class="debug-screens">
Browser DevTools
- Inspect Element → See computed styles
- Styles Panel → See which rules apply
- Filter → Search for Tailwind classes
- Computed Tab → See final computed values
Check Generated CSS
# Output CSS to file for inspection
npx tailwindcss -o output.css --content './src/**/*.{html,js}'
# With verbose logging
DEBUG=tailwindcss:* npm run build
v4 Specific Debugging
Check Plugin Loading
# Look for plugin-related errors
npm run build 2>&1 | grep -i plugin
Verify CSS Variable Output
/* In browser DevTools, check :root for variables */
:root {
--color-blue-500: oklch(...);
--spacing-4: 1rem;
}
Content Detection Issues
/* Add explicit sources if auto-detection fails */
@source "./src/**/*.tsx";
@source "./components/**/*.tsx";
/* Exclude paths */
@source not "./src/generated/**";
Common Error Messages
"Cannot find module '@tailwindcss/postcss'"
npm install -D @tailwindcss/postcss
"Unknown at-rule @theme"
Using v3 tooling with v4 syntax. Update your build setup:
npm install -D tailwindcss@latest @tailwindcss/postcss@latest
"Class 'X' doesn't exist"
Dynamic class generation issue:
// BAD
const classes = `bg-${dynamic}-500`
// GOOD
const colorMap = {
primary: 'bg-blue-500',
danger: 'bg-red-500'
}
const classes = colorMap[dynamic]
"Styles not updating in development"
# Restart dev server
npm run dev
# Clear Vite cache
rm -rf node_modules/.vite
# Clear Next.js cache
rm -rf .next
Performance Debugging
Large CSS Output
# Check CSS file size
ls -lh dist/assets/*.css
# If too large, check for:
# 1. Dynamic class generation
# 2. Unnecessary safelisting
# 3. Unused plugins
Slow Builds
# Time the build
time npm run build
# v4 should be very fast
# Full build: <1s
# Incremental: microseconds
Debugging Checklist
Initial Setup
- [ ] Correct import:
@import "tailwindcss"; - [ ] PostCSS plugin:
@tailwindcss/postcss(nottailwindcss) - [ ] Vite plugin:
@tailwindcss/vite(if using Vite) - [ ] CSS file imported in entry point
- [ ] Development server restarted after changes
Styles Not Applying
- [ ] Class name is complete (no dynamic generation)
- [ ] File is in content path
- [ ] Browser cache cleared
- [ ] No CSS specificity conflicts
- [ ] Check DevTools for overridden styles
After Migration
- [ ] tailwind.config.js removed or converted
- [ ] @theme directive used for customization
- [ ] PostCSS config updated
- [ ] Dark mode variant added if using selector strategy
- [ ] Plugins updated to v4-compatible versions
Production Issues
- [ ] NODE_ENV=production
- [ ] Build output includes styles
- [ ] CSS file linked correctly
- [ ] No dynamic class generation issues
Getting Help
Create Minimal Reproduction
# Create fresh project
npm create vite@latest repro -- --template react-ts
cd repro
npm install -D tailwindcss @tailwindcss/vite
# Add minimal code that shows the issue
# Share on GitHub Issues or Discord
Resources
- Official Docs
- GitHub Issues
- Tailwind CSS Discord
- Stack Overflow
Related Skills
JosiahSiegel/ml-training
development
VerifiedTrustedCommunity
This skill should be used when the user asks to train, debug, scale, or improve ML models. PROACTIVELY activate for: (1) PyTorch, TensorFlow/Keras, JAX, Flax, Hugging Face Trainer/Accelerate training loops, (2) distributed training, DDP/FSDP/DeepSpeed, TPU/GPU setup, (3) mixed precision AMP/bf16, gradient accumulation, checkpointing, seeding, (4) overfitting, imbalance, loss functions, regularization, LR schedules, warmup, (5) memory optimization, gradient checkpointing, offloading, quantization-aware training. Provides: reproducible training best practices across deep learning and classical ML.
38SKILL.mdUpdated May 28, 2026
JosiahSiegel/ml-mlops
development
VerifiedTrustedCommunity
This skill should be used when the user asks to productionize, track, version, govern, monitor, or automate ML systems. PROACTIVELY activate for: (1) MLflow, Weights & Biases, Neptune, Comet, ClearML experiment tracking, (2) model registry, model versioning, artifact lineage, reproducibility, (3) Kubeflow, SageMaker Pipelines, Vertex AI Pipelines, Azure ML pipelines, Databricks workflows, (4) CI/CD, continuous training/evaluation, A/B tests, canary/shadow deployments, (5) drift detection, model monitoring, data validation, responsible AI governance. Provides: end-to-end MLOps architecture and operational safeguards.
38SKILL.mdUpdated May 28, 2026
JosiahSiegel/ml-inference-optimization
development
VerifiedTrustedCommunity
This skill should be used when the user asks to optimize, export, serve, compress, or accelerate ML inference. PROACTIVELY activate for: (1) latency, throughput, p95/p99, batching, concurrency, KV cache, memory, or cost issues, (2) quantization INT8/INT4, GPTQ, AWQ, bitsandbytes, pruning, sparsity, distillation, (3) ONNX export, ONNX Runtime, TensorRT, TorchScript, torch.compile, XLA, OpenVINO, Core ML, TFLite, (4) Triton, TorchServe, TF Serving, BentoML, Seldon, KServe configuration, (5) edge deployment, CPU/GPU/TPU/Inferentia serving. Provides: hardware-aware inference optimization and safe benchmarking.
38SKILL.mdUpdated May 28, 2026
JosiahSiegel/ml-hyperparameter-tuning
testing
VerifiedTrustedCommunity
This skill should be used when the user asks to tune hyperparameters, run sweeps, optimize search spaces, or use AutoML. PROACTIVELY activate for: (1) Optuna, Ray Tune, FLAML, AutoGluon, Hyperopt, Nevergrad, KerasTuner, W&B sweeps, (2) grid search, random search, Bayesian optimization, TPE, Gaussian processes, evolutionary search, (3) ASHA, Hyperband, successive halving, multi-fidelity optimization, population-based training, (4) learning-rate finder, batch-size search, early stopping, pruning, (5) reproducible sweep design and experiment analysis. Provides: budget-aware hyperparameter search strategy.
38SKILL.mdUpdated May 28, 2026