Tailwind forms styling not applied correctly

[tobyporter]

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

[tobyporter]

I figured it out.

I was running django-tailwind in JIT mode which only builds the css for what's in your templates. Switching to AOT mode builds the complete tailwind css.

tailwind.config.js

    /**
     * Stylesheet generation mode.
     *
     * Set mode to "jit" if you want to generate your styles on-demand as you author your templates;
     * Set mode to "aot" if you want to generate the stylesheet in advance and purge later (aka legacy mode).
     */
    mode: "aot",

The forms are now styled correctly - except for the double down arrow on the select lists. Why is this happening??

[lkrimphove]

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

[hungtienvu]

I guess this is an issue with this layout crispy_tailwind/templates/tailwind/layout/select.html.

[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.

[LaundroMat]

I'm not sure whether it's a crispy-forms issue or a django-tailwind issue. My fix was to

• copy the crispy_tailwind/templates/tailwind/layout/select.html file to my app templates at <app>/templates/tailwind/layout/select.html
• cut out the div containing the svg
• remove the final superfluous </div>
• and keep require('@tailwindcss/forms') in <app>/static_src/tailwind.config.js

---

Longer description:

This is the original crispy-form's template. Notice the superfluous </div> at the end.

{% 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>

There's two things you can do when copying the above file to your own app templates directory.

• Remove the last </div> and comment out require('@tailwindcss/forms') in <app>/static_src/tailwind.config.js. My issue with that was that regular input fields had no padding anymore;
• Or you can remove the whole <div> containing the <svg> (and that final superfluous </div>), and keep require('@tailwindcss/forms').

That's what I did, and this is what the template in <my-app>/templates/tailwind/layout/select.html now looks like

{% 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>

[rudolfolah]

there's a fix here that removes the SVG entirely: #112

I had success with copying and overriding the template to remove the extra </div> and to change the SVG's containing div to use px-3 instead of px-2

[GitRon]

The select works (now) AFAIK and we got some updates the other day on this widget. So, does anybody still has some things that should be tackled? Otherwise, I'd close this ticket soon.