html - Tailwind CSS does not generate CSS for all classes - Stack Overflow

admin管理员组

文章数量:1397016

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

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

• html
• css
• django
• tailwind-css
• tailwind-css-4

Share Improve this question Follow edited Mar 27 at 8:24 rozsazoltan 10.9k66 gold badges1919 silver badges5555 bronze badges asked Mar 27 at 5:54 MagicLudoMagicLudo 3355 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

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:

• Get started with Tailwind CSS - TailwindCSS v4 Docs
• Upgrading your Tailwind CSS projects from v3 to v4 - TailwindCSS v4 Docs
• How to upgrade TailwindCSS to v4? - StackOverflow

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.

• New CSS-first configuration option in v4 - StackOverflow
• TailwindCSS v4 is backwards compatible with v3 - StackOverflow

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.

• Automatic Source Detection from TailwindCSS v4 - StackOverflow

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

• Removed @tailwind directives - StackOverflow

@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.

• Separated CLI package for TailwindCSS v4 - StackOverflow
• Using Tailwind CLI by separated package - TailwindCSS v3 to v4
• Using TailwindCSS v4 with Tailwind CLI - TailwindCSS v4 Docs

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:

• How can generate separate CSS files for different sections in TailwindCSS v4 without using the content setting? - StackOverflow

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.

本文标签： htmlTailwind CSS does not generate CSS for all classesStack Overflow