From 237d18974eec8e0152efc3cd9618229bd6255d6d Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 3 Jun 2024 20:21:28 +0200 Subject: [PATCH] Move custom `tw-` helpers to tailwind plugin (#31184) Move the previous custom `tw-` classes to be defined in a tailwind plugin. I think it's cleaner that way and I also verified double-class works as expected: Screenshot 2024-05-30 at 19 06 24 (cherry picked from commit 8c68c5e436805848197d98313e9ee77e8d540a83) --- 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 94dfdbced4..8f3e8c8251 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({ + // 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', + }, + // proposed class from https://github.com/tailwindlabs/tailwindcss/pull/12128 + '.break-anywhere': { + 'overflow-wrap': 'anywhere', + }, + }); + }), + ], }; diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 60ecd7db72..15df9f3a45 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 {