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
Decision gist · record as of 2026-06-18
Tailwind CSS Debugging helps you fix classes not applying by walking through content detection, dynamic class patterns, and build configuration. 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.
Use it when
- tailwindcss-debugging addresses v3-to-v4 upgrade issues including configuration syntax changes, new CSS variable system.
- tailwindcss-debugging provides structured troubleshooting steps: first verify content paths in `tailwind.config.js` match your actual file.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
JosiahSiegel/claude-plugin-marketplace/tailwindcss-debugging · repository language: Shell
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 2 files
plugins/tailwindcss-master/skills/tailwindcss-debugging/SKILL.md
plugins/tailwindcss-master/skills/tailwindcss-debugging/references/troubleshooting-guide.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Troubleshoot Tailwind CSS classes not applying or rendering in browser”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master Tailwind CSS with 29 rules spanning responsive layouts, dark mode setup, reusable component patterns, and configuration across v3.4+ and v4. Learn mobile-first design, conditional styling with utilities, and how to migrate projects from v3 to v4 using the new CSS-first approach.
Accelerate Tailwind CSS v4 builds using the Rust-powered Oxide engine and master content detection to eliminate unused styles. Learn safelist strategies for dynamic classes, GPU-accelerated animations, and production minification techniques to keep CSS bundles lean.
Expert guidance for TailwindCSS v4 configuration in server-rendered environments, covering SSR/SSG styling patterns, critical CSS extraction, and FOUC prevention. Walks through version-specific setup, framework integration, and performance optimization across Vite, Next.js, SvelteKit, and other build tools.
Tailwind CSS v4 is a utility-first framework for building styled interfaces by composing single-purpose classes directly in markup. Configuration happens entirely in CSS through @theme and @layer directives, eliminating separate config files. Works with Next.js, Vite, and the CLI.
Tailwind Theme Builder guides you through establishing a fully themed Tailwind v4 project with shadcn/ui components and dark mode support. It implements a required four-step architecture using CSS variables, @theme inline mapping, and a theme provider to enable seamless light/dark switching without component rewrites.
Master Tailwind CSS v4's CSS-first configuration model, Rust-powered engine, and modern setup across Vite and PostCSS. This skill covers installation methods, @theme-based theming, custom utilities and variants, plugin loading, and the shift from JavaScript config to pure CSS. Includes v3-to-v4 migration guidance and reference for new v4 utilities.
More skills tailwind-v3-to-v4-migration (MIT) · hebrew-tailwind-preset (MIT) · Heroui (MIT) · heroui-react (MIT) · heroui-react (Apache-2.0)