New in Symfony 5.3: Tailwind CSS Form Theme

Symfony 5.3 is backed by:
Warning: This post is about an unsupported Symfony version. Some of this information may be out of date. Read the most recent Symfony Docs.
Contributed by
Kevin Bond
in #40449.
Tailwind CSS is the most popular utility-first CSS framework. Its unique (and odd-looking at first) philosophy is making it a resounding success and it's reshaping the way many applications manage their CSS.
Symfony includes ready-to-use themes to make your forms match the look and feel of other popular frameworks such as Bootstrap and Foundation. That's why in Symfony 5.3 we've added a new Tailwind CSS theme for Symfony forms.
The new theme is based on Tailwind CSS 2.x and its official Tailwind CSS form plugin. Due to the nature of Tailwind CSS, there's an unlimited number of ways to style forms. That's why the form theme applies the absolute minimum styles to make them usable and also provides customization options for each form field part. Start by applying the theme to some form:
1 2 3 4 5 6
{% form_theme form 'tailwind_2_layout.html.twig' %}
{% block body %}
<h1>User Sign Up:</h1>
{{ form(form) }}
{% endblock %}
Then, you can customize each part of the form field using the *_class
options:
1 2 3 4 5 6 7 8
{{ form_row(form.username, {
row_class: 'mt-2 px-3 ...',
label_class: 'font-semibold text-gray-600 ...',
error_item_class: 'text-red-700 ...',
widget_class: 'border border-gray-200 bg-gray-50 ...',
widget_disabled_class: 'border-dashed text-gray-200 ...',
widget_errors_class: 'border-double border-red-500 bg-red-50 ...',
}) }}
If you want to apply the same styles to different fields and/or forms, you don't have to repeat the same custom styles over and over again. Instead, create your own form theme based on the Tailwind CSS theme as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
{# templates/form/theme.html.twig #}
{% use 'tailwind_2_layout.html.twig' %}
{% block form_row %}
{% set row_class = row_class|default('mt-2 px-3 ...') %}
{{ parent() }}
{% endblock form_row %}
{% block form_label %}
{% set label_class = label_class|default('font-semibold text-gray-600 ...') %}
{{ parent() }}
{% endblock form_label %}
{# ... #}
Then, register and use this theme in your application the same as any other custom Symfony form theme.
Help the Symfony project!
As with any Open-Source project, contributing code or documentation is the most common way to help, but we also have a wide range of sponsoring opportunities.
Comments
Comments are closed.
To ensure that comments stay relevant, they are closed for old posts.
Tailwind CSS allows to use inlined styles and/or semantic classes and even combine them. It all depends on the context where you use those styles.
However; Users will have to add the form theme in the paths to be analyzed during the purge process, if not they are likely to have (bad) surprises during the build! ^^