Symfony default form template customized

Author: digitaldreams

config/packages/twig.yaml

@@ -1,2 +1,3 @@
 twig:
     default_path: '%kernel.project_dir%/templates'
+    form_themes: ['form/tailwind.html.twig']

postcss.config.js

@@ -2,7 +2,7 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
 
     // Specify the paths to all of the template files in your project
     content: [
-        './templates/**/*.html.twig',
+        './templates/**/*.twig',
     ],
 
     // This is the function used to extract class names from your templates
@@ -15,12 +15,12 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
 
         return broadMatches.concat(innerMatches)
     }
-})
+});
 
 module.exports = {
     plugins: [
         require('tailwindcss'),
         require('autoprefixer'),
         purgecss,
     ]
-}
+};

templates/form/tailwind.html.twig

@@ -0,0 +1,24 @@
+{% use "form_div_layout.html.twig" %}
+
+{# Widgets #}
+{%- block form_widget_simple -%}
+    {%- set type = type|default('text') -%}
+    {%- if type == 'range' or type == 'color' -%}
+        {# Attribute "required" is not supported #}
+        {%- set required = false -%}
+    {%- endif -%}
+    <input class="bg-gray-400 bg-placeholder-gray-300 border-gray-600 focus:bg-white w-full p-2 rounded" type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
+{%- endblock form_widget_simple -%}
+
+{%- block form_row -%}
+    {%- set widget_attr = {} -%}
+    {%- if help is not empty -%}
+        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
+    {%- endif -%}
+    <div class="m-3 pt-3" {% with {attr: row_attr} %}{{ block('attributes') }}{% endwith %}>
+        {{- form_label(form) -}}
+        {{- form_errors(form) -}}
+        {{- form_widget(form, widget_attr) -}}
+        {{- form_help(form) -}}
+    </div>
+{%- endblock form_row -%}

templates/reset_password/check_email.html.twig

@@ -3,6 +3,8 @@
 {% block title %}Password Reset Email Sent{% endblock %}
 
 {% block body %}
-    <p>An email has been sent that contains a link that you can click to reset your password. This link will expire in {{ tokenLifetime|date('g') }} hour(s).</p>
-    <p>If you don't receive an email please check your spam folder or <a href="{{ path('app_forgot_password_request') }}">try again</a>.</p>
+    <p class="text-center">An email has been sent that contains a link that you can click to reset your password. This link will expire in {{ tokenLifetime|date('g') }} hour(s).</p>
+    <p>If you don't receive an email please check your spam folder or
+        <a class="font-bold" href="{{ path('app_forgot_password_request') }}">try again</a>.
+    </p>
 {% endblock %}

templates/reset_password/request.html.twig

@@ -3,20 +3,22 @@
 {% block title %}Reset your password{% endblock %}
 
 {% block body %}
-    {% for flashError in app.flashes('reset_password_error') %}
-        <div class="alert alert-danger" role="alert">{{ flashError }}</div>
-    {% endfor %}
-    <h1>Reset your password</h1>
+    <div class="w-full md:w-1/2 mx-auto">
+        {% for flashError in app.flashes('reset_password_error') %}
+            <div class="bg-red-400 p-3" role="alert">{{ flashError }}</div>
+        {% endfor %}
+        <h1>Reset your password</h1>
 
-    {{ form_start(requestForm) }}
+        {{ form_start(requestForm) }}
         {{ form_row(requestForm.email) }}
-        <div>
-            <small>
-                Enter your email address and we we will send you a
-                link to reset your password.
-            </small>
-        </div>
 
-        <button class="btn btn-primary">Send password reset email</button>
-    {{ form_end(requestForm) }}
+        <p class="p-4 m-3 text-gray-500">
+            Enter your email address and we we will send you a
+            link to reset your password.
+        </p>
+        <div class="text-center">
+            <button class="bg-green-600 p-3 text-white">Send password reset email</button>
+            {{ form_end(requestForm) }}
+        </div>
+    </div>
 {% endblock %}

templates/reset_password/reset.html.twig

@@ -7,6 +7,6 @@
 
     {{ form_start(resetForm) }}
         {{ form_row(resetForm.plainPassword) }}
-        <button class="btn btn-primary">Reset password</button>
+        <button class="">Reset password</button>
     {{ form_end(resetForm) }}
 {% endblock %}

webpack.config.js

@@ -73,9 +73,10 @@ Encore
     //.enableReactPreset()
     //.addEntry('admin', './assets/js/admin.js')
 ;
+
 Encore.enablePostCssLoader(function(options) {
     options.config = {
         path: 'postcss.config.js'
     }
-})
+});
 module.exports = Encore.getWebpackConfig();