Upgrade to tailwind 2.0

package.json

@@ -42,8 +42,8 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.14.8",
     "@symfony/webpack-encore": "^1.5.0",
-    "@tailwindcss/custom-forms": "^0.2.1",
+    "@tailwindcss/forms": "^0.3.3",
-    "autoprefixer": "^9.4.6",
+    "autoprefixer": "^10.3.1",
     "core-js": "^3.15.2",
     "file-loader": "^6.2.0",
     "node-sass": "^4.14.1",
@@ -52,7 +52,7 @@
     "sass-loader": "^9.0.3",
     "sass-mq": "^3.3.2",
     "smoothscroll-polyfill": "^0.4.4",
-    "tailwindcss": "^1.9.6",
+    "tailwindcss": "^2.2.7",
     "tinycolor2": "^1.4.1",
     "vue-loader": "^15.9.7",
     "vue-template-compiler": "^2.6.14"

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue

@@ -21,8 +21,8 @@
                         <td class="text-left align-top">{{ event.dateTravel | date }}</td>
                         <td class="text-left align-top">{{ event.product }}</td>
                         <td class="text-left align-top">{{ event.bookingNumber }}</td>
-                        <td class="text-right align-top whitespace-no-wrap">{{ formatCurrency(event.price) }}</td>
+                        <td class="text-right align-top whitespace-nowrap">{{ formatCurrency(event.price) }}</td>
-                        <td class="text-right align-top whitespace-no-wrap" :class="{ 'text-red-500': hasOutstandingPayment(event) }">{{ calculateBalance(event) }}</td>
+                        <td class="text-right align-top whitespace-nowrap" :class="{ 'text-red-500': hasOutstandingPayment(event) }">{{ calculateBalance(event) }}</td>
                         <td class="text-left align-top">{{ status[event.status] }}</td>
                         <td class="flex space-x-1">
                             <a :href="getDownloadUrl(event, 'confirmation')" target="_blank" class="button button--action button--small">

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_calendar.scss

@@ -35,25 +35,25 @@
 }
 
 .label-success-danger {
-    background: linear-gradient(to bottom right, theme('colors.green-500') 50%, theme('colors.red-500') 50%);
+    background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.red.500') 50%);
 }
 
 .label-success-warning {
-    background: linear-gradient(to bottom right, theme('colors.green-500') 50%, theme('colors.red-500') 50%);
+    background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.red.500') 50%);
 }
 
 .label-danger-success {
-    background: linear-gradient(to bottom right, theme('colors.red-500') 50%, theme('colors.green-500') 50%);
+    background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.green.500') 50%);
 }
 
 .label-warning-success {
-    background: linear-gradient(to bottom right, theme('colors.red-500') 50%, theme('colors.green-500') 50%);
+    background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.green.500') 50%);
 }
 
 .label-danger-warning {
-    background: linear-gradient(to bottom right, theme('colors.red-500') 50%, theme('colors.red-500') 50%);
+    background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.red.500') 50%);
 }
 
 .label-warning-danger {
-    background: linear-gradient(to bottom right, theme('colors.red-500') 50%, theme('colors.red-500') 50%);
+    background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.red.500') 50%);
 }

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html

@@ -29,7 +29,7 @@
                         <tbody>
                             <f:for each="{pricetable}" as="row" iteration="iteration">
                                 <tr class="even:bg-gray-200">
-                                    <td class="px-2 py-1 border border-gray-200 whitespace-no-wrap">
+                                    <td class="px-2 py-1 border border-gray-200 whitespace-nowrap">
                                         {row.roomName}
                                         <div class="lg:hidden">
                                             <f:if condition="{row.roomAvailable}">

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html

@@ -370,7 +370,7 @@
                                     </span>
                                 </div>
                             </td>
-                            <td class="px-2 py-1 whitespace-no-wrap" x-bind:class="!row.roomAvailable && !row.isHideBookingButton && 'line-through'"
+                            <td class="px-2 py-1 whitespace-nowrap" x-bind:class="!row.roomAvailable && !row.isHideBookingButton && 'line-through'"
                                 x-text="calculatePrice(row.roomPrice, row.roomBusPrice, row.roomDiscount) + ' €'"></td>
                             <td class="px-2 py-1">
                                 <div class="flex items-center space-x-1">
@@ -431,7 +431,7 @@
                                 <template x-for="optionalService in section.services">
                                     <dl class="flex items-start justify-between mb-0">
                                         <dt class="font-normal" x-text="optionalService.label + ':'"></dt>
-                                        <dd class="whitespace-no-wrap" x-text="optionalService.price + ' €'"></dd>
+                                        <dd class="whitespace-nowrap" x-text="optionalService.price + ' €'"></dd>
                                     </dl>
                                 </template>
                             </div>

tailwind.config.js

@@ -2,13 +2,6 @@ const plugin = require('tailwindcss/plugin')
 const tinycolor = require('tinycolor2')
 
 module.exports = {
-    future: {
-        removeDeprecatedGapUtilities: true,
-        purgeLayersByDefault: true,
-    },
-    experimental: {
-        applyComplexClasses: true,
-    },
     purge: {
         mode: 'layers',
         layers: ['components', 'utilities'],
@@ -30,42 +23,12 @@ module.exports = {
         fontFamily: {
             'sans': [ 'Lato', 'sans-serif' ],
         },
-        customForms: theme => ({
+        screens: {
-            default: {
+            sm: '640px',
-                'input, textarea, select, multiselect': {
+            md: '768px',
-                    paddingTop: theme('spacing.4'),
+            lg: '1024px',
-                    paddingBottom: theme('spacing.4'),
+            xl: '1280px',
-                    paddingLeft: theme('spacing.8'),
-                    paddingRight: theme('spacing.8'),
-                    borderColor: theme('colors.gray.500'),
-                    borderRadius: undefined,
-                    '&:focus': {
-                        borderColor: undefined,
-                        boxShadow: undefined,
         },
-                },
-                'checkbox, radio': {
-                    width: theme('spacing.6'),
-                    height: theme('spacing.6'),
-                    backgroundColor: theme('colors.white'),
-                    borderColor: undefined,
-                    '&:focus': {
-                        borderColor: undefined,
-                        boxShadow: undefined,
-                    },
-                    '&:checked': {
-                        backgroundColor: theme('colors.ep.secondary'),
-                        boxShadow: undefined,
-                    },
-                },
-            },
-            error: {
-                'input, textarea, select, multiselect': {
-                    color: theme('colors.red.500'),
-                    borderColor: theme('colors.red.500'),
-                }
-            },
-        }),
         extend: {
             colors: {
                 'overlay': {
@@ -129,7 +92,6 @@ module.exports = {
         require('tailwindcss-alt')({
             variants: ['sbw', 'snz', 'uch'],
         }),
-        require('@tailwindcss/custom-forms'),
         require('@tailwindcss/aspect-ratio'),
         plugin(function ({addVariant, e}) {
             addVariant('first-type', ({modifySelectors, separator}) => {