From 3d02e6dc0cdd03aae38e320d2f83a6483cc9d1df Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 30 May 2024 19:06:47 +0200
Subject: [PATCH 1/2] Move custom `tw-` helpers to tailwind plugins

---
 tailwind.config.js      | 23 +++++++++++++++++++++++
 web_src/css/helpers.css | 16 ----------------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 94dfdbced4543..f0be220cbc4f8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 import {readFileSync} from 'node:fs';
 import {env} from 'node:process';
 import {parse} from 'postcss';
+import plugin from 'tailwindcss/plugin.js';
 
 const isProduction = env.NODE_ENV !== 'development';
 
@@ -98,4 +99,26 @@ export default {
       })),
     },
   },
+  plugins: [
+    plugin(({addUtilities}) => {
+      addUtilities({
+        // proposed class from https://github.com/tailwindlabs/tailwindcss/pull/12128
+        '.break-anywhere': {
+          'overflow-wrap': 'anywhere',
+        },
+        // tw-hidden must win all other "display: xxx !important" classes to get the chance to "hide" an element.
+        // do not use:
+        // * "[hidden]" attribute: it's too weak, can not be applied to an element with "display: flex"
+        // * ".hidden" class: it has been polluted by Fomantic UI in many cases
+        // * inline style="display: none": it's difficult to tweak
+        // * jQuery's show/hide/toggle: it can not show/hide elements with "display: xxx !important"
+        // only use:
+        // * this ".tw-hidden" class
+        // * showElem/hideElem/toggleElem functions in "utils/dom.js"
+        '.hidden.hidden': {
+          'display': 'none',
+        },
+      });
+    }),
+  ],
 };
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 60ecd7db72f8f..15df9f3a4532e 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -35,22 +35,6 @@ Gitea's private styles use `g-` prefix.
 .interact-bg:hover { background: var(--color-hover) !important; }
 .interact-bg:active { background: var(--color-active) !important; }
 
-/*
-tw-hidden must win all other "display: xxx !important" classes to get the chance to "hide" an element.
-do not use:
-* "[hidden]" attribute: it's too weak, can not be applied to an element with "display: flex"
-* ".hidden" class: it has been polluted by Fomantic UI in many cases
-* inline style="display: none": it's difficult to tweak
-* jQuery's show/hide/toggle: it can not show/hide elements with "display: xxx !important"
-only use:
-* this ".tw-hidden" class
-* showElem/hideElem/toggleElem functions in "utils/dom.js"
-*/
-.tw-hidden.tw-hidden { display: none !important; }
-
-/* proposed class from https://github.com/tailwindlabs/tailwindcss/pull/12128 */
-.tw-break-anywhere { overflow-wrap: anywhere !important; }
-
 @media (max-width: 767.98px) {
   /* double selector so it wins over .tw-flex (old .gt-df) etc */
   .not-mobile.not-mobile {

From a042f2d0b3531f2719242be21815cd73562f9696 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 3 Jun 2024 01:45:39 +0200
Subject: [PATCH 2/2] swap order

---
 tailwind.config.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index f0be220cbc4f8..8f3e8c82517ce 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -102,10 +102,6 @@ export default {
   plugins: [
     plugin(({addUtilities}) => {
       addUtilities({
-        // proposed class from https://github.com/tailwindlabs/tailwindcss/pull/12128
-        '.break-anywhere': {
-          'overflow-wrap': 'anywhere',
-        },
         // tw-hidden must win all other "display: xxx !important" classes to get the chance to "hide" an element.
         // do not use:
         // * "[hidden]" attribute: it's too weak, can not be applied to an element with "display: flex"
@@ -118,6 +114,10 @@ export default {
         '.hidden.hidden': {
           'display': 'none',
         },
+        // proposed class from https://github.com/tailwindlabs/tailwindcss/pull/12128
+        '.break-anywhere': {
+          'overflow-wrap': 'anywhere',
+        },
       });
     }),
   ],