tailwindcss-debugging

# Restart dev server
npm run dev
 
# Clear cache and rebuild
rm -rf node_modules/.vite
npm run build

// OLD (v3)
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}
 
// NEW (v4)
export default {
  plugins: {
    '@tailwindcss/postcss': {}
  }
}

/* v4 - Configure in CSS, not JS */
@import "tailwindcss";
 
@theme {
  --color-primary: oklch(0.6 0.2 250);
}

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

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

<!-- Use !important (last resort) -->
<div class="!mt-0">
 
<!-- Or increase specificity with variants -->
<div class="[&]:mt-0">

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

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

<!-- 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>

<!-- Forms plugin only styles inputs with type attribute -->
<input type="text" />  <!-- ✓ Styled -->
<input />              <!-- ✗ Not styled -->

@plugin "@tailwindcss/forms" {
  strategy: class;
}

<!-- Now explicitly opt-in -->
<input type="text" class="form-input" />

# Install Tailwind CSS IntelliSense
code --install-extension bradlc.vscode-tailwindcss

npm install -D @tailwindcss/debug-screens

@plugin "@tailwindcss/debug-screens";

<!-- Shows current breakpoint in corner -->
<body class="debug-screens">

# Output CSS to file for inspection
npx tailwindcss -o output.css --content './src/**/*.{html,js}'
 
# With verbose logging
DEBUG=tailwindcss:* npm run build

# Look for plugin-related errors
npm run build 2>&1 | grep -i plugin

/* In browser DevTools, check :root for variables */
:root {
  --color-blue-500: oklch(...);
  --spacing-4: 1rem;
}

/* Add explicit sources if auto-detection fails */
@source "./src/**/*.tsx";
@source "./components/**/*.tsx";
 
/* Exclude paths */
@source not "./src/generated/**";

npm install -D @tailwindcss/postcss

npm install -D tailwindcss@latest @tailwindcss/postcss@latest

// BAD
const classes = `bg-${dynamic}-500`
 
// GOOD
const colorMap = {
  primary: 'bg-blue-500',
  danger: 'bg-red-500'
}
const classes = colorMap[dynamic]

# Restart dev server
npm run dev
 
# Clear Vite cache
rm -rf node_modules/.vite
 
# Clear Next.js cache
rm -rf .next

# Check CSS file size
ls -lh dist/assets/*.css
 
# If too large, check for:
# 1. Dynamic class generation
# 2. Unnecessary safelisting
# 3. Unused plugins

# Time the build
time npm run build
 
# v4 should be very fast
# Full build: <1s
# Incremental: microseconds

# 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