Tailwind classes are in the code, but the styles do not show

Fix it yourself

Follow the repair

1. Check the content paths in tailwind.config.js. Open the config and read the content array. Every folder holding files that use classes must be matched by one of these patterns:

   // tailwind.config.js
   module.exports = {
     content: [
       "./app/**/*.{js,ts,jsx,tsx}",
       "./components/**/*.{js,ts,jsx,tsx}",
       "./pages/**/*.{js,ts,jsx,tsx}",
     ],
     // ...
   };

   Now compare with where your files actually live. If the project keeps everything under src/, the patterns must start with ./src/ — a config generated for a root-level layout will scan politely past your entire app and find almost nothing.
2. Confirm the Tailwind directives are in your CSS. Open your main CSS file — usually globals.css — and look for these three lines near the top:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

   Those lines are where the generated classes get injected; without them, perfect content paths still produce an empty result. Then confirm your root layout actually imports that CSS file. (On Tailwind v4 there is no config file by default — the equivalent is a single @import "tailwindcss"; line in the CSS, so check for that instead.)
3. Restart the dev server after config changes. The config and content list are read when the server starts. Edit, save, restart — in that order. If a restart alone does not pick the styles up, stop the server, delete the framework's build cache (the .next folder in Next.js), and start again, so no stylesheet generated from the old config survives.
4. Stop building class names dynamically. The scanner reads files as text; it never runs your code, so it cannot see a class that only exists at runtime:

   // Invisible to the scanner — never generated:
   className={`bg-${color}-500`}
   
   // Safe — complete class names the scanner can read:
   const colorClasses = { red: "bg-red-500", blue: "bg-blue-500" };
   className={colorClasses[color]}

   This is the cause to suspect when a component is unstyled only for some values — a status color, a size, a theme — while everything hard-coded around it works.
5. If some classes work, you have your answer. Do not reinstall anything. Working classes prove Tailwind is installed, wired, and generating — the missing ones were simply never seen by the scanner. Test the theory in the failing file with a loud, unmistakable class like bg-red-500: if even that does not show, the file itself is outside the content paths; if it shows, the specific class you wanted is the problem — usually a dynamic name from step 4, or a typo.
6. Check that PostCSS is still wired up. Save this for the case where literally no Tailwind class works anywhere, in any file. Most Next.js and Vite scaffolds run Tailwind through PostCSS, and if postcss.config.js was deleted or emptied during a cleanup, the Tailwind step never runs and the output CSS is just your hand-written styles. Restore the scaffold's original version of that file instead of hand-editing around it.