Skip to content

Commit c160401

Browse files
committed
[Form] add tailwindcss form theme docs
1 parent 452ea2b commit c160401

File tree

2 files changed

+91
-0
lines changed

2 files changed

+91
-0
lines changed

form/tailwindcss2.rst

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
Tailwind CSS 2 Form Theme
2+
=========================
3+
4+
Symfony provides a minimal form theme for `Tailwind CSS`_. Tailwind is a *utility first*
5+
CSS framework and provides *unlimited ways* to customize your forms. Tailwind 2.0 has
6+
an official `form plugin`_ that provides a basic form reset that standardizes their look
7+
on all browsers. This form theme requires this plugin and adds a few basic tailwind
8+
classes so out of the box, your forms will look decent. Customization is almost always
9+
going to be required so this theme makes that easy.
10+
11+
To use, first be sure you have installed and integrated `Tailwind CSS 2.0`_ and the
12+
`form plugin`_. Follow their respective documentation to install.
13+
14+
If you prefer to use the Tailwind theme on a form to form basis, include the
15+
``form_theme`` tag in the templates where those forms are used:
16+
17+
.. code-block:: html+twig
18+
19+
{# ... #}
20+
{# this tag only applies to the forms defined in this template #}
21+
{% form_theme form 'tailwind_2_layout.html.twig' %}
22+
23+
{% block body %}
24+
<h1>User Sign Up:</h1>
25+
{{ form(form) }}
26+
{% endblock %}
27+
28+
Customization
29+
-------------
30+
31+
Customizing css classes is especially important for this theme.
32+
33+
Twig Form Functions
34+
~~~~~~~~~~~~~~~~~~~
35+
36+
.. code-block:: twig
37+
38+
{{ form_row(form.title, {
39+
row_class: 'my row classes',
40+
label_class: 'my label classes',
41+
error_item_class: 'my error item classes',
42+
widget_class: 'my widget classes',
43+
widget_disabled_class: 'my disabled widget classes',
44+
widget_errors_class: 'my widget with error classes',
45+
}) }}
46+
47+
.. note::
48+
49+
When customizing the classes this way the defaults provided by the theme
50+
are *overridden* opposed to merged as is the case with other themes. This
51+
enables you to take full control of the classes without worrying about
52+
*undoing* the generic defaults the theme provides.
53+
54+
Project Specific Form Layout
55+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
56+
57+
.. code-block:: twig
58+
59+
{% use 'tailwind_2_layout.html.twig' %}
60+
61+
{%- block form_row -%}
62+
{%- set row_class = row_class|default('my row classes') -%}
63+
{{- parent() -}}
64+
{%- endblock form_row -%}
65+
66+
{%- block widget_attributes -%}
67+
{%- set widget_class = widget_class|default('my widget classes') -%}
68+
{%- set widget_disabled_class = widget_disabled_class|default('my disabled widget classes') -%}
69+
{%- set widget_errors_class = widget_errors_class|default('my widget with error classes') -%}
70+
{{- parent() -}}
71+
{%- endblock widget_attributes -%}
72+
73+
{%- block form_label -%}
74+
{%- set label_class = label_class|default('my label classes') -%}
75+
{{- parent() -}}
76+
{%- endblock form_label -%}
77+
78+
{%- block form_help -%}
79+
{%- set help_class = help_class|default('my label classes') -%}
80+
{{- parent() -}}
81+
{%- endblock form_help -%}
82+
83+
{%- block form_errors -%}
84+
{%- set error_item_class = error_item_class|default('my error item classes') -%}
85+
{{- parent() -}}
86+
{%- endblock form_errors -%}
87+
88+
.. _`Tailwind CSS`: https://tailwindcss.com
89+
.. _`Tailwind CSS 2.0`: https://tailwindcss.com/docs/installation
90+
.. _`form plugin`: https://github.com/tailwindlabs/tailwindcss-forms

forms.rst

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1043,6 +1043,7 @@ Form Themes and Customization:
10431043
:maxdepth: 1
10441044

10451045
/form/bootstrap4
1046+
/form/tailwindcss2
10461047
/form/form_customization
10471048
/form/form_themes
10481049

0 commit comments

Comments
 (0)