Tailwind CSS does not generate CSS for all classes

I'm new to Tailwind CSS and I'm looking to include it in my Django/FastAPI project.

I'm using Tailwind version 4.0.17.

The problem I'm having is that Tailwind doesn't recognize the HTML tags I have in my template files...

I run the following command :

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

This generates a CSS file for me, but it doesn't have all the classes in it... On the other hand, when I test with this command :

npx tailwindcss --content ./templates/test_endpoint.html --dry-run > output.css

This time, all the CSS classes of the HTML template are present in the output file, but not the others (those of the other HTML templates).

Here is the code for the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
      "./templates/**/*.html",
      "./templates/*.html",
      "templates/main/index.html",
      "templates/base.html",
      "./**/templates/**/*.html",
      "./static/**/*.css",
      "./fastapi_app/**/*.html",
      "./main/**/*.html"
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

I've tried reinstalling Tailwind several times, changing the paths, trying other commands, and the result is always the same.

If you have any ideas on how to solve this problem, that would be great!

Thanks

From January 2025, TailwindCSS v4 has been released. In your question, you mentioned that you're using the latest v4 release. However, several points in your question still reflect v3 practices.

TailwindCSS v3

If you want to use v3, you need to perform a version-specific installation instead of npm install tailwindcss:

npm install tailwindcss@3

TailwindCSS v4

If you want to work with v4, it's worth reviewing some important breaking changes:

Here are a few key ones based on your question:

The tailwind.config.js file has been removed in favor of a CSS-first configuration approach.

The content parameter has been removed; starting from v4, you no longer need to list the paths to scanned files. Instead, an automatic source detector does this for you.

The @tailwind directives have been removed; you now need to perform a simple import in your main CSS file.

@import "tailwindcss";

The CLI and PostCSS packages have been separated; they are no longer part of the tailwindcss package. Instead, they are available as @tailwindcss/cli and @tailwindcss/postcss.

Based on your question, you need the @tailwindcss/cli package. The command has also changed from npx tailwindcss, as seen here:

npx @tailwindcss/cli -i ./src/css/input.css -o ./src/css/output.css

Unique source declaration instead of automatic source detection:

./src/css/input.css

@import "tailwindcss" source("./../templates/test_endpoint.html");

or

./src/css/input.css

@import "tailwindcss" source(none); /* none = disable autoamtic source detection */

@source "./../templates/test_endpoint.html"; /* add ./templates/test_endpoint.html path to sources */

Related similar answer for unique source declaration from TailwindCSS v4 CLI:

Tailwind only includes classes found in files listed under content in tailwind.config.js. Ensure the paths are correct and relative to where you run the command. Use this simplified config:

module.exports = {
    content: [
        './templates/**/*.html',
        './**/templates/**/*.html',
        './static/**/*.css'
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Then run:

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

Avoid using dynamic class names like class="text-{{ color }}", as Tailwind won't detect them.

Вернуться на верх