[Answered ]-Serve TailwindCSS with django_plotly_dash

by

1👍

✅

After viewing your repository, I think the problem is not that the Bootstrap CSS overrides the tailwind’s one, the problem here is that the classes that you defined are simply not scanned by Tailwindcss. I’m going to assume that you generate the output.css using this command:

> npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch

If that’s what you did to generate the CSS, then I can understand what’s going on here. That’s simply because of your tailwind.config.js file looks like this:

...
  content: [
    "./static/css/*.html",
    "./templates/*.html",
    "./static/css/*.js",
  ],
...

You said that container, mx-auto classes are applied, but not the color classes (e.g. bg-green-100, bg-red-100), that’s simply because container, mx-auto classes are defined in one of "./static/css/*.html", "./templates/*.html", "./static/css/*.js", while bg-green-100, bg-red-100 are defined in other directory than those directories (it’s defined in apps\dashboard\layout.py).

The easiest fix is to add the directories in which CSS classes need to be applied to the tailwind.config.js file, e.g.:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./static/css/*.html",
    "./templates/*.html",
    "./static/css/*.js",
    "./apps/**" // add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

This will add all classes from any files or any files in ./apps directory or subdirectories to the tailwindcss build process. Don’t forget to run the tailwindcss cli command (the one I mentioned earlier) every time you run the server though.

👤Damzaky

Leave a comment