Tailwind doesn't compile

[Mte90]

Tailwind is incomplete on the CRUD pages created.

falco work tailwind
16:57:34 system   | tailwind started (pid=132735)
16:57:34 system   | server started (pid=132731)
16:57:34 system   | worker started (pid=132738)
16:57:34 server   | Traceback (most recent call last):
16:57:34 server   |   File "/home/www/indovina/manage.py", line 10, in main
16:57:34 server   |     from django.core.management import (  # pylint: disable=import-outside-toplevel
16:57:34 server   | ModuleNotFoundError: No module named 'django'
16:57:34 server   | 
16:57:34 server   | The above exception was the direct cause of the following exception:
16:57:34 server   | 
16:57:34 server   | Traceback (most recent call last):
16:57:34 server   |   File "/home/www/indovina/manage.py", line 23, in <module>
16:57:34 server   |     main()
16:57:34 server   |   File "/home/www/indovina/manage.py", line 14, in main
16:57:34 server   |     raise ImportError(
16:57:34 server   | ImportError: Couldn't import Django. Are you sure it's installed and available on your PYTHONPATH environment variable? Did you forget to activate a virtual environment?
16:57:34 tailwind | Traceback (most recent call last):
16:57:34 worker   | Traceback (most recent call last):
16:57:34 worker   |   File "/home/www/indovina/manage.py", line 10, in main
16:57:34 worker   |     from django.core.management import (  # pylint: disable=import-outside-toplevel
16:57:34 worker   | ModuleNotFoundError: No module named 'django'
16:57:34 worker   | 
16:57:34 worker   | The above exception was the direct cause of the following exception:
16:57:34 worker   | 
16:57:34 worker   | Traceback (most recent call last):
16:57:34 worker   |   File "/home/www/indovina/manage.py", line 23, in <module>
16:57:34 worker   |     main()
16:57:34 worker   |   File "/home/www/indovina/manage.py", line 14, in main
16:57:34 worker   |     raise ImportError(
16:57:34 worker   | ImportError: Couldn't import Django. Are you sure it's installed and available on your PYTHONPATH environment variable? Did you forget to activate a virtual environment?
16:57:34 tailwind |   File "/home/www/indovina/manage.py", line 10, in main
16:57:34 tailwind |     from django.core.management import (  # pylint: disable=import-outside-toplevel
16:57:34 tailwind | ModuleNotFoundError: No module named 'django'
16:57:34 tailwind | 
16:57:34 tailwind | The above exception was the direct cause of the following exception:
16:57:34 tailwind | 
16:57:34 tailwind | Traceback (most recent call last):
16:57:34 tailwind |   File "/home/www/indovina/manage.py", line 23, in <module>
16:57:34 tailwind |     main()
16:57:34 tailwind |   File "/home/www/indovina/manage.py", line 14, in main
16:57:34 tailwind |     raise ImportError(
16:57:34 tailwind | ImportError: Couldn't import Django. Are you sure it's installed and available on your PYTHONPATH environment variable? Did you forget to activate a virtual environment?
16:57:34 system   | server stopped (rc=1)
16:57:34 system   | sending SIGTERM to tailwind (pid 132735)
16:57:34 system   | sending SIGTERM to worker (pid 132738)
16:57:34 system   | worker stopped (rc=-15)
16:57:34 system   | tailwind stopped (rc=-15)

[Tobi-De]

Tailwind is incomplete on the CRUD pages created.

falco work tailwind
16:57:34 system   | tailwind started (pid=132735)
16:57:34 system   | server started (pid=132731)
16:57:34 system   | worker started (pid=132738)
16:57:34 server   | Traceback (most recent call last):
16:57:34 server   |   File "/home/www/indovina/manage.py", line 10, in main
16:57:34 server   |     from django.core.management import (  # pylint: disable=import-outside-toplevel
16:57:34 server   | ModuleNotFoundError: No module named 'django'
16:57:34 server   | 
16:57:34 server   | The above exception was the direct cause of the following exception:
16:57:34 server   | 
16:57:34 server   | Traceback (most recent call last):
16:57:34 server   |   File "/home/www/indovina/manage.py", line 23, in <module>
16:57:34 server   |     main()
16:57:34 server   |   File "/home/www/indovina/manage.py", line 14, in main
16:57:34 server   |     raise ImportError(
16:57:34 server   | ImportError: Couldn't import Django. Are you sure it's installed and available on your PYTHONPATH environment variable? Did you forget to activate a virtual environment?
16:57:34 tailwind | Traceback (most recent call last):
16:57:34 worker   | Traceback (most recent call last):
16:57:34 worker   |   File "/home/www/indovina/manage.py", line 10, in main
16:57:34 worker   |     from django.core.management import (  # pylint: disable=import-outside-toplevel
16:57:34 worker   | ModuleNotFoundError: No module named 'django'
16:57:34 worker   | 
16:57:34 worker   | The above exception was the direct cause of the following exception:
16:57:34 worker   | 
16:57:34 worker   | Traceback (most recent call last):
16:57:34 worker   |   File "/home/www/indovina/manage.py", line 23, in <module>
16:57:34 worker   |     main()
16:57:34 worker   |   File "/home/www/indovina/manage.py", line 14, in main
16:57:34 worker   |     raise ImportError(
16:57:34 worker   | ImportError: Couldn't import Django. Are you sure it's installed and available on your PYTHONPATH environment variable? Did you forget to activate a virtual environment?
16:57:34 tailwind |   File "/home/www/indovina/manage.py", line 10, in main
16:57:34 tailwind |     from django.core.management import (  # pylint: disable=import-outside-toplevel
16:57:34 tailwind | ModuleNotFoundError: No module named 'django'
16:57:34 tailwind | 
16:57:34 tailwind | The above exception was the direct cause of the following exception:
16:57:34 tailwind | 
16:57:34 tailwind | Traceback (most recent call last):
16:57:34 tailwind |   File "/home/www/indovina/manage.py", line 23, in <module>
16:57:34 tailwind |     main()
16:57:34 tailwind |   File "/home/www/indovina/manage.py", line 14, in main
16:57:34 tailwind |     raise ImportError(
16:57:34 tailwind | ImportError: Couldn't import Django. Are you sure it's installed and available on your PYTHONPATH environment variable? Did you forget to activate a virtual environment?
16:57:34 system   | server stopped (rc=1)
16:57:34 system   | sending SIGTERM to tailwind (pid 132735)
16:57:34 system   | sending SIGTERM to worker (pid 132738)
16:57:34 system   | worker stopped (rc=-15)
16:57:34 system   | tailwind stopped (rc=-15)

This seems to be a virtual env issue, if you have just install locally (if not run uv tool install just-bin) run just server or activate the virtualenv using hatch shell dev and then rerun your command

[Mte90]

I had just and executed just server but didn't changed, also using hatch as you suggested.

I see that tailwind is not compiled rightly:

Looking at the tailwind the html templates path is right but I think that doesn't scan the html that is generated like in this case.

[Tobi-De]

I think I've encountered this issue before. Looking at the form input, it appears to be styled with Tailwind rather than the default Django form style (which has none by default). Try adding a few elements / rows and see if at least the table layout looks right without the oversized arrow. Does it appear on all pages, or just the create and update form pages?

Looking at the tailwind the html templates path is right but I think that doesn't scan the html that is generated like in this case.

Do you mean the Tailwind command isn’t picking up the classes from the template being displayed? Interesting—I hadn't thought of that. If this is the case, try using this in your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
const plugin = require("tailwindcss/plugin");
const { spawnSync } = require("child_process");

// Calls Django to fetch template files
const getTemplateFiles = () => {
  const command = "python3";
  const args = ["manage.py", "tailwind", "list_templates"];
  // Assumes tailwind.config.js is located in the BASE_DIR of your Django project.
  const options = { cwd: __dirname };

  const result = spawnSync(command, args, options);

  if (result.error) {
    throw result.error;
  }

  if (result.status !== 0) {
    console.log(result.stdout.toString(), result.stderr.toString());
    throw new Error(
      `Django management command exited with code ${result.status}`
    );
  }

  const templateFiles = result.stdout
    .toString()
    .split("\n")
    .map((file) => file.trim())
    .filter(function (e) {
      return e;
    }); // Remove empty strings, including last empty line.
  return templateFiles;
};

module.exports = {
  content: [].concat(getTemplateFiles()),
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/container-queries"),
    plugin(function ({ addVariant }) {
      addVariant("htmx-settling", ["&.htmx-settling", ".htmx-settling &"]);
      addVariant("htmx-request", ["&.htmx-request", ".htmx-request &"]);
      addVariant("htmx-swapping", ["&.htmx-swapping", ".htmx-swapping &"]);
      addVariant("htmx-added", ["&.htmx-added", ".htmx-added &"]);
    }),
  ],
};

I copied it from here. Essentially, it uses a Django command to list all templates, ensuring Tailwind detects them all.

By the way, I’m sorry for the issues you're experiencing :(, I'll simplify a lot of this in the next release!

[Mte90]

This works :-D

There is only an issue with the select that shows the arrow.

For the issues no worries :-D

[Tobi-De]

This works :-D

Nice

There is only an issue with the select that shows the arrow.

This is probably a crispy-tailwind issue, the package that provide the tailwind styling for forms.