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

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. Please any help would be appreciated

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:

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