[Form] add tailwindcss form theme docs

Author: kbond

form/tailwindcss2.rst

@@ -0,0 +1,95 @@
+Tailwind CSS 2 Form Theme
+=========================
+
+.. versionadded:: 5.3
+
+    The Tailwind CSS 2 Form Theme was introduced in Symfony 5.3 as an
+    :doc:`experimental feature </contributing/code/experimental>`.
+
+Symfony provides a minimal form theme for `Tailwind CSS`_. Tailwind is a *utility first*
+CSS framework and provides *unlimited ways* to customize your forms. Tailwind 2.0 has
+an official `form plugin`_ that provides a basic form reset that standardizes their look
+on all browsers. This form theme requires this plugin and adds a few basic tailwind
+classes so out of the box, your forms will look decent. Customization is almost always
+going to be required so this theme makes that easy.
+
+To use, first be sure you have installed and integrated `Tailwind CSS 2.0`_ and the
+`form plugin`_. Follow their respective documentation to install.
+
+If you prefer to use the Tailwind theme on a form to form basis, include the
+``form_theme`` tag in the templates where those forms are used:
+
+.. code-block:: html+twig
+
+    {# ... #}
+    {# this tag only applies to the forms defined in this template #}
+    {% form_theme form 'tailwind_2_layout.html.twig' %}
+
+    {% block body %}
+        <h1>User Sign Up:</h1>
+        {{ form(form) }}
+    {% endblock %}
+
+Customization
+-------------
+
+Customizing css classes is especially important for this theme.
+
+Twig Form Functions
+~~~~~~~~~~~~~~~~~~~
+
+.. code-block:: twig
+
+    {{ form_row(form.title, {
+        row_class: 'my row classes',
+        label_class: 'my label classes',
+        error_item_class: 'my error item classes',
+        widget_class: 'my widget classes',
+        widget_disabled_class: 'my disabled widget classes',
+        widget_errors_class: 'my widget with error classes',
+    }) }}
+
+.. note::
+
+    When customizing the classes this way the defaults provided by the theme
+    are *overridden* opposed to merged as is the case with other themes. This
+    enables you to take full control of the classes without worrying about
+    *undoing* the generic defaults the theme provides.
+
+Project Specific Form Layout
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+.. code-block:: twig
+
+    {% use 'tailwind_2_layout.html.twig' %}
+
+    {%- block form_row -%}
+        {%- set row_class = row_class|default('my row classes') -%}
+        {{- parent() -}}
+    {%- endblock form_row -%}
+
+    {%- block widget_attributes -%}
+        {%- set widget_class = widget_class|default('my widget classes') -%}
+        {%- set widget_disabled_class = widget_disabled_class|default('my disabled widget classes') -%}
+        {%- set widget_errors_class = widget_errors_class|default('my widget with error classes') -%}
+        {{- parent() -}}
+    {%- endblock widget_attributes -%}
+
+    {%- block form_label -%}
+        {%- set label_class = label_class|default('my label classes') -%}
+        {{- parent() -}}
+    {%- endblock form_label -%}
+
+    {%- block form_help -%}
+        {%- set help_class = help_class|default('my label classes') -%}
+        {{- parent() -}}
+    {%- endblock form_help -%}
+
+    {%- block form_errors -%}
+        {%- set error_item_class = error_item_class|default('my error item classes') -%}
+        {{- parent() -}}
+    {%- endblock form_errors -%}
+
+.. _`Tailwind CSS`: https://tailwindcss.com
+.. _`Tailwind CSS 2.0`: https://tailwindcss.com/docs/installation
+.. _`form plugin`: https://github.com/tailwindlabs/tailwindcss-forms

forms.rst

@@ -1043,6 +1043,7 @@ Form Themes and Customization:
     :maxdepth: 1
 
     /form/bootstrap4
+    /form/tailwindcss2
     /form/form_customization
     /form/form_themes