Tailwind forms styling not applied correctly

Hi

I’ve installed tailwind, crispy_forms & crispy_tailwind but the form styling doesn’t seem to be working and I get huge SVG arrow appearing underneath.

settings.py

    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'tailwind',
        'theme',
        'crispy_forms',
        'crispy_tailwind',
        'accs',
        'user',
    ]
...
CRISPY_ALLOWED_TEMPLATE_PACKS = "tailwind"
CRISPY_TEMPLATE_PACK = "tailwind"
...

my_form_template.html

{% extends 'core/base.html' %}
{% load tailwind_filters %}

{% block content %}

   <div class="container mx-auto">
    <h2 class="text-lg text-gray-900 font-bold text-xl pt-4">Edit Payee</h2>
   <hr class="pt-4 border-gray-900">
   </div>
    <form action="" method="post">{% csrf_token %}
      {{ form|crispy }}
      <input class="text-base bg-transparent hover:bg-blue-400 text-blue-400 font-semibold hover:text-white py-2 px-4 border border-blue-400 hover:border-transparent rounded" type="submit" value="Update">
    </form>

{% endblock content %}

I’ve tried with/without the form tags and with/without {% load crispy_forms_tags %} - neither have any effect. Any ideas what I’m missing?

Thanks

[farhanmasud]

I had the same problem. Fixed it by overriding the crispy_tailwind/templates/tailwind/layout/select.html file as following -

{% load crispy_forms_filters %}
{% load l10n %}

<div class="relative">
<select class="{% if field.errors %}border border-red-500 {% endif %}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="{{ field.html_name }}" {{ field.field.widget.attrs|flatatt }}>
    {% for value, label in field.field.choices %}
        {% include "tailwind/layout/select_option.html" with value=value label=label %}
    {% endfor %}
</select>
</div>
</div>

This new file will need to be saved at templates/tailwind/layout/select.html file. Here I have just removed the div containing the svg icon for the dropdown.

The following is the original code from crispy_tailwind/templates/tailwind/layout/select.html file -

{% load crispy_forms_filters %}
{% load l10n %}

<div class="relative">
<select class="{% if field.errors %}border border-red-500 {% endif %}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="{{ field.html_name }}" {{ field.field.widget.attrs|flatatt }}>
    {% for value, label in field.field.choices %}
        {% include "tailwind/layout/select_option.html" with value=value label=label %}
    {% endfor %}
</select>
<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"/></svg>
  </div>
</div>
</div>

Also, the following should be in your template settings.

"DIRS": [
            BASE_DIR / "templates",
        ],

[farhanmasud]

@tobyporter I had the same problem. Go into your tailwind.config.js and comment out require('@tailwindcss/forms'). At least that worked for me.

After tinkering around with the issue, I think this should be the solution. The issue is not with crispy-tailwind. The issue is coming form the form styling of django-tailwind.

This tailwind.config.js file resides in theme/static_src directory.