Use of tailwindcss and troubleshooting

your project/basepath/

In this base path you should be getting your: - project_app - other_app - static - templates

npx tailwindcss -i ./static/src/input.css -o ./static/dist/output.css --minify

Done in 439ms

After this

# Run from your project root (where manage.py lives)
python manage.py collectstatic --noinput

Note

If you ever add a new utility class to a template and it doesn't show up right away, just run that exact npx tailwindcss command from your config/ directory followed by collectstatic. You've completely untangled the build chain pipeline! Everything should look sharp and pristine now.

---

The missing tailwind.config.js by design

If you ran that command inside your config/ directory and it worked flawlessly in 439ms, you are actually using Tailwind v4 (tailwindcss v4.2.2).

Here is the big surprise with Tailwind v4: You might not have a tailwind.config.js file at all, and that is completely by design!

The Tailwind v4 Shift: No Config File Needed

In Tailwind v4, the engineering team completely redesigned the configuration engine. Instead of using a JavaScript file (tailwind.config.js), everything is now handled directly inside your source CSS file (./static/src/input.css) using native CSS variables and @theme directives.

Where to find or add configuration settings:

If you need to add custom colors, fonts, or tracking protocols, open your source file: 📁 config/static/src/input.css

Inside that file, you control your design tokens using the new @theme structure like this:

@import "tailwindcss";

@theme {
  /* Add custom brand colors instead of using a JS file */
  --color-cyber-obsidian: #030712;
  --color-electric-blue: #3b82f6;

  /* Add custom fonts */
  --font-display: "Inter", sans-serif;
}

What if you explicitly need a tailwind.config.js file?

If you are using legacy third-party plugins that haven't updated to v4 yet and absolutely require the old JavaScript configuration file, you can force Tailwind v4 to look for it by linking it inside your input.css file using the @config directive:

Create a tailwind.config.js file at your project root.

Open your config/static/src/input.css file and line it up at the very top:

@config "../../../tailwind.config.js";
@import "tailwindcss";

Summary: Don't hunt for a tailwind.config.js file if your build is working! In v4, your input.css file is your new central control cockpit.