Replace tailwind multi-theme plugin

package.json

@@ -30,7 +30,7 @@
     "querystringify": "^2.2.0",
     "slick-carousel": "^1.8.1",
     "sticky-js": "^1.3.0",
-    "tailwindcss-multi-theme": "^1.0.4",
+    "tailwindcss-alt": "^3.0.0",
     "vue": "^2.6.14",
     "vue-router": "^3.5.2",
     "vue-scrollto": "^2.20.0",

public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript

@@ -19,7 +19,7 @@ page {
         30 {
             value = {$plugin.tx_eptheme.settings.themekey}
             if.isTrue = {$plugin.tx_eptheme.settings.themekey}
-            noTrimWrap = | theme-||
+            noTrimWrap = | ||
         }
         40 = TEXT
         40.value = ">

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss

@@ -103,7 +103,7 @@
         &:after {
             content: "";
             @apply absolute top-100 left-0 mt-2 mb-2 border-b-4 w-48;
-            @apply ep:border-ep-primary-dark sbw:border-sbw-primary-dark;
+            @apply border-ep-primary-dark sbw:border-sbw-primary-dark;
         }
     }
     .-translate-xy-1\/2 {

tailwind.config.js

@@ -66,7 +66,6 @@ module.exports = {
                 }
             },
         }),
-        themeVariants: [ 'ep', 'sbw', 'snz', 'uch' ],
         extend: {
             colors: {
                 'overlay': {
@@ -85,8 +84,6 @@ module.exports = {
                 'sbw': {
                     'primary': '#f0bc44',
                     'secondary': '#ee525a',
-                    'primary-light': '#f0bc44',
-                    'primary-medium': '#f0bc44',
                     'primary-dark': '#f0bc44',
                     'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
                     'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
@@ -118,9 +115,9 @@ module.exports = {
         },
     },
     variants: {
-        backgroundColor: ({ after }) => after([ 'ep', 'ep:hover', 'sbw', 'sbw:hover', 'snz', 'snz:hover', 'uch', 'uch:hover', 'even', 'odd' ]),
-        textColor: ({ after }) => after([ 'ep', 'ep:hover', 'ep:focus', 'sbw', 'sbw:hover', 'snz', 'snz:hover', 'uch', 'uch:hover' ]),
-        borderColor: ({ after }) => after([ 'ep', 'sbw','snz', 'uch' ]),
+        backgroundColor: ({ after }) => after([ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'even', 'odd' ]),
+        textColor: ({ after }) => after([ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ]),
+        borderColor: ({ after }) => after([ 'sbw','snz', 'uch' ]),
         display: ({ after }) => after(['group-hover']),
         visibility: ({ after }) => after(['group-hover']),
         opacity: ({ after }) => after(['group-hover']),
@@ -129,7 +126,9 @@ module.exports = {
         padding: ({ after }) => after(['even', 'odd']),
     },
     plugins: [
-        require('tailwindcss-multi-theme'),
+        require('tailwindcss-alt')({
+            variants: ['sbw', 'snz', 'uch'],
+        }),
         require('@tailwindcss/custom-forms'),
         require('@tailwindcss/aspect-ratio'),
         plugin(function ({addVariant, e}) {