chore: upgrade tailwind css from 3.4 to 4.3

assets/styles/_components.css

@@ -1,9 +1,9 @@
-@import "components/badge.css";
+@import "./components/badge.css";
-@import "components/autocomplete.css";
+@import "./components/autocomplete.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/toast.css";
+@import "./components/toast.css";
-@import "components/tooltip.css";
+@import "./components/tooltip.css";
-@import "components/timeline.css";
+@import "./components/timeline.css";
-@import "components/mail-body.css";
+@import "./components/mail-body.css";

assets/styles/app.css

@@ -1,7 +1,34 @@
-@import "tailwindcss/base";
+@import "tailwindcss";
-@import "_base.css";
+@import "./_base.css" layer(base);
+@import "./_components.css" layer(components);
 
-@import "tailwindcss/components";
+@plugin "@tailwindcss/forms";
-@import "_components.css";
 
-@import "tailwindcss/utilities";
+@source inline("rotate-90");
+
+@theme {
+    --font-sans: Lato, sans-serif;
+    --font-weight-semibold: 700;
+    --font-weight-bold: 900;
+    --color-primary: #3d8ccb;
+    --color-secondary: #f9c700;
+}
+
+/*
+ * 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/components/datepicker.css

@@ -3,11 +3,11 @@
 .flatpickr-day.selected,
 .flatpickr-day.selected:hover,
 .flatpickr-day.selected:focus {
-    background-color: theme('colors.secondary');
+    background-color: var(--color-secondary);
-    border-color: theme('colors.secondary');
+    border-color: var(--color-secondary);
 }
 
 .flatpickr-monthDropdown-months,
 .flatpickr-current-month .flatpickr-monthDropdown-months {
-    @apply form-select pt-0 pb-0 focus:outline-none focus:shadow-none;
+    @apply form-select pt-0 pb-0 focus:outline-hidden focus:shadow-none;
 }

assets/styles/components/toast.css

@@ -1,20 +1,20 @@
 @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--info {
     @apply text-gray-100;
-    background: theme('colors.blue.600');
+    background: var(--color-blue-600);
 }

assets/styles/components/tooltip.css

@@ -1,18 +1,18 @@
 @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);
 }

package.json

@@ -7,9 +7,8 @@
         "@symfony/stimulus-bridge": "^3.2.0",
         "@symfony/webpack-encore": "^4.0.0",
         "@tailwindcss/forms": "^0.5.6",
-        "@tailwindcss/typography": "^0.5.10",
+        "@tailwindcss/postcss": "^4.3.3",
         "@trevoreyre/autocomplete-js": "^2.4.1",
-        "autoprefixer": "^10.4.15",
         "chart.js": "^4.5.1",
         "core-js": "^3.23.0",
         "dropzone": "^6.0.0-beta.2",
@@ -18,13 +17,12 @@
         "htmx.org": "^2.0.11",
         "mjml": "^4.15.3",
         "postcss": "^8.4.29",
-        "postcss-import": "^15.1.0",
         "postcss-loader": "^7.3.3",
         "pretty-bytes": "^6.1.1",
         "regenerator-runtime": "^0.13.9",
         "sortablejs": "^1.15.0",
         "stimulus-use": "^0.52.2",
-        "tailwindcss": "^3.3.3",
+        "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,32 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-      './templates/**/*.twig',
-      './src/Twig/*.php',
-  ],
-  safelist: ['rotate-90'],
-  theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-    },
-    extend: {
-      fontFamily: {
-        sans: ['Lato', 'sans-serif'],
-      },
-      fontWeight: {
-        semibold: '700',
-        bold: '900',
-      },
-      colors: {
-        primary: '#3d8ccb',
-        secondary: '#f9c700',
-      }
-    },
-  },
-  plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-  ],
-}
-

templates/_partials/_alert.html.twig

@@ -1,7 +1,7 @@
 {% set type = type|default('info') %}
 
 <div class="{{ html_classes('p-4 mb-4 flex items-start space-x-2 text-gray-100 rounded-md', { 'bg-blue-600': type == 'info', 'bg-red-600': type == 'warning', 'bg-green-600': type == 'success' }) }}">
-    {{ icon(type == 'success' ? 'check' : 'alert', 'w-5 h-5 flex-shrink-0') }}
+    {{ icon(type == 'success' ? 'check' : 'alert', 'w-5 h-5 shrink-0') }}
     <div class="leading-relaxed text-base">
         {% block message %}
             {{ message | nl2br }}

templates/_partials/_maintenance_banner.html.twig

@@ -1,6 +1,6 @@
 {% if is_maintenance_mode() %}
     <div class="sticky top-0 z-50 bg-red-600 text-gray-100 px-4 lg:px-8 py-2 flex items-center justify-center space-x-2">
-        {{ icon('alert', 'w-5 h-5 flex-shrink-0') }}
+        {{ icon('alert', 'w-5 h-5 shrink-0') }}
         <span class="leading-relaxed">Wartungsmodus — das Portal ist für andere Benutzer gesperrt.</span>
     </div>
 {% endif %}

templates/_partials/_markdown_hint.html.twig

@@ -11,7 +11,7 @@
             '- Punkt': 'Aufzählung',
             '1. Punkt': 'Nummerierung',
         } %}
-            <span class="inline-flex items-center space-x-1 py-1 px-2 bg-gray-50 border border-gray-200 rounded">
+            <span class="inline-flex items-center space-x-1 py-1 px-2 bg-gray-50 border border-gray-200 rounded-sm">
                 <code>{{ example }}</code>
                 <span>{{ label }}</span>
             </span>

templates/_partials/_upload_collection_form.html.twig

@@ -12,13 +12,13 @@
     }
 }) }}>
     <div {{ stimulus_target('upload-collection', 'dropzone') }} class="w-full flex flex-col space-y-4">
-        <div class="border border-dashed border-gray-400 rounded flex flex-col justify-center items-center p-4 pointer-events-none">
+        <div class="border border-dashed border-gray-400 rounded-sm flex flex-col justify-center items-center p-4 pointer-events-none">
             {{ icon('upload', 'w-6 h-6') }}
             <span class="block text-sm text-center">{{ 'uploader.drop_files'|trans }} <strong>{{ 'uploader.click_here'|trans }}</strong></span>
         </div>
         <div class="border border-red-500 rounded-md p-4 text-red-500 hidden" {{ stimulus_target('upload-collection', 'errors') }}></div>
         <template {{ stimulus_target('upload-collection', 'previewTemplate') }}>
-            <div class="bg-gray-100 border rounded p-2">
+            <div class="bg-gray-100 border rounded-sm p-2">
                 <div class="pb-2">
                     <span class="block bg-gray-400 h-1 w-0" data-dz-uploadprogress></span>
                 </div>

templates/admin/teamer/_mailing_filter_summary.html.twig

@@ -37,7 +37,7 @@
             {% if chips|length > 0 %}
                 <div class="flex flex-wrap gap-2">
                     {% for chip in chips %}
-                        <span class="inline-flex items-center space-x-1 py-1 px-2 text-sm bg-white border border-gray-200 rounded">
+                        <span class="inline-flex items-center space-x-1 py-1 px-2 text-sm bg-white border border-gray-200 rounded-sm">
                             <span class="text-gray-500">{{ chip.label }}:</span>
                             <span>{{ chip.value }}</span>
                         </span>

templates/admin/teamer/mailing.html.twig

@@ -61,7 +61,7 @@
                 </div>
                 <div class="flex flex-wrap gap-2">
                     {% for placeholder, label in placeholders %}
-                        <span class="inline-flex items-center space-x-1 py-1 px-2 bg-gray-50 border border-gray-200 rounded">
+                        <span class="inline-flex items-center space-x-1 py-1 px-2 bg-gray-50 border border-gray-200 rounded-sm">
                             <code>{{ placeholder }}</code>
                             <span>{{ label }}</span>
                         </span>

templates/admin/work_month/modal_review.html.twig

@@ -25,14 +25,14 @@
             <a href="{{ path('app_common_download', { 'uuid': workMonth.currentDocument.uuid }) }}"
                class="flex items-center space-x-1">
                 {{ icon('download') }}
-                <span class="flex-shrink-0">Hochgeladenen Nachweis ansehen</span>
+                <span class="shrink-0">Hochgeladenen Nachweis ansehen</span>
             </a>
         {% endif %}
         <a href="{{ path('app_admin_work_month_pdf', { 'uuid': workMonth.uuid }) }}"
            class="flex items-center space-x-1"
            target="_blank">
             {{ icon('pdf') }}
-            <span class="flex-shrink-0">Nachweis aus den Daten erzeugen</span>
+            <span class="shrink-0">Nachweis aus den Daten erzeugen</span>
         </a>
     </div>
 

templates/administrative/season_assignment/detail.html.twig

@@ -37,7 +37,7 @@
                             <li>
                                 <a href="mailto:{{ teamer.communication.email }}" class="flex items-center space-x-2">
                                     {{ icon('mail', 'w-4 h-4') }}
-                                    <span class="flex-0 underline">{{ teamer.communication.email }}</span>
+                                    <span class="underline">{{ teamer.communication.email }}</span>
                                 </a>
                             </li>
                         {% endif %}
@@ -45,7 +45,7 @@
                             <li>
                                 <a href="tel:{{ teamer.communication.mobile }}" class="flex items-center space-x-2">
                                     {{ icon('phone', 'w-4 h-4') }}
-                                    <span class="flex-0 underline">{{ teamer.communication.mobile }}</span>
+                                    <span class="underline">{{ teamer.communication.mobile }}</span>
                                 </a>
                             </li>
                         {% endif %}

templates/administrative/statistics/applications_by_destination.html.twig

@@ -9,7 +9,7 @@
         </h1>
     </div>
 
-    <div class="bg-white rounded-lg shadow p-4 mb-8">
+    <div class="bg-white rounded-lg shadow-sm p-4 mb-8">
         {{ form_start(form, { attr: { class: 'flex flex-wrap items-end gap-4' } }) }}
             <div class="flex-1 min-w-[150px]">
                 {{ form_row(form.dateFrom) }}
@@ -32,11 +32,11 @@
     </p>
 
     {% if statistics is empty %}
-        <div class="bg-white rounded-lg shadow p-8 text-center text-gray-500">
+        <div class="bg-white rounded-lg shadow-sm p-8 text-center text-gray-500">
             Keine Daten im ausgewählten Zeitraum vorhanden.
         </div>
     {% else %}
-        <div class="bg-white rounded-lg shadow overflow-hidden">
+        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
             <table class="w-full text-sm">
                 <thead>
                     <tr class="bg-gray-50 border-b">

templates/administrative/statistics/feedback_by_destination.html.twig

@@ -9,7 +9,7 @@
         </h1>
     </div>
 
-    <div class="bg-white rounded-lg shadow p-4 mb-8">
+    <div class="bg-white rounded-lg shadow-sm p-4 mb-8">
         {{ form_start(form, { attr: { class: 'flex flex-wrap items-end gap-4' } }) }}
             <div class="flex-1 min-w-[150px]">
                 {{ form_row(form.dateFrom) }}
@@ -32,11 +32,11 @@
     </p>
 
     {% if statistics is empty %}
-        <div class="bg-white rounded-lg shadow p-8 text-center text-gray-500">
+        <div class="bg-white rounded-lg shadow-sm p-8 text-center text-gray-500">
             Keine Daten im ausgewählten Zeitraum vorhanden.
         </div>
     {% else %}
-        <div class="bg-white rounded-lg shadow overflow-hidden">
+        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
             <table class="w-full text-sm">
                 <thead>
                     <tr class="bg-gray-50 border-b">
@@ -55,7 +55,7 @@
                             <td class="px-4 py-3 text-right">{{ stat.providedFeedbacks }}</td>
                             <td class="px-4 py-3 text-right">{{ stat.missingFeedbacks }}</td>
                             <td class="px-4 py-3 text-right">
-                                <span class="{{ html_classes('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', {
+                                <span class="{{ html_classes('inline-flex items-center px-2 py-0.5 rounded-sm text-xs font-medium', {
                                         'bg-green-100 text-green-800': stat.percentageProvided >= 80,
                                         'bg-yellow-100 text-yellow-800': stat.percentageProvided >= 50 and stat.percentageProvided < 80,
                                         'bg-red-100 text-red-800': stat.percentageProvided < 50
@@ -80,7 +80,7 @@
                         <td class="px-4 py-3 text-right">{{ totalProvided }}</td>
                         <td class="px-4 py-3 text-right">{{ totalMissing }}</td>
                         <td class="px-4 py-3 text-right">
-                            <span class="{{ html_classes('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', {
+                            <span class="{{ html_classes('inline-flex items-center px-2 py-0.5 rounded-sm text-xs font-medium', {
                                     'bg-green-100 text-green-800': totalPercentage >= 80,
                                     'bg-yellow-100 text-yellow-800': totalPercentage >= 50 and totalPercentage < 80,
                                     'bg-red-100 text-red-800': totalPercentage < 50

templates/administrative/statistics/feedback_ratings.html.twig

@@ -9,7 +9,7 @@
         </h1>
     </div>
 
-    <div class="bg-white rounded-lg shadow p-4 mb-8">
+    <div class="bg-white rounded-lg shadow-sm p-4 mb-8">
         {{ form_start(form, { attr: { class: 'flex flex-wrap items-end gap-4' } }) }}
             <div class="flex-1 min-w-[150px]">
                 {{ form_row(form.dateFrom) }}
@@ -32,13 +32,13 @@
     </p>
 
     {% if chartsData is empty %}
-        <div class="bg-white rounded-lg shadow p-8 text-center text-gray-500">
+        <div class="bg-white rounded-lg shadow-sm p-8 text-center text-gray-500">
             Keine Feedback-Daten im ausgewählten Zeitraum vorhanden.
         </div>
     {% else %}
         <div class="grid gap-8">
             {% for chartData in chartsData %}
-                <div class="bg-white rounded-lg shadow overflow-hidden">
+                <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                     <div class="p-4 border-b bg-gray-50">
                         <h2 class="text-lg font-semibold">{{ chartData.feedbackSet.name }}</h2>
                         <p class="text-sm text-gray-600">{{ chartData.count }} Feedbacks</p>

templates/administrative/statistics/feedback_ratings_by_destination.html.twig

@@ -9,7 +9,7 @@
         </h1>
     </div>
 
-    <div class="bg-white rounded-lg shadow p-4 mb-8">
+    <div class="bg-white rounded-lg shadow-sm p-4 mb-8">
         {{ form_start(form, { attr: { class: 'flex flex-wrap items-end gap-4' } }) }}
             <div class="flex-1 min-w-[150px]">
                 {{ form_row(form.dateFrom) }}
@@ -32,11 +32,11 @@
     </p>
 
     {% if destinations is empty %}
-        <div class="bg-white rounded-lg shadow p-8 text-center text-gray-500">
+        <div class="bg-white rounded-lg shadow-sm p-8 text-center text-gray-500">
             Keine Daten im ausgewählten Zeitraum vorhanden.
         </div>
     {% else %}
-        <div class="bg-white rounded-lg shadow overflow-hidden">
+        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
             <div class="overflow-x-auto">
                 <table class="w-full text-sm">
                     <thead>

templates/administrative/teamer/modal_info.html.twig

@@ -103,20 +103,20 @@
                     <li class="py-2">
                         <a href="tel:{{ teamer.communication.phone }}" class="flex items-center space-x-2 hover:text-primary">
                             {{ icon('phone', 'w-4 h-4') }}
-                            <span class="flex-shrink-0">{{ teamer.communication.phone }}</span>
+                            <span class="shrink-0">{{ teamer.communication.phone }}</span>
                         </a>
                     </li>
                 {% endif %}
                 <li class="py-2">
                     <a href="tel:{{ teamer.communication.mobile }}" class="flex items-center space-x-2 hover:text-primary">
                         {{ icon('mobile', 'w-4 h-4') }}
-                        <span class="flex-shrink-0">{{ teamer.communication.mobile }}</span>
+                        <span class="shrink-0">{{ teamer.communication.mobile }}</span>
                     </a>
                 </li>
                 <li class="py-2">
                     <a href="mailto:{{ teamer.communication.email }}" class="flex items-center space-x-2 hover:text-primary">
                         {{ icon('at', 'w-4 h-4') }}
-                        <span class="flex-shrink-0">{{ teamer.communication.email }}</span>
+                        <span class="shrink-0">{{ teamer.communication.email }}</span>
                     </a>
                 </li>
             </ul>

templates/components/dropdown.html.twig

@@ -1,10 +1,10 @@
 <div class="relative inline-block text-left group">
-    <button type="button" class="flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-0" aria-expanded="true" aria-haspopup="true">
+    <button type="button" 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>
         {{ icon('dots', 'w-6 h-6') }}
     </button>
     <div class="hidden group-hover:block absolute right-0 top-0 z-10 w-56 origin-top-right pt-4" role="menu" 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

@@ -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 %}
@@ -52,7 +52,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 %}
@@ -68,7 +68,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 %}
@@ -96,7 +96,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 %}
@@ -204,7 +204,7 @@
 {%- block datepicker_widget -%}
     {%- 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 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 %}
@@ -222,7 +222,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/security/login.html.twig

@@ -24,7 +24,7 @@
                                id="username"
                                name="_username"
                                value="{{ last_username }}"
-                               class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
+                               class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
                                required
                                autofocus
                                autocomplete="username">
@@ -36,7 +36,7 @@
                         <input type="password"
                                id="password"
                                name="_password"
-                               class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
+                               class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
                                required
                                autocomplete="current-password">
                     </div>

templates/teamer/document/index.html.twig

@@ -16,7 +16,7 @@
                 <dd class="mt-1 text-sm leading-6 text-gray-700 sm:mt-0">
                     <a href="{{ path('app_common_download', { 'uuid': document.uuid }) }}" class="flex items-center space-x-1">
                         {{ icon('download') }}
-                        <span class="flex-shrink-0">Download</span>
+                        <span class="shrink-0">Download</span>
                     </a>
                 </dd>
             </div>

templates/teamer/season/index.html.twig

@@ -38,7 +38,7 @@
                         {% if row.document is not null %}
                             <a href="{{ path('app_common_download', { 'uuid': row.document.uuid }) }}" class="flex items-center space-x-1">
                                 {{ icon('download') }}
-                                <span class="flex-shrink-0">Vorlage herunterladen</span>
+                                <span class="shrink-0">Vorlage herunterladen</span>
                             </a>
                         {% elseif row.definition.provides == constant('App\\Config\\SeasonTaskProvision::STANDARD') %}
                             <div class="text-gray-500">kein Dokument hinterlegt</div>
@@ -60,7 +60,7 @@
                             <div>{{ document.displayName | default(document.originalFilename) }}</div>
                             <a href="{{ path('app_common_download', { 'uuid': document.uuid }) }}" class="flex items-center space-x-1">
                                 {{ icon('download') }}
-                                <span class="flex-shrink-0">Download</span>
+                                <span class="shrink-0">Download</span>
                             </a>
                         </div>
                     {% endfor %}

templates/teamer/work_month/index.html.twig

@@ -45,7 +45,7 @@
                                 <a href="{{ path('app_teamer_work_month_pdf', { 'uuid': workMonth.uuid }) }}"
                                    class="flex items-center space-x-1">
                                     {{ icon('download') }}
-                                    <span class="flex-shrink-0">Nachweis herunterladen</span>
+                                    <span class="shrink-0">Nachweis herunterladen</span>
                                 </a>
 
                                 {% if workMonth.status.value != 'approved' %}
@@ -55,7 +55,7 @@
                                        hx-target="#htmx-modal"
                                        hx-swap="outerHTML">
                                         {{ icon('upload') }}
-                                        <span class="flex-shrink-0">
+                                        <span class="shrink-0">
                                             {{ workMonth.currentDocument ? 'Erneut hochladen' : 'Unterschrieben hochladen' }}
                                         </span>
                                     </a>
@@ -65,7 +65,7 @@
                                     <a href="{{ path('app_common_download', { 'uuid': workMonth.currentDocument.uuid }) }}"
                                        class="flex items-center space-x-1 text-gray-500">
                                         {{ icon('document') }}
-                                        <span class="flex-shrink-0">
+                                        <span class="shrink-0">
                                             Hochgeladen am {{ workMonth.submittedAt|date('d.m.Y') }}
                                         </span>
                                     </a>

webpack.config.js

@@ -58,6 +58,11 @@ Encore
 
     .enablePostCssLoader()
 
+    // postcss-calc cannot parse Tailwind 4's calc(infinity * 1px) and warns on every build
+    .configureCssMinimizerPlugin((options) => {
+        options.minimizerOptions = { preset: ['default', { calc: false }] };
+    })
+
     // enables Sass/SCSS support
     //.enableSassLoader()