tailwindcss-debugging

# Tailwind CSS Debugging & Troubleshooting

## Common Issues & Solutions

### 1. Styles Not Applying

#### Check Content Detection

v4 automatically detects content, but if styles are missing:

```css
/* 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 names -->
<div class={color === 'blue' ? 'text-blue-500' : 'text-red-500'}>
```

#### Check Build Process

```bash
# 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

```javascript
// OLD (v3)
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

// NEW (v4)
export default {
  plugins: {
    '@tailwindcss/postcss': {}
  }
}
```

#### Configuration Moved to CSS

```css
/* v4 - Configure in CSS, not JS */
@import "tailwindcss";

@theme {
  --color-primary: oklch(0.6 0.2 250);
}
```

#### Dark Mode Variant

```css
/* v4 - Add if using selector strategy */
@custom-variant dark (&:where(.dark, .dark *));
```

### 3. Classes Being Overridden

#### Check Specificity

```css
/* Browser DevTools: Inspect element → Styles panel */
/* Look for crossed-out styles */
```

#### Solutions

```html
<!-- Use !important (last resort) -->
<div class="!mt-0">

<!-- Or increase specificity with variants -->
<div class="[&]:mt-0">
```

#### Check Import Order

```css
/* Your custom CSS should come after Tailwind */
@import "tailwindcss";
@import "./custom.css";  /* After Tailwind */
```

### 4. Typography Plugin Issues

#### Styles Not Applied

```css
/* Ensure plugin is loaded */
@plugin "@tailwindcss/typography";
```

#### Utilities Overridden by Prose

```html
<!-- Use element modifiers -->
<article class="prose prose-h1:text-4xl prose-a:text-blue-600">

<!-- Or escape prose entirely -->
<artic