diff --git a/crispy_tailwind/templates/tailwind/layout/select.html b/crispy_tailwind/templates/tailwind/layout/select.html index a692ee9..33ec4a6 100644 --- a/crispy_tailwind/templates/tailwind/layout/select.html +++ b/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 %}
- {% for group, options, index in field|optgroups %} {% if group %}{% endif %} {% for option in options %} diff --git a/crispy_tailwind/templatetags/tailwind_field.py b/crispy_tailwind/templatetags/tailwind_field.py index 5deb827..a726d94 100644 --- a/crispy_tailwind/templatetags/tailwind_field.py +++ b/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 diff --git a/docs/custom.txt b/docs/custom.txt index afaafad..a6cb1c3 100644 --- a/docs/custom.txt +++ b/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 `` tags within your form. diff --git a/tests/results/filter/crispy_filter.html b/tests/results/filter/crispy_filter.html index b9e9bfa..46763b8 100644 --- a/tests/results/filter/crispy_filter.html +++ b/tests/results/filter/crispy_filter.html @@ -63,7 +63,7 @@