Skip to main content

Tailwind CSS for Django Crispy Forms

Project description

https://img.shields.io/badge/code%20style-black-000000.svg

A Tailwind CSS template pack for the wonderful django-crispy-forms.

WARNING

This project is still in its early stages of development. Any contributions to the package would be very welcomed.

Currently the template pack allows the use of the |crispy filter to style your form. Here is an example image.

https://django-crispy-forms.github.io/crispy-tailwind/_images/crispy_form.png

How to install

Install via pip.

pip install crispy-tailwind

You will need to update your project’s settings file to add crispy_forms and crispy_tailwind to your project’s INSTALLED_APPS setting. Also set tailwind as an allowed template pack and as the default template pack for your project:

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

CRISPY_ALLOWED_TEMPLATE_PACKS = "tailwind"

CRISPY_TEMPLATE_PACK = "tailwind"

How to use

This project is still in its early stages.

Current functionality allows the |crispy filter to be used to style your form. In your template:

  1. Load the filter: {% load tailwind_filters %}

  2. Apply the crispy filter: {{ form|crispy }}

We can also use the {% crispy %} tag to allow usage of crispy-forms’ FormHelper and Layout. In your template:

  1. Load the crispy tag: {% load crispy_forms_tags %}

  2. Add FormHelper to your form and use crispy-forms to set-up your form

  3. Use the crispy tag {% crispy form %} in your template

Documentation

The documentation for this project is available here: https://django-crispy-forms.github.io/crispy-tailwind/index.html

FAQs

What about custom widgets?

The template pack includes default styles for widgets included in Django itself. Styling of widget instances can be done by using the widget.attrs argument when creating the widget.

For example the following form will render <input type="text" name="name" class="customtextwidget custom-css" required id="id_name">:

class CustomTextWidget(forms.TextInput):
    pass

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

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

crispy-tailwind-1.0.2.tar.gz (19.2 kB view details)

Uploaded Source

Built Distribution

crispy_tailwind-1.0.2-py3-none-any.whl (25.7 kB view details)

Uploaded Python 3

File details

Details for the file crispy-tailwind-1.0.2.tar.gz.

File metadata

  • Download URL: crispy-tailwind-1.0.2.tar.gz
  • Upload date:
  • Size: 19.2 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/4.0.2 CPython/3.11.8

File hashes

Hashes for crispy-tailwind-1.0.2.tar.gz
Algorithm Hash digest
SHA256 5e56503fda102192c433c86ef105cd95bb63fd3441bde22ba3dab4a365460353
MD5 079f46e398b732ddf8f224408de4c1d3
BLAKE2b-256 f15b00d9fa16e2c9ca7cfd2e48dca15be6078087af0e3f3d84098f3d8d3e4d18

See more details on using hashes here.

File details

Details for the file crispy_tailwind-1.0.2-py3-none-any.whl.

File metadata

File hashes

Hashes for crispy_tailwind-1.0.2-py3-none-any.whl
Algorithm Hash digest
SHA256 91182d84d1e050d04b8c7b8f186e83a479bf37d8cf18b5d3db8320938862df0c
MD5 50e5df68091fa01880a732d742ae4fe8
BLAKE2b-256 eefbf85bd915b2df51481b477e67fb733811afbe530562ff6e6de6e2a7d65cbb

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page