Django应用中HTMX返回结果的Tailwind text-green-500类不生效

我通过HTMX将表单提交至Django视图，请求完成后在ID为#result的div中插入带有Tailwind类text-green-500的span元素，目前span已成功插入，但文字并未显示预期的绿色。其他Tailwind类（如text-blue-500、bg-green-500、block）均可正常工作。

Django视图代码 #

@login_required
def create_daytistic(request: HttpRequest) -> HttpResponse:
    return HttpResponse('<span class="text-green-500">Daytistic erfolgreich erstellt</span>')

Django模板代码 #

{% extends 'base.html' %} {% block content %}

<div class="bg-gray-100">
  <div class="min-h-screen flex">
    <!-- Sidebar -->
    {% include 'components/common/sidebar.html' %}

    <!-- Main content -->
    <main class="flex-1 p-8" x-data>
      <div class="flex flex-row">
        <div
          class="bg-white p-6 rounded-lg shadow-lg w-1/2"
          x-data="{loading: false}"
        >
          <h1 class="text-2xl font-bold mb-4">Daytistic erstellen</h1>
          <p><b>Hinweis</b>: Die Daytistic darf maximal 4 Wochen alt sein.</p>

          <form
            hx-post="{% url 'daytistics_create' %}"
            hx-trigger="submit"
            hx-target="#result"
            hx-swap="innerHTML"
            hx-indicator="#spinner"
            @submit.prevent="loading = true"
            @htmx:afterRequest="loading = false"
          >
            {% csrf_token %}
            <label for="date" class="mt-4">Datum: </label>
            <input
              x-mask="99.99.9999"
              placeholder="DD.MM.YYYY"
              name="date"
              class="mt-4 bg-white-light text-gray-500 border-1 rounded-md p-2 mb-4 focus:bg-white-light focus:outline-none focus:ring-1 focus:ring-blue-500 transition ease-in-out duration-150 h-11"
            />

            <div id="submit-button-container" class="inline">
              <button
                type="submit"
                id="submit-button"
                class="h-11 w-48 bg-gradient-to-r from-lime-500 to-green-500 text-white font-bold py-2 px-4 rounded-md hover:bg-lime-800 hover:to-green-800 hover:scale-105 transition ease-in-out duration-200"
              >
                Neue Daytistic
              </button>

              <span id="spinner" class="hidden ml-4" x-show="loading">
                <span>
                  <div class="inline-flex flex-row gap-2 align-middle">
                    <div
                      class="w-4 h-4 rounded-full bg-green-600 animate-bounce"
                    ></div>
                    <div
                      class="w-4 h-4 rounded-full bg-green-600 animate-bounce [animation-delay:-.3s]"
                    ></div>
                    <div
                      class="w-4 h-4 rounded-full bg-green-600 animate-bounce [animation-delay:-.5s]"
                    ></div>
                  </div>
                </span>
              </span>
            </div>
          </form>
          <div id="result"></div>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-lg w-1/2 ml-4">
          <h1 class="text-2xl font-bold mb-4">Tagebucheintrag erstellen</h1>
          <p><b>Hinweis</b>: Tagebucheinträge sind nur optional.</p>
        </div>
      </div>
    </main>
  </div>
</div>

<script>
  document.addEventListener("htmx:configRequest", function (evt) {
    document.getElementById("submit-button").classList.add("hidden");
    document.getElementById("spinner").classList.remove("hidden");
  });
  document.addEventListener("htmx:afterOnLoad", function (evt) {
    document.getElementById("submit-button").classList.remove("hidden");
    document.getElementById("spinner").classList.add("hidden");
  });
  document.addEventListener("htmx:afterRequest", function (evt) {
    if (!evt.detail.successful) {
      document.getElementById("submit-button").classList.remove("hidden");
      document.getElementById("spinner").classList.add("hidden");
    }
  });
</script>

{% endblock content %}

Poetry依赖配置 #

[tool.poetry.dependencies]
python = "^3.12"
django-allauth = "^64.0.0"
Django = "^5.0.7"
django-widget-tweaks = "^1.5.0"
pytest-django = "^4.8.0"
faker = "^26.1.0"
pytest-factoryboy = "^2.7.0"
django-mathfilters = "^1.0.0"
django-tailwind = "^3.8.0"
django-htmx = "^1.19.0"
django-browser-reload = "^1.13.0"

Tailwind配置文件 #

/**
 * This is a minimal config.
 *
 * If you need the full config, get it from here:
 * https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js
 */

module.exports = {
    content: [
        /**
         * HTML. Paths to Django template files that will contain Tailwind CSS classes.
         */

        /*  Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
        '../templates/**/*.html',

        /*
         * Main templates directory of the project (BASE_DIR/templates).
         * Adjust the following line to match your project structure.
         */
        '../../templates/**/*.html',

        /*
         * Templates in other django apps (BASE_DIR/<any_app_name>/templates).
         * Adjust the following line to match your project structure.
         */
        '../../**/templates/**/*.html',

        /**
         * JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
         * patterns match your project structure.
         */
        /* JS 1: Ignore any JavaScript in node_modules folder. */
        // '!../../**/node_modules',
        /* JS 2: Process all JavaScript files in the project. */
        // '../../**/*.js',

        /**
         * Python: If you use Tailwind CSS classes in Python, uncomment the following line
         * and make sure the pattern below matches your project structure.
         */
        // '../../**/*.py'
    ],
    theme: {
        extend: {},
    },
    plugins: [
        /**
         * '@tailwindcss/forms' is the forms plugin that provides a minimal styling
         * for forms. If you don't like it or have own styling for forms,
         * comment the line below to disable '@tailwindcss/forms'.
         */
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio'),
    ],
}

项目模板结构 #

➜  templates git:(fix/#59) ✗ ls -Ra
.:
.  ..  account  base.html  components  pages

./account:
.  ..  login.html  logout.html

./components:
.  ..  common  home

./components/common:
.  ..  footer.html  navbar.html  sidebar.html

./components/home:
.  ..  hero.html

./pages:
.  ..  daytistics  home

./pages/daytistics:
.  ..  dashboard.html  edit_daytistic.html

./pages/home:
.  ..  home.html  impressum.html  licenses.html

内容的提问来源于stack exchange，提问作者Leo Gall