Django Crispy Forms with Tailwind CSS 4.0: Unwanted downward caret appears within the form

I'm using:

• Django 5.2.1
• Tailwind CSS 4.0
• crispy-tailwind 1.0.3
• django-crispy-forms 2.4

I am using the Tailwind template pack, which is defined in my settings.py. When I render my form in my template 'concert_form.html' using crispy-forms, a large upside-down caret symbol appears after one of the fields in the middle of the form. If I comment out crispy-forms, then the form renders properly. Using the developer tools, with crispy-forms active, I can see there is a new in the code with an svg definition. That is not present with crispy-forms inactive. The only CSS I'm using is what is generated from the tailwind --watch command. Is there any way I can control crispy-forms to prevent this from happening?

Here are the relevant code sections: concert_form.html

html
{% extends "_base.html" %}
{% load tailwind_filters %}
...
<div class="bg-white rounded-lg shadow-lg p-6">
  <form method="post" class="space-y-6">
  {% csrf_token %}
  {% form|crispy %}

<div class="flex justify-end space-x-3 pt-4">
... the balance of the code, navigation buttons to 'Cancel' or 'Submit' the form

models.py

python
from django.db import models
from django.urls import reverse

class ConcertForm(forms.ModelForm):
    name = models.CharField(max_length=100)
    date = models.DateField()
    time = models.TimeField()
    venue = models.ForeignKey(Venue, on_delete=models.CASCADE)
    conductor = models.ManyToManyField(Conductor, blank=True)
    guests = models.ManyToManyField(Guest, blank=True)
    description = models.TextField(blank=True)
    poster = models.ImageField(
        upload_to="posters/",
        blank=True,
        null=True,
    )

    def __str__(self):
        return self.name

    def get_absolute_url(self):
        return reverse("concert_detail", args=[str(self.id)])

    class Meta:
        ordering = ["date"]

forms.py

from django import forms
from .models import Concert

class ConcertForm(forms.ModelForm):
    class Meta:
        model = Concert
        fields = "__all__"
        widgets = {
            "date": forms.DateInput(attrs={"type": "date"}),
            "time": forms.TimeInput(attrs={"type": "time"}),
            "conductor": forms.SelectMultiple(),
            "guests": forms.SelectMultiple(),
        }

settings.py

python
...
INSTALLED_APPS = [
    ...
    "crispy_forms",
    "crispy_tailwind",
]

CRISPY_ALLOWED_TEMPLATE_PACKS = "tailwind"
CRIPSY_TEMPLATE_PACK = "tailwind"

Rendered HTML for the area of concern

<select class="bg-white focus:outline-none border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700" name="venue" id="id_venue" required=""> 
<option value="">---------</option> 
<option value="1" selected="">East Lansing High School</option> 
<option value="2">Lansing Eastern High School</option> </select>

(NOTE: The code below is the <div> inserted with crispy-forms is active)

<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path> 
</svg> 
</div>

Screenshot:

I've tried removing the crispy-forms from the file which causes the page to render normally, but lacking the crispy-form formatting. I've inspected the rendered page in the developer tools. The "caret " only occurs with crispy-forms active.

Вернуться на верх