tailwindcss-debugging
Resolve Tailwind CSS styling problems with structured troubleshooting for classes that won't apply, dynamic class generation failures, and version migration conflicts. Get decision trees, configuration templates, and debugging steps for content detection, IntelliSense setup, and build cache issues.
Tailwind CSS Debugging helps you fix classes not applying by walking through content detection, dynamic class patterns, and build configuration.
AI-generated summary based on this skill's SKILL.md
Install
JosiahSiegel/claude-plugin-marketplace/tailwindcss-debugging · repository language: Shell
git clone https://github.com/JosiahSiegel/claude-plugin-marketplace
cp -r claude-plugin-marketplace/plugins/tailwindcss-master/skills/tailwindcss-debugging ~/.claude/skills/tailwindcss-debuggingnpx skillfed install JosiahSiegel/claude-plugin-marketplace/tailwindcss-debuggingFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Why are my Tailwind CSS classes not working in the browser?
tailwindcss-debugging helps you systematically resolve Tailwind classes that fail to render. Start by verifying your content configuration includes all template files (HTML, JSX, Vue, etc.). Check that PostCSS is properly configured with the Tailwind plugin. Clear your build cache and restart the dev server. Inspect the generated CSS file to confirm classes exist. If using dynamic class names, ensure they're not split across strings—Tailwind's content scanner can't detect `'text-' + color` patterns. Review browser DevTools to see if styles are blocked by specificity conflicts or missing from the stylesheet entirely.
What are the main tailwind v4 migration errors and how do I fix them?
tailwindcss-debugging addresses v3-to-v4 upgrade issues including configuration syntax changes, new CSS variable system, and plugin API updates. The config file structure changed from `module.exports` to ES modules in many setups. CSS variable names shifted from `--tw-*` to new namespacing. Update your `tailwind.config.js` to match v4 schema, migrate custom theme values to the new format, and reinstall dependencies. Check for deprecated plugins and update them to v4-compatible versions. Run your build and watch for console errors pointing to specific config keys that need adjustment.
How do I troubleshoot tailwind CSS when styles are not applying?
tailwindcss-debugging provides structured troubleshooting steps: first verify content paths in `tailwind.config.js` match your actual file structure and include correct glob patterns. Confirm PostCSS processes your CSS file before output. Check that your HTML/template file imports the compiled CSS. Inspect the browser's Network tab to ensure the CSS file loads. Use DevTools to verify the class exists in the stylesheet—if missing, the content scanner didn't find it. For HMR issues, restart your dev server. For production builds, ensure your build step runs Tailwind before deployment and that purging isn't removing needed classes.
Why isn't tailwindcss-debugging detecting my dynamic class names?
tailwindcss-debugging explains that Tailwind's content scanner uses static analysis and cannot detect dynamically constructed class strings like `'text-' + size` or template literals with variables. Instead, use explicit class lists: write `className={size === 'lg' ? 'text-lg' : 'text-sm'}` or define a mapping object with complete class strings. Alternatively, use the `safelist` option in your config to force-include classes that can't be statically detected. For component libraries, ensure exported components use hardcoded class combinations so the scanner finds them during build.
How do I fix PostCSS and IntelliSense integration issues with Tailwind?
tailwindcss-debugging covers build tool integration: ensure your `postcss.config.js` exists and includes the Tailwind plugin in the correct order (usually before autoprefixer). Verify your bundler (Webpack, Vite, etc.) is configured to process CSS through PostCSS. For IntelliSense in VS Code, install the official Tailwind CSS IntelliSense extension and ensure your project has a valid `tailwind.config.js` at the root. Restart the extension server if autocomplete stops working. Check that your editor's CSS language server isn't conflicting—disable competing extensions if needed. Rebuild your project after config changes for IntelliSense to refresh.
What causes Tailwind CSS specificity conflicts and how do I resolve them?
tailwindcss-debugging identifies specificity issues when custom CSS or third-party styles override Tailwind classes. Inspect the element in DevTools to see which rule wins. If a custom class has higher specificity, increase Tailwind's specificity by nesting it in your config or using `!important` on the Tailwind class (e.g., `!text-red-500`). Ensure Tailwind's stylesheet loads after custom styles in your HTML. Check for conflicting utility prefixes if using multiple frameworks. Reorganize your CSS import order so Tailwind comes last, or use CSS layers to control cascade priority in modern browsers.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
``html
<!-- WRONG - Dynamic class won't be detected -->
<div class={text-${color}-500`}>
<!-- CORRECT - Use complete class
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
plugins/tailwindcss-master/skills/tailwindcss-debugging/SKILL.md
plugins/tailwindcss-master/skills/tailwindcss-debugging/references/troubleshooting-guide.md