Update tailwind_field.py

crispy_tailwind/templates/tailwind/layout/select.html

@@ -1,9 +1,9 @@
 {% load crispy_forms_filters %}
-{% load tailwind_filters %}
+{% load tailwind_filters tailwind_field %}
 {% load l10n %}
 
 <div class="relative">
-    <select class="bg-white focus:outline-none border {% if field.errors %}border-red-500 {% else %}border-gray-300 {% endif %}rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700" name="{{ field.html_name }}" {{ field|build_attrs }}>
+    <select class="{{ field|tailwind_field_class }}{% if field.errors %} border-red-500{% endif %}" name="{{ field.html_name }}" {{ field|build_attrs }}>
         {% for group, options, index in field|optgroups %}
             {% if group %}<optgroup label="{{ group }}">{% endif %}
             {% for option in options %}

crispy_tailwind/templatetags/tailwind_field.py

@@ -76,41 +76,54 @@ def pairwise(iterable):
     return zip(a, a)
 
 
+@register.filter
+def tailwind_field_class(field):
+    """
+    Returns field class from defaults.
+    """
+    return f" {tailwind_container.get_input_class(field)}"
+
+
+base_input = (
+    "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"
+)
+
+default_styles = {
+    "text": base_input,
+    "number": base_input,
+    "radioselect": "",
+    "email": base_input,
+    "url": base_input,
+    "password": base_input,
+    "hidden": "",
+    "multiplehidden": "",
+    "file": "",
+    "clearablefile": "",
+    "textarea": base_input,
+    "date": base_input,
+    "datetime": base_input,
+    "time": base_input,
+    "checkbox": "",
+    "select": "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",
+    "nullbooleanselect": "",
+    "selectmultiple": "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",
+    "checkboxselectmultiple": "",
+    "multi": "",
+    "splitdatetime": "text-gray-700 bg-white focus:outline border border-gray-300 leading-normal px-4 "
+    "appearance-none rounded-lg py-2 focus:outline-none mr-2",
+    "splithiddendatetime": "",
+    "selectdate": "",
+    "error_border": "border-red-500",
+}
+
+# Overwrite tailwind_styles values with the CRISPY_TAILWIND_STYLE values from settings
+tailwind_styles = {**default_styles, **getattr(settings, "CRISPY_TAILWIND_STYLE", {})}
+tailwind_container = CSSContainer(tailwind_styles)
+
+
 class CrispyTailwindFieldNode(template.Node):
-    base_input = (
-        "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"
-    )
-
-    default_styles = {
-        "text": base_input,
-        "number": base_input,
-        "radioselect": "",
-        "email": base_input,
-        "url": base_input,
-        "password": base_input,
-        "hidden": "",
-        "multiplehidden": "",
-        "file": "",
-        "clearablefile": "",
-        "textarea": base_input,
-        "date": base_input,
-        "datetime": base_input,
-        "time": base_input,
-        "checkbox": "",
-        "select": "",
-        "nullbooleanselect": "",
-        "selectmultiple": "",
-        "checkboxselectmultiple": "",
-        "multi": "",
-        "splitdatetime": "text-gray-700 bg-white focus:outline border border-gray-300 leading-normal px-4 "
-        "appearance-none rounded-lg py-2 focus:outline-none mr-2",
-        "splithiddendatetime": "",
-        "selectdate": "",
-        "error_border": "border-red-500",
-    }
-
-    default_container = CSSContainer(default_styles)
+    default_container = tailwind_container
 
     def __init__(self, field, attrs):
         self.field = field

docs/custom.txt

@@ -2,18 +2,69 @@
 Custom Styles
 =============
 
-With Tailwind being a utility framework there is much more ability to customise
-your site than with many of the other CSS frameworks such as Bootstrap.
+There are currently two ways to customize the tailwind classes for your forms.
 
-While our opinionated Tailwind styles may get you so far you may wish to change these.
+The first one is to override CRISPY_TAILWIND_STYLE in your settings. This will override the defaults for all forms. 
+This is handy for when you want to easily configure classes for all your forms, as forms in a project usually have the same uniform styling.
+
+The second way is to configure ``CSSContainer`` on a specific form. This will only work for forms that use FormHelper.
+This allows you to override a specific form, this is usefull for unique/complex forms.
+
+The idea is that you can easily configure all forms by overriding CRISPY_TAILWIND_STYLE in settings, and if you want to customize a specific form, you can use CSSContainer for that specific form.
 
 The Tailwind template pack aims to help you customise your form in a DRY way. This
 template pack comes with a utility class called `CSSContainer` which can be attached to your
 form helper.
 
-------------
-CSSContainer
-------------
+The documentation on CSSContainer is a bit under-developed, more documentation coming soon.
+
+-----------------------------------------------------------------------------
+1. Configuring custom tailwind classes in settings with CRISPY_TAILWIND_STYLE
+-----------------------------------------------------------------------------
+
+Example::
+
+    CRISPY_TAILWIND_STYLE = {
+        "text": "bg-gray-50 border border-gray-300",
+        "select": "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
+    }
+
+
+This is currently only working for the input fields and the select field. More coming soon.
+
+These are the fields you can override::
+
+    CRISPY_TAILWIND_STYLE = {
+        "text": "",
+        "number": "",
+        "radioselect": "",
+        "email": "",
+        "url": "",
+        "password": "",
+        "hidden": "",
+        "multiplehidden": "",
+        "file": "",
+        "clearablefile": "",
+        "textarea": "",
+        "date": "",
+        "datetime": "",
+        "time": "",
+        "checkbox": "",
+        "select": "",
+        "nullbooleanselect": "",
+        "selectmultiple": "",
+        "checkboxselectmultiple": "",
+        "multi": "",
+        "splitdatetime": "",
+        "splithiddendatetime": "",
+        "selectdate": "",
+        "error_border": "",
+    }
+
+
+---------------
+2. CSSContainer
+---------------
 
 `CSSContainer` is imported from `crispy_tailwind.tailwind`. This is a class which holds the
 CSS style for your form. Currently it holds the classes for the `<input>` tags within your form.

tests/results/filter/crispy_filter.html

@@ -63,7 +63,7 @@
     <div class="mb-3">
         <div class="relative">
             <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="tos_accepted" id="id_tos_accepted">
+                appearance-none leading-normal text-gray-700" name="tos_accepted" id="id_tos_accepted">
                 <option value="accepted">Accepted</option>
                 <option value="not_accepted">Not accepted</option>
             </select>