chore: upgrade tailwind css from 3.4 to 4.3

assets/styles/_components.css

@@ -1,9 +1,9 @@
-@import "components/button.css";
+@import "./components/button.css";
-@import "components/forms.css";
+@import "./components/forms.css";
-@import "components/gallery.css";
+@import "./components/gallery.css";
-@import "components/pagination.css";
+@import "./components/pagination.css";
-@import "components/price_calendar.css";
+@import "./components/price_calendar.css";
-@import "components/toast.css";
+@import "./components/toast.css";
-@import "components/tooltip.css";
+@import "./components/tooltip.css";
-@import "components/typography.css";
+@import "./components/typography.css";
-@import "components/rte-content.css";
+@import "./components/rte-content.css";

assets/styles/_components_admin.css

@@ -1,10 +1,10 @@
-@import "components/autocomplete.css";
+@import "./components/autocomplete.css";
-@import "components/badge.css";
+@import "./components/badge.css";
-@import "components/button.css";
+@import "./components/button.css";
-@import "components/datatable.css";
+@import "./components/datatable.css";
-@import "components/datepicker.css";
+@import "./components/datepicker.css";
-@import "components/forms.css";
+@import "./components/forms.css";
-@import "components/pagination.css";
+@import "./components/pagination.css";
-@import "components/toast.css";
+@import "./components/toast.css";
-@import "components/tooltip.css";
+@import "./components/tooltip.css";
-@import "components/typography.css";
+@import "./components/typography.css";

assets/styles/_theme.css

@@ -0,0 +1,54 @@
+/* Shared by app.css and admin.css, imported right after tailwindcss */
+@source "../../templates";
+@source "../../src";
+@source "../../assets";
+@source inline("rotate-90");
+
+@plugin "@tailwindcss/forms";
+
+@theme {
+    --font-sans: Lato, sans-serif;
+
+    --color-primary: #3d8ccb;
+    --color-secondary: #f9c700;
+    --color-primary-bg: #ebf3fa;
+    --color-primary-light: #0070e0;
+    --color-primary-medium: #165883;
+    --color-primary-dark: #18527b;
+    --color-pink: #fa1a8c;
+
+    --color-sbw-primary: #B3820F;
+    --color-sbw-secondary: #E91C26;
+    --color-sbw-primary-dark: #8D7207;
+    --color-sbw-overlay: #c20000;
+
+    --color-snz-primary: #82c3c6;
+    --color-snz-secondary: #f9c33d;
+    --color-snz-primary-dark: #82c3c6;
+
+    --color-ser-primary: #006fb6;
+    --color-ser-secondary: #DE2C1B;
+    --color-ser-primary-light: #04A4CC;
+
+    --background-image-badge-gradient: linear-gradient(120deg, rgba(150,1,103,1) 0%, rgba(158,3,106,1) 40%, rgba(250,26,140,1) 100%);
+    --background-image-brand-gradient: linear-gradient(to top right, #009fff, #165883, #18527b);
+}
+
+/*
+ * Tailwind 3 defaults that Tailwind 4 changed: borders were gray-200 instead of currentColor,
+ * and buttons had a pointer cursor.
+ */
+@layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentcolor);
+    }
+
+    button:not(:disabled),
+    [role="button"]:not(:disabled) {
+        cursor: pointer;
+    }
+}

assets/styles/_utilities.css

@@ -1,7 +1,5 @@
-@layer utilities {
+/* Reserve the scrollbar gutter so content does not shift width when a
-    /* Reserve the scrollbar gutter so content does not shift width when a
+   scrollbar appears (e.g. when a collapsible section is opened). */
-       scrollbar appears (e.g. when a collapsible section is opened). */
+@utility scroll-stable {
-    .scroll-stable {
+    scrollbar-gutter: stable;
-        scrollbar-gutter: stable;
-    }
 }

assets/styles/admin.css

@@ -1,7 +1,4 @@
-@import "tailwindcss/base";
+@import "tailwindcss" source(none);
-@import "_base.css";
+@import "./_theme.css";
-
+@import "./_base.css" layer(base);
-@import "tailwindcss/components";
+@import "./_components_admin.css" layer(components);
-@import "_components_admin.css";
-
-@import "tailwindcss/utilities";

assets/styles/app.css

@@ -1,8 +1,5 @@
-@import "tailwindcss/base";
+@import "tailwindcss" source(none);
-@import "_base.css";
+@import "./_theme.css";
-
+@import "./_base.css" layer(base);
-@import "tailwindcss/components";
+@import "./_components.css" layer(components);
-@import "_components.css";
+@import "./_utilities.css";
-
-@import "tailwindcss/utilities";
-@import "_utilities.css";

assets/styles/components/button.css

@@ -3,15 +3,15 @@
        The line height is set with each font size (text-sm/6), because text-sm's own line height would override a plain leading-6. */
     @apply inline-flex items-center justify-center space-x-2 px-4 md:px-8 py-2 border border-transparent bg-origin-border cursor-pointer;
     @apply uppercase text-center text-sm/6 md:text-base/6;
-    @apply transition-colors outline-none focus:outline-2 focus:outline-offset-2 focus:outline-primary-dark;
+    @apply transition-colors outline-hidden focus:outline-2 focus:outline-offset-2 focus:outline-primary-dark;
     @apply rounded-md;
     /* At least one line tall even when the content is only a smaller icon: line + padding + border */
-    min-height: calc(1lh + 2 * theme('spacing.2') + 2px);
+    min-height: calc(1lh + 2 * --spacing(2) + 2px);
 }
 
 .button--small {
     @apply px-2 py-1 md:px-4 text-xs/6 sm:text-sm/6;
-    min-height: calc(1lh + 2 * theme('spacing.1') + 2px);
+    min-height: calc(1lh + 2 * --spacing(1) + 2px);
 }
 
 .button--primary {

assets/styles/components/datepicker.css

@@ -3,5 +3,5 @@
 
 [data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn,
 [data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn:hover {
-    background-color: theme('colors.secondary');
+    background-color: var(--color-secondary);
 }

assets/styles/components/price_calendar.css

@@ -1,5 +1,5 @@
 .pc-day {
-    @apply relative w-full text-center py-1 px-0.5 text-sm leading-tight rounded text-white cursor-pointer;
+    @apply relative w-full text-center py-1 px-0.5 text-sm leading-tight rounded-sm text-white cursor-pointer;
 }
 
 .pc-day--out-of-month {
@@ -11,11 +11,11 @@
 }
 
 .pc-day[data-status="blocked-to-ok"] {
-    background: linear-gradient(to bottom right, theme('colors.gray.400') 50%, theme('colors.emerald.500') 50%);
+    background: linear-gradient(to bottom right, var(--color-gray-400) 50%, var(--color-emerald-500) 50%);
 }
 
 .pc-day[data-status="checkout-only"] {
-    background: linear-gradient(to bottom right, theme('colors.emerald.500') 50%, theme('colors.gray.400') 50%);
+    background: linear-gradient(to bottom right, var(--color-emerald-500) 50%, var(--color-gray-400) 50%);
 }
 
 .pc-day[data-status="past"] {
@@ -33,7 +33,7 @@
 .pc-day.pc-day--pending-start,
 .pc-day.pc-day--selected-start,
 .pc-day.pc-day--selected-end {
-    @apply bg-none outline-none bg-secondary text-gray-700;
+    @apply bg-none outline-hidden bg-secondary text-gray-700;
 }
 
 .pc-day.pc-day--in-range {

assets/styles/components/toast.css

@@ -1,25 +1,25 @@
 @import "toastify-js/src/toastify.css";
 
 .toastify {
-    @apply shadow-lg rounded;
+    @apply shadow-lg rounded-sm;
 }
 
 .toastify--success {
     @apply text-gray-100;
-    background: theme('colors.emerald.600');
+    background: var(--color-emerald-600);
 }
 
 .toastify--warning {
     @apply text-gray-100;
-    background: theme('colors.red.600');
+    background: var(--color-red-600);
 }
 
 .toastify--error {
     @apply text-gray-100;
-    background: theme('colors.red.700');
+    background: var(--color-red-700);
 }
 
 .toastify--info {
     @apply text-gray-100;
-    background: theme('colors.primary');
+    background: var(--color-primary);
 }

assets/styles/components/tooltip.css

@@ -1,71 +1,71 @@
 @import "tippy.js/dist/tippy.css";
 
 .tippy-box {
-  background-color: theme('colors.primary');
+  background-color: var(--color-primary);
 }
 .tippy-box[data-placement^='top'] > .tippy-arrow::before {
-  border-top-color: theme('colors.primary');
+  border-top-color: var(--color-primary);
 }
 .tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
-  border-bottom-color: theme('colors.primary');
+  border-bottom-color: var(--color-primary);
 }
 .tippy-box[data-placement^='left'] > .tippy-arrow::before {
-  border-left-color: theme('colors.primary');
+  border-left-color: var(--color-primary);
 }
 .tippy-box[data-placement^='right'] > .tippy-arrow::before {
-  border-right-color: theme('colors.primary');
+  border-right-color: var(--color-primary);
 }
 
 .sbw {
   .tippy-box {
-    background-color: theme('colors.sbw.secondary');
+    background-color: var(--color-sbw-secondary);
   }
   .tippy-box[data-placement^='top'] > .tippy-arrow::before {
-    border-top-color: theme('colors.sbw.secondary');
+    border-top-color: var(--color-sbw-secondary);
   }
   .tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
-    border-bottom-color: theme('colors.sbw.secondary');
+    border-bottom-color: var(--color-sbw-secondary);
   }
   .tippy-box[data-placement^='left'] > .tippy-arrow::before {
-    border-left-color: theme('colors.sbw.secondary');
+    border-left-color: var(--color-sbw-secondary);
   }
   .tippy-box[data-placement^='right'] > .tippy-arrow::before {
-    border-right-color: theme('colors.sbw.secondary');
+    border-right-color: var(--color-sbw-secondary);
   }
 }
 
 .snz {
   .tippy-box {
-    background-color: theme('colors.snz.primary-dark');
+    background-color: var(--color-snz-primary-dark);
   }
   .tippy-box[data-placement^='top'] > .tippy-arrow::before {
-    border-top-color: theme('colors.snz.primary-dark');
+    border-top-color: var(--color-snz-primary-dark);
   }
   .tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
-    border-bottom-color: theme('colors.snz.primary-dark');
+    border-bottom-color: var(--color-snz-primary-dark);
   }
   .tippy-box[data-placement^='left'] > .tippy-arrow::before {
-    border-left-color: theme('colors.snz.primary-dark');
+    border-left-color: var(--color-snz-primary-dark);
   }
   .tippy-box[data-placement^='right'] > .tippy-arrow::before {
-    border-right-color: theme('colors.snz.primary-dark');
+    border-right-color: var(--color-snz-primary-dark);
   }
 }
 
 .ser {
   .tippy-box {
-    background-color: theme('colors.ser.secondary');
+    background-color: var(--color-ser-secondary);
   }
   .tippy-box[data-placement^='top'] > .tippy-arrow::before {
-    border-top-color: theme('colors.ser.secondary');
+    border-top-color: var(--color-ser-secondary);
   }
   .tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
-    border-bottom-color: theme('colors.ser.secondary');
+    border-bottom-color: var(--color-ser-secondary);
   }
   .tippy-box[data-placement^='left'] > .tippy-arrow::before {
-    border-left-color: theme('colors.ser.secondary');
+    border-left-color: var(--color-ser-secondary);
   }
   .tippy-box[data-placement^='right'] > .tippy-arrow::before {
-    border-right-color: theme('colors.ser.secondary');
+    border-right-color: var(--color-ser-secondary);
   }
 }

deploy.php

@@ -59,7 +59,6 @@ $rsyncOptions = [
         'phpunit.xml.dist',
         'public/.htaccess',
         'ray.php',
-        'tailwind.config.js',
         'webpack.config.mjs',
         'bin/.phpunit',
         'temp/',

package.json

@@ -7,7 +7,7 @@
     "@symfony/stimulus-bridge": "^3.2.0",
     "@symfony/webpack-encore": "^7.2.0",
     "@tailwindcss/forms": "^0.5.9",
-    "autoprefixer": "^10.4.20",
+    "@tailwindcss/postcss": "^4.3.3",
     "babel-plugin-polyfill-corejs3": "^1.0.0",
     "core-js": "^3.51.0",
     "cypress": "^15.5.0",
@@ -15,7 +15,7 @@
     "lightningcss": "^1.33.0",
     "postcss": "^8.4.49",
     "postcss-loader": "^8.1.1",
-    "tailwindcss": "^3.4.15",
+    "tailwindcss": "^4.3.3",
     "tippy.js": "^6.3.7",
     "toastify-js": "^1.12.0",
     "webpack": "^5.74.0",

postcss.config.js

@@ -1,7 +1,5 @@
 module.exports = {
     plugins: {
-        'postcss-import': {},
+        '@tailwindcss/postcss': {},
-        tailwindcss: {},
-        autoprefixer: {},
     }
-}
+}

tailwind.config.js

@@ -1,52 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: [
-        './templates/**/*.twig',
-        './src/**/*.php',
-    ],
-    safelist: ['rotate-90'],
-    theme: {
-        container: {
-            center: true,
-            padding: '2rem',
-        },
-        extend: {
-            fontFamily: {
-                sans: ['Lato', 'sans-serif'],
-            },
-            colors: {
-                primary: '#3d8ccb',
-                secondary: '#f9c700',
-                'primary-bg': '#ebf3fa',
-                'primary-light': '#0070e0',
-                'primary-medium': '#165883',
-                'primary-dark': '#18527b',
-                pink: '#fa1a8c',
-                sbw: {
-                    primary: '#B3820F',
-                    secondary: '#E91C26',
-                    'primary-dark': '#8D7207',
-                    overlay: '#c20000',
-                },
-                snz: {
-                    primary: '#82c3c6',
-                    secondary: '#f9c33d',
-                    'primary-dark': '#82c3c6',
-                },
-                ser: {
-                    primary: '#006fb6',
-                    secondary: '#DE2C1B',
-                    'primary-light': '#04A4CC',
-                },
-            },
-            backgroundImage: {
-                'badge-gradient': 'linear-gradient(120deg, rgba(150,1,103,1) 0%, rgba(158,3,106,1) 40%, rgba(250,26,140,1) 100%)',
-                'brand-gradient': 'linear-gradient(to top right, #009fff, #165883, #18527b)',
-            },
-        },
-    },
-    plugins: [
-        require('@tailwindcss/forms'),
-    ],
-}
-

templates/_partials/_list_filter_bar.html.twig

@@ -28,7 +28,7 @@
                        name="q"
                        value="{{ filter.q }}"
                        placeholder="{{ form.q.vars.attr.placeholder|default('Suchen…') }}"
-                       class="block w-64 rounded-md border-0 py-1.5 pl-9 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary text-sm">
+                       class="block w-64 rounded-md border-0 py-1.5 pl-9 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary text-sm">
                 <div class="absolute inset-y-0 left-0 flex items-center pl-2.5 pointer-events-none">
                     {{ icon('search', 'w-4 h-4 text-gray-500') }}
                 </div>

templates/_partials/_loading_indicator.html.twig

@@ -1,4 +1,4 @@
 <div id="loading-indicator"
-     class="invisible fixed top-0 left-0 inset-0 z-[60] backdrop-blur-sm flex items-center justify-center transition-all duration-100">
+     class="invisible fixed top-0 left-0 inset-0 z-[60] backdrop-blur-xs flex items-center justify-center transition-all duration-100">
     {% include '_partials/_spinner.html.twig' %}
 </div>

templates/_partials/_modal.html.twig

@@ -1,5 +1,5 @@
 <div class="fixed inset-0 w-full h-full z-50" {{ stimulus_controller('modal') }} {{ stimulus_action('modal', 'close', 'modal-close@window') }}>
-    <div class="absolute inset-0 backdrop-blur-sm" {{ stimulus_action('modal', 'close', 'click') }}></div>
+    <div class="absolute inset-0 backdrop-blur-xs" {{ stimulus_action('modal', 'close', 'click') }}></div>
     <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 w-full max-w-3xl">
         <div class="{{ html_classes('relative py-4 rounded-md', { 'bg-red-500': level == 'error', 'bg-green-500': level == 'success', 'bg-yellow-500': level == 'warning', 'bg-primary-light': level == 'info' }) }}">
             <div class="flex justify-between pb-4 px-4">

templates/booking/_participant_card.html.twig

@@ -21,7 +21,7 @@
 
 <div class="py-4" id="participant-card-{{ index }}">
     <div class="flex items-start space-x-4">
-        <div class="{{ html_classes('w-12 h-12 inline-flex flex-shrink-0 items-center justify-center rounded-full font-bold', {
+        <div class="{{ html_classes('w-12 h-12 inline-flex shrink-0 items-center justify-center rounded-full font-bold', {
             'text-white': not showAsAttention,
             'bg-yellow-500': showAsAttention,
             'bg-primary-dark': not showAsError and not showAsAttention and booking_theme() == 'base',

templates/booking/_participant_form.html.twig

@@ -152,7 +152,7 @@
     {% import _self as macros %}
 
     <div class="flex items-center gap-4 pb-4 mb-4 border-b border-primary-bg">
-        <div class="{{ html_classes('w-12 h-12 inline-flex flex-shrink-0 items-center justify-center rounded-full text-white text-2xl font-bold', {
+        <div class="{{ html_classes('w-12 h-12 inline-flex shrink-0 items-center justify-center rounded-full text-white text-2xl font-bold', {
             'bg-primary-dark': booking_theme() == 'base',
             'bg-sbw-primary': booking_theme() == 'sbw',
             'bg-snz-primary-dark': booking_theme() == 'snz',
@@ -365,7 +365,7 @@
                         {{ form_errors(form.board) }}
                     {% endif %}
                     <div class="text-sm mt-2 px-2 flex items-start space-x-1">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 shrink-0">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                         </svg>
                         <span>Bitte teile uns eventuelle Unverträglichkeiten an <a href="mailto:{{ customer_service_email }}" class="text-primary-light hover:underline">{{ customer_service_email }}</a> (inkl. der Buchungsnummer) mit.</span>
@@ -425,7 +425,7 @@
                     {{ form_help(form.rentals) }}
                     {% if is_travel_start_cutoff_reached(bookingDto) %}
                         <div class="text-sm mt-2 px-2 flex items-start space-x-1">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 shrink-0">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                             </svg>
                             <span>Online nicht mehr buchbar. Bitte direkt über die <strong>Hausleitung vor Ort</strong> anfragen (vorbehaltlich Verfügbarkeit)</span>
@@ -440,7 +440,7 @@
                     {{ form_row(form.bodyDimensions.shoeSize) }}
                     {{ form_row(form.bodyDimensions.weight) }}
                     <div class="lg:col-span-3 text-sm -mt-2 px-2 flex items-start space-x-1">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 shrink-0">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                         </svg>
                         <span>{{ form.bodyDimensions.vars.help }}</span>
@@ -590,7 +590,7 @@
                             {{ form_errors(form.insurance) }}
                             {{ form_help(form.insurance) }}
                             <div class="text-sm mt-2 px-2 flex items-start space-x-1">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 shrink-0">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                                 </svg>
                                 <span>Eine Versicherung kann nur abgeschlossen werden, wenn Dein Wohnsitz in Deutschland ist.</span>

templates/booking/create/step_2.html.twig

@@ -59,7 +59,7 @@
                             {# No form_start here: this sits inside the step 2 form and nested
                                form tags are invalid. htmx posts the inputs enclosed below,
                                including the CSRF token, to the toggle route. #}
-                            <div class="mb-6 rounded border border-gray-200 bg-white p-4"
+                            <div class="mb-6 rounded-sm border border-gray-200 bg-white p-4"
                                  hx-post="{{ path('app_booking_create_step_2_applicant_toggle') }}"
                                  hx-trigger="change"
                                  hx-include="this"

templates/booking/create/step_3.html.twig

@@ -57,7 +57,7 @@
                                     {{ form_row(form.bankAccount.accountHolder) }}
                                     {{ form_row(form.bankAccount.bankName) }}
 
-                                    <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded">
+                                    <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-sm">
                                         {{ form_row(form.bankAccount.sepaMandateAccepted, {
                                             'label_attr': {'class': 'text-sm'}
                                         }) }}

templates/booking/index.html.twig

@@ -17,7 +17,7 @@
                 {% for booking in bookings %}
                     <div class="grid md:grid-cols-2 gap-4 p-2 bg-white rounded-md">
                         <div class="flex items-start space-x-4">
-                            <div class="w-12 h-12 inline-flex flex-shrink-0 items-center justify-center rounded-full bg-primary-dark text-white text-2xl font-bold">
+                            <div class="w-12 h-12 inline-flex shrink-0 items-center justify-center rounded-full bg-primary-dark text-white text-2xl font-bold">
                                 {{ loop.index }}
                             </div>
                             <div class="text-xl font-semibold">

templates/components/dropdown/index.html.twig

@@ -1,6 +1,6 @@
 <div class="relative inline-block text-left group cursor-pointer">
     <button type="button"
-            class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-0"
+            class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-hidden focus:ring-0"
             aria-expanded="true"
             aria-haspopup="true">
         <span class="sr-only">Funktionen</span>
@@ -11,7 +11,7 @@
          aria-orientation="vertical"
          aria-labelledby="menu-button"
          tabindex="-1">
-        <div class="rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <div class="rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-hidden">
             <div class="py-1 menu menu--pulldown" role="none">
                 {% block content %}{% endblock %}
             </div>

templates/forms.html.twig

@@ -286,7 +286,7 @@
 
             {{- form_widget(child, {'attr': child_attr}) -}}
             {% if not loop.last %}
-                <span class="block flex-shrink-0">.</span>
+                <span class="block shrink-0">.</span>
             {% endif %}
         {%- endfor -%}
     </div>

templates/forms_admin.html.twig

@@ -35,7 +35,7 @@
 {%- block form_widget_simple -%}
     {%- set type = type|default('text') -%}
     {%- if type != 'hidden' -%}
-        {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
+        {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
         {%- if errors|length -%}
             {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
         {% else %}
@@ -49,7 +49,7 @@
 {%- endblock form_widget_simple -%}
 
 {%- block textarea_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
     {%- if errors|length -%}
         {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
     {% else %}
@@ -62,7 +62,7 @@
 {%- endblock textarea_widget -%}
 
 {%- block checkbox_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' h-4 w-4 rounded text-primary')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' h-4 w-4 rounded-sm text-primary')|trim }) -%}
     {%- if errors|length -%}
         {%- set attr = attr|merge({'class': attr.class|default('') ~ ' border-red-500 text-red-500 ring-red-500 focus:ring-red-500' }) -%}
     {% else %}
@@ -89,7 +89,7 @@
 {% endblock %}
 
 {%- block choice_widget_collapsed -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
     {%- if errors|length -%}
         {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
     {% else %}
@@ -154,7 +154,7 @@
     {%- set minDate = form.vars.min_date ? form.vars.min_date | date('Y-m-d') : null -%}
     {%- set maxDate = form.vars.max_date ? form.vars.max_date | date('Y-m-d') : null -%}
     {%- set displayValue = value ? value|date('d.m.Y') : '' -%}
-    {%- set inputClass = 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm' -%}
+    {%- set inputClass = 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm' -%}
     {%- if errors|length -%}
         {%- set inputClass = inputClass ~ ' ring-red-500 placeholder:red-500 focus:ring-red-500' -%}
     {%- else -%}
@@ -181,7 +181,7 @@
 {%- endblock datepicker_widget %}
 
 {%- block autocomplete_widget -%}
-    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' autocomplete-input block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
+    {%- set attr = attr|merge({'class': (attr.class|default('') ~ ' autocomplete-input block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset text-sm')|trim }) -%}
     {%- if errors|length -%}
         {%- set attr = attr|merge({'class': attr.class|default('') ~ ' ring-red-500 placeholder-red-500 focus:ring-red-500' }) -%}
     {% else %}

templates/htmx_modal.html.twig

@@ -1,6 +1,6 @@
 <div id="htmx-modal"
      class="fixed inset-0 w-full h-full z-50" {{ stimulus_controller('modal') }} {{ stimulus_action('modal', 'close', 'modal-close@window') }}>
-    <div class="absolute inset-0 w-full h-full bg-gray-300/50 backdrop-blur-sm" {{ stimulus_action('modal', 'close', 'click') }}></div>
+    <div class="absolute inset-0 w-full h-full bg-gray-300/50 backdrop-blur-xs" {{ stimulus_action('modal', 'close', 'click') }}></div>
     <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 w-full max-w-3xl">
         <div class="relative bg-white py-8 rounded-md shadow-lg">
             <div class="flex justify-between pb-4 px-8">

templates/voucher/_summary.html.twig

@@ -23,7 +23,7 @@
         {% if voucherThumbnail %}
             <img src="{{ asset(voucherThumbnail) }}"
                  alt="Motiv {{ voucher.template.label }}"
-                 class="block w-full max-w-sm h-auto mb-4 shadow">
+                 class="block w-full max-w-sm h-auto mb-4 shadow-sm">
         {% endif %}
 
         <div class="border border-primary-bg mb-4">