TailwindCSS v4 Play CDN与jQuery兼容问题：$(...).ready报错

问题根源 #

TailwindCSS v4的@tailwindcss/browser库会覆盖全局的$变量，把原本属于jQuery的$替换成了自身的API。这就导致调用$(document).ready时，$已经不是jQuery实例，自然找不到ready方法，最终抛出Uncaught TypeError。

修复方案 #

有两种常用的解决方式：

1. 使用jQuery完整命名空间替代$

直接用jQuery替代$调用方法，避开全局变量冲突：

jQuery(document).ready(function () {
  alert("Hello world");
});

2. 用立即执行函数（IIFE）隔离作用域

通过IIFE把jQuery传入局部作用域，在函数内用$作为jQuery的别名，不影响全局变量：

(function($) {
  $(document).ready(function () {
    alert("Hello world");
  });
})(jQuery);

验证效果 #

将上述任意一种代码替换原JS逻辑，保持脚本引入顺序不变：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/@tailwindcss/browser@4.0.0"></script>
<script>
// 这里放入修复后的代码
</script>

页面加载时就能正常弹出Hello world提示框。

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