如何在UserScript中让Tailwind CDN运行前应用前缀配置？

问题原因 #

使用@require引入Tailwind CDN时，该脚本会优先于你的用户脚本代码执行。当你设置tailwind.config时，Tailwind已经完成初始化，配置无法被应用。

可行解决方案 #

放弃@require，改为动态加载Tailwind脚本，提前在全局环境设置配置，确保Tailwind初始化时能读取到自定义前缀：

// ==UserScript==
// @name         带自定义前缀的Tailwind用户脚本
// @match        */*
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 先在全局window对象上定义Tailwind配置
    window.tailwind = window.tailwind || {};
    window.tailwind.config = { prefix: 'tw-' };

    // 动态创建并加载Tailwind CDN脚本
    const tailwindScript = document.createElement('script');
    tailwindScript.src = 'https://cdn.tailwindcss.com';
    tailwindScript.onload = () => {
        console.log('Tailwind已加载，自定义前缀tw-生效');
    };
    document.head.appendChild(tailwindScript);
})();

为什么之前的尝试无效 #

• 用@require时，Tailwind脚本先于你的代码执行，配置设置时机太晚；
• 在动态脚本的onload回调里配置，此时Tailwind已经完成初始化，无法重新读取配置。

内容的提问来源于stack exchange，提问作者zalupa_konya