Monkey-patch Tailwind CSS to also support attributes (outside of classes)
| const original_querySelectorAll = document.querySelectorAll; | |
| document.querySelectorAll = function () { | |
| if (arguments?.[0] == "[class]" && (new Error().stack).split("\n").filter(e=>e!="Error")?.[1]?.includes?.("tailwindcss/browser")) | |
| return [...original_querySelectorAll.apply(document,["*"])].map(e=>({classList:[...e.classList,...[...e.attributes].map(x=>x.name.replace(/⁄/g,'/'))]})); | |
| return original_querySelectorAll.apply(document,arguments); | |
| } | |
| const original_push = Array.prototype.push; | |
| Array.prototype.push = function () { | |
| if ((s=(new Error().stack).split("\n").filter(e=>e!="Error")?.[1],s)?.includes?.("enter") | |
| && s.includes("tailwindcss/browser") | |
| && arguments?.[0]?.length == 3 | |
| && arguments?.[0]?.[0]?.[0] == ".") | |
| arguments[0][0] = `${arguments[0][0]},[${arguments[0][0].slice(1).replace(/\//g,'⁄')}]`; | |
| return original_push.apply(this,arguments); | |
| } | |
| const original_observe = MutationObserver.prototype.observe; | |
| MutationObserver.prototype.observe = function () { | |
| if ((new Error().stack).split("\n").filter(e=>e!="Error")?.[1]?.includes?.("tailwindcss/browser") | |
| && arguments?.[1]?.attributeFilter?.[0] == "class") | |
| arguments[1].attributeFilter = undefined; | |
| return original_observe.apply(this,arguments); | |
| } | |
| </script> | |
I am styled using a class | |
I am styled using an attribute | |
The catch is that you have to use ⁄ instead of / in attributes |
点赞
收藏
点踩
分享评论
?
参与讨论