small adjustments to the form layout, added tailwind config, added tw…

…ig components and added tailwind worker to the symfony cli

.symfony.local.yaml

@@ -0,0 +1,3 @@
+workers:
+  tailwind:
+    cmd: ['symfony', 'console', 'tailwind:build', '--watch']

config/packages/twig.yaml

@@ -1,5 +1,7 @@
 twig:
     file_name_pattern: '*.twig'
+    form_themes:
+        - 'form/layout.html.twig'
 
 when@test:
     twig:

config/packages/twig_component.yaml

@@ -0,0 +1,5 @@
+twig_component:
+    anonymous_template_directory: 'components/'
+    defaults:
+        # Namespace & directory for components
+        App\Twig\Components\: 'components/'

tailwind.config.js

@@ -0,0 +1,20 @@
+const plugin = require('tailwindcss/plugin');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    "./vendor/tales-from-a-dev/flowbite-bundle/templates/**/*.html.twig",
+    "./assets/**/*.js",
+    "./templates/**/*.html.twig",
+    "./src/Twig/Components/**/*.php",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    plugin(function({ addVariant }) {
+      addVariant('turbo-frame', 'turbo-frame[src] &');
+    }),
+  ],
+}

templates/form/layout.html.twig

@@ -0,0 +1,13 @@
+{% use '@TalesFromADevFlowbite/form/default.html.twig' %}
+
+{% block class_input_error -%}
+    bg-red-50 border-red-300 text-red-800 placeholder-red-800 dark:bg-gray-800 dark:text-red-400 dark:border-red-800 dark:placeholder-red-400 focus:z-10 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500
+{%- endblock class_input_error %}
+
+{% block class_text_error -%}
+    mt-2 text-sm text-red-800 dark:text-red-400
+{%- endblock class_text_error %}
+
+{% block class_label_error -%}
+    block mb-2 text-sm font-medium text-red-800 dark:text-red-400
+{%- endblock class_label_error %}