missing tailwind classes!!!

[babubhai01]

I followed the documentation for installing tailwind css https://tailwindcss.com/docs/installation/tailwind-cli and it produced 161 line css file where most of the classes are missing.

[wongjn]

Consider checking:

• Consider checking you've done a git init in the root folder of the project. Tailwind uses git ignore rules internally for automatic source detection. If you have a .gitignore (or equivalent) higher in the directory tree, this may cause Tailwind to ignore files. Initializing a git repo creates a boundary to this.
• Tailwind has compiled since you added the classes.
• String concatenation/interpolation is not used to build class names.
• The class names would resolve to Tailwind classes that Tailwind would generate a rule for.

Otherwise, consider providing a project that reproduces the unexpected behavior.

[babubhai01]

It is not working... I tried it on multiple oses
On nixos, I installed tailwind from nixpkgs... On running the same steps it creates a css file of 400 lines
Here is the reproduction for Ubuntu 25.10

1. Install Ubuntu 25.10
2. Install git, nodejs, npm (sudo apt install git nodejs npm)
3. Create a directory (mkdir my-proj)
4. Initialize git repo (git init)
5. Follow the instructions over here https://tailwindcss.com/docs/installation/tailwind-cli

One more thing that I found is that running this command curl -o tailwind-browser.js https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4 and then generating the tailwind output file inside the same directory generates a 2599 lines of css file

[babubhai01]

@wongjn why tailwind-cli doesn't provide a --defaultflag to generate same css file to avoid these kind of issues

[wongjn]

Tailwind only generates classes you use.

[AshkanPoyber]

Hi @babubhai01,

This is expected behavior 😊

Tailwind does not generate all utility classes by default.
It only generates the classes that are actually used in your content files.

That’s why you’re seeing a very small output CSS (~161 lines).

Why this happens

Tailwind uses a content scan (formerly called purge) to keep the CSS output minimal.

If your project currently has little or no Tailwind classes in your HTML/JS files,
the generated CSS will also be very small.

What to check

1. Make sure content is configured correctly in tailwind.config.js:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. Add some Tailwind classes to your HTML:

<div class="bg-red-500 text-white p-4 rounded">
  Hello Tailwind
</div>

3. Rebuild the CSS:

npx tailwindcss -i ./input.css -o ./output.css

You’ll see more utilities appear as you actually use them.

✅ Summary

• Tailwind only generates used classes
• A small CSS file is normal for a new project
• As you add more utility classes, the CSS output grows automatically

This is working exactly as designed.

[wongjn]

FYI, this is for v3

[babubhai01]

oh, I get it...
can it detect classes in non-javascript based frameworks?

[wongjn]

Yes