New in Symfony 5.3: Tailwind CSS Form Theme

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.

                Sponsor the Symfony project.

http://feedproxy.google.com/~r/symfony/blog/~3/r3LiFSXhmKo/new-in-symfony-5-3-tailwind-css-form-theme

созданный 4y | 28 апр. 2021 г., 07:20:07


Войдите, чтобы добавить комментарий

Другие сообщения в этой группе

SymfonyOnline June 2025: Demystify the Magic of the Container🪄

SymfonyOnline June 2025 is almost here, starting in almost 2 months on:

June 10-11: Workshop days June 12-13: Online conference days in English. All talks will be available for replay as soon

13 мая 2025 г., 15:20:17 | Symfony
New in Symfony 7.3: ObjectMapper Component

Contributed by Antoine Bluchet in

13 мая 2025 г., 08:20:10 | Symfony
New in Symfony 7.3: Explaining Security Voter Decisions

Contributed by Nicolas Grekas in

12 мая 2025 г., 09:10:10 | Symfony
A Week of Symfony #958 (May 5–11, 2025)

This week, we published the second beta of Symfony 7.3, ahead of its final release later in May 2025. Meanwhile, we continued sharing posts about the new features of Symfony 7.3 and the upcoming Symfo

11 мая 2025 г., 09:50:17 | Symfony
Symfony 7.3.0-BETA2 released

Symfony 7.3.0-BETA2 has just been released. This is a pre-release version of Symfony 7.3. If you want to test it in your own applications before its final release, run the following commands:

10 мая 2025 г., 13:10:15 | Symfony
New in Symfony 7.3: Mailer Security Improvements

The Symfony Mailer component provides many security-related features like signing and encrypting email messages. In Symfony 7.3 we're pushing those features even further to give you greater control an

9 мая 2025 г., 09:20:10 | Symfony
SymfonyOnline June 2025: Detect Hidden Defects: Check Your PHP Tests

SymfonyOnline June 2025 is almost here, starting in almost 2 months on:

June 10-11: Workshop days. It is possible to attend 1 two-day training or 2 one-day trainings. June 12-13: Online confe

8 мая 2025 г., 14:40:19 | Symfony