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.
Looks good! 👍
These styled CSS classes are just wrong. The class should represent semantic meaning and the styles should be separated in style sheets. For example, the message should have 'error' class and stylesheet should use 'text-red-700' mixin from the theme.
@Josef it depends. Maybe these form-related styles are only used in this form theme, so it's fine to just use them instead of creating semantic classes for them.
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.
Goooood! Thanks! 💫
Interesting, maybe this will also help styling form themes for non-tailwind users
@Josef the creator of tailwind css actually wrote something very interesting on that subject : https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
That's a great news ! 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! ^^
@Felix you are right. However, since the form theme will be stored in your templates directory, it will be already included in the paths to scan for the PurgeCSS process.
@Javier indeed! My bad i missed the first commented line on your exemple showing the form theme template stored in the templates directory 👍🏼