Tailwind CLI does not generate CSS for all classes

Question

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

I'm using Tailwind v4.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!

rozsazoltan · Accepted Answer · 2025-03-27 08:39:19Z

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

ahuemmer · Accepted Answer · 2025-03-27 10:00:40Z

0

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.

edited Mar 27 at 10:00

ahuemmer

2,12717 gold badges30 silver badges38 bronze badges

answered Mar 27 at 9:56

Redlio Designs

162 bronze badges

1 Comment

rozsazoltan May 17 at 7:14

As the question mentions, is using TailwindCSS v4. This answer was written for TailwindCSS v3, where the issue did not yet exist.

Collectives™ on Stack Overflow

Tailwind CLI does not generate CSS for all classes

2 Answers 2

TailwindCSS v3

TailwindCSS v4

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

TailwindCSS v3

TailwindCSS v4

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related