Fix buttons in rte generated content

public/typo3conf/ext/ep_theme/Configuration/RTE/Default.yaml

@@ -7,11 +7,11 @@ editor:
   config:
     disableNativeSpellChecker: false
     contentsCss:
-      - "EXT:ep_theme/Resources/Public/css/rte.css?v=2020.02-01"
+      - "EXT:ep_theme/Resources/Public/css/rte.css?v=2022.07-01"
 
     stylesSet:
-      - { name: "Button", element: "a", attributes: { 'class': 'button bg-button' } }
-      - { name: "Button (volle Breite)", element: "a", attributes: { 'class': 'button bg-button button--full' } }
+      - { name: "Button", element: "a", attributes: { 'class': 'rte-button' } }
+      - { name: "Button volle Breite", element: "a", attributes: { 'class': 'rte-button--full' } }
 
     toolbarGroups:
       - { name: styles, groups: [ format, styles ] }

public/typo3conf/ext/ep_theme/Configuration/RTE/Minimal.yaml

@@ -11,7 +11,8 @@ editor:
       - "EXT:ep_theme/Resources/Public/css/rte.css?v=2020.02-01"
 
     stylesSet:
-      - { name: "Button", element: "a", attributes: { 'class': 'button' } }
+      - { name: "Button", element: "a", attributes: { 'class': 'rte-button' } }
+      - { name: "Button volle Breite", element: "a", attributes: { 'class': 'rte-button--full' } }
 
     toolbarGroups:
       - { name: paragraph, groups: [ list] }

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss

@@ -25,6 +25,27 @@ a:not(.button) {
     @apply text-ep-primary-light sbw:text-sbw-primary-dark;
 }
 
+a.rte-button {
+    @apply inline-flex items-center justify-center px-4 py-2 md:px-8;
+    @apply uppercase leading-none text-center;
+    @apply transition-colors outline-none focus:outline-none;
+    @apply bg-ep-primary-light text-white;
+    @apply sbw:bg-sbw-secondary;
+    @apply snz:bg-snz-secondary;
+    @apply uch:bg-uch-secondary;
+    @apply ser:bg-ser-secondary;
+    @apply hover:bg-ep-secondary group-hover:bg-ep-secondary;
+    @apply sbw:hover:bg-sbw-primary-dark sbw:group-hover:bg-sbw-primary-dark;
+    @apply snz:hover:bg-snz-primary-dark snz:group-hover:bg-snz-primary-dark;
+    @apply uch:hover:bg-uch-primary-dark uch:group-hover:bg-uch-primary-dark;
+    @apply ser:hover:bg-ser-primary ser:group-hover:bg-ser-primary;
+}
+
+a.rte-button--full {
+    @extend .rte-button;
+    @apply w-full;
+}
+
 table,
 .table {
     @apply w-full;

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

@@ -10,21 +10,15 @@ table {
     font-size: inherit;
 }
 
-a.button {
-    border: 1px solid #999;
-    padding: 0.25em;
-}
-
-a.bg-button {
+a.rte-button {
+    @apply inline-flex items-center justify-center px-4 py-2 md:px-8 cursor-pointer;
+    @apply uppercase leading-none text-center no-underline;
     @apply bg-ep-primary-light text-white;
-    @apply hover:bg-ep-secondary group-hover:bg-ep-secondary;
 }
 
-a.button--full {
-    border: 1px solid #999;
-    padding: 0.25em;
-    display: block;
-    width: 95%;
+a.rte-button--full {
+    @extend .rte-button;
+    @apply w-full;
 }
 
 td, th {

tailwind.config.js

@@ -4,6 +4,7 @@ const tinycolor = require('tinycolor2')
 module.exports = {
     purge: {
         content: [
+            './public/typo3conf/ext/ep_theme/Configuration/RTE/*.yaml',
             './public/typo3conf/ext/ep_theme/Configuration/TypoScript/**/*.typoscript',
             './public/typo3conf/ext/ep_theme/Resources/Private/Layouts/**/*.html',
             './public/typo3conf/ext/ep_theme/Resources/Private/Partials/**/*.html',