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:
- Rebase the base path to be your "real" project root using the
source()
function when@import
ing Tailwind:
Though you may find this scans too much (especially if@import "tailwindcss" source("../../../");
.gitignore
is not set/not broad enough). - Explicitly specify source template paths to the
templates
folder using@source
:@import "tailwindcss"; @source "../../../templates";