How do I specify directories Tailwindcss v4 should scan for class names?

Question

I currently have a django application structured like this:

/project-root
|
|
/shop                              # installed application
|
├── templates/                     # Django templates directory (HTML files)
│   ├── base.html
│   ├── index.html
│   ├── other_template.html
│   └── ...
├── static/
│   └── shop/
│       ├── styles/                # Tailwind CSS setup lives here
│       │   ├── node_modules/      # Installed NPM packages (Tailwind, etc.)
│       │   ├── src/               # Source files for Tailwind
│       │   │   ├── input.css     
│       │   ├── dist/              # Output folder (compiled Tailwind CSS)
│       │   │   ├── output.css     # Compiled Tailwind CSS
│       │   ├── tailwind.config.js 
│       │   ├── package.json       # Dependencies
│       │   ├── package-lock.json  # Dependency lock file
│       ├── js/                    # JavaScript files (if any)
│       │   ├── main.js
│       │   ├── other_script.js
│       │   └── ...
└-- views.py
---- models.py

// other files

The problem is I noticed when running the command npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch Tailwindcss only scans HTML files in the styles directory. I tried moving the node_modules and package.json to the root folder but it still wasn't able to pick up any of the html files in the templates folder. I tried creating a tailwind.config.js in the styles directory and specifying the folders to check but that didn't work either. The content of my config file is below:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
      '../../../templates/**/*.{html,js}',
    ],
    // ...
}

Is there a solution to this? I've read the docs and I can't seem to find anything related to specifying file paths to scan, and I really don't want to use the CDN as it's not advised for applications going to production.

Answer 1

It looks like the node project root is in shop/static/shop/styles. That is where Tailwind would have its "base" path for its automatic source detection.

You can approach this two ways:

• Rebase the base path to be your "real" project root using the source() function when @importing Tailwind:

  @import "tailwindcss" source("../../../");
  

  Though you may find this scans too much (especially if .gitignore is not set/not broad enough).
• Explicitly specify source template paths to the templates folder using @source:

  @import "tailwindcss";
  @source "../../../templates";