crispy-tailwind Documentation

The template pack provides default styles for standard Django widgets. To apply custom Tailwind classes to specific widget instances, use the widget.attrs argument when defining the field in your Django Form.

class CustomTextWidget(forms.TextInput):
    pass

class CustomTextWidgetForm(forms.Form):
    name = forms.CharField(
        widget=CustomTextWidget(attrs={"class": "custom-css"})
    )

To use django-crispy-forms features like FormHelper and Layout with Tailwind, follow these steps:

1. Load the crispy_forms_tags in your template.
2. Configure a FormHelper instance within your Django Form class.
3. Use the {% crispy %} tag in your template, passing the form instance as an argument.

{% load crispy_forms_tags %}
{% crispy form %}

Install the package via pip and configure your Django settings to enable the Tailwind template pack.

1. Install the package: pip install crispy-tailwind

2. Update INSTALLED_APPS in your settings.py to include both crispy_forms and crispy_tailwind.

3. Set CRISPY_ALLOWED_TEMPLATE_PACKS and CRISPY_TEMPLATE_PACK to 'tailwind'.

INSTALLED_APPS = (
    ...
    "crispy_forms",
    "crispy_tailwind",
    ...
)

CRISPY_ALLOWED_TEMPLATE_PACKS = "tailwind"

CRISPY_TEMPLATE_PACK = "tailwind"

To style a form using the |crispy filter, you must first load the tailwind_filters library in your template, then apply the filter to your form object.

{% load tailwind_filters %}
{{ form|crispy }}

The get_input_class method maps a Django field to a CSS class attribute on the CSSContainer instance. It works by taking the class name of the field's widget, converting it to lowercase, and stripping the suffixes widget or input.

Example Mapping Logic:

• TextInput $\rightarrow$ text
• EmailInput $\rightarrow$ email
• CheckboxInput $\rightarrow$ checkbox
• SelectMultiple $\rightarrow$ selectmultiple (Note: the regex removes widget or input from the end)

If a mapping for the resulting name does not exist in the CSSContainer, it returns an empty string "".

The Alert class is a Tailwind-compatible version of the standard crispy_forms.bootstrap.Alert. It is used to display alert messages within a form layout. It currently defaults to an empty css_class string, allowing you to pass specific Tailwind alert classes during instantiation.

from crispy_tailwind.layout import Alert

# Example usage
alert = Alert('Success!', 'success-alert-class')

The Button class is used to create a generic button descriptor (type button) for use within a Layout object passed to the {% crispy %} template tag. By default, it applies Tailwind CSS classes for a blue button: bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded.

Arguments:

• The first argument is the label text. This text is also slugified and used as the id for the button.
• css_class: An optional string to override the default Tailwind styling.

from crispy_tailwind.layout import Button

# Example usage in a Layout
btn = Button('Click Me', 'click-me')

The Submit class is used to create a submit button descriptor for use within a Layout object passed to the {% crispy %} template tag. By default, it applies Tailwind CSS classes for a green button: bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded.

Arguments:

• The first argument is the label text. This text is also slugified and used as the id for the button.
• css_class: An optional string to override the default Tailwind styling.

from crispy_tailwind.layout import Submit

# Example usage in a Layout
submit = Submit('Search the Site', 'search this site')

# Example with custom styling
custom_submit = Submit('Save', 'save', css_class='bg-black text-white')

The Reset class is used to create a reset button descriptor for use within a Layout object passed to the {% crispy %} template tag. By default, it applies Tailwind CSS classes for a red button: bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded.

Arguments:

• The first argument is the label text. This text is also slugified and used as the id for the button.
• css_class: An optional string to override the default Tailwind styling.

from crispy_tailwind.layout import Reset

# Example usage in a Layout
reset = Reset('Reset This Form', 'Revert Me!')