为什么 Tailwindcss 不能为 <a> 覆盖 jQuery 移动 css？

Question

我正在将 Tailwind css（与 laravel）与 jQuery 移动设备一起用于一个项目。问题是 jQuery 移动版覆盖了 <a> 标签的样式。

这是浏览器加载 css 个文件的顺序：

<!-- jQuery mobile -->
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.css">

<!-- Tailwind css -->
<link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">

<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js"></script>

即使 Tailwind css 是加载的最后一个 css 文件，<a> 标签仍然具有 jQuery 移动样式：

<a href="" class="text-white">Lorem ipsum</a>

上面的<a>应该是白色的...但它仍然是jQuery手机的蓝色。

为什么 Tailwind css 不能覆盖 jQuery 移动 css？

P.S 我试过编辑 tailwind.config.js:

module.exports = {
    important: true,
    ...
};

但是使用 important: true 的问题是我不能在之后使用 jQuery 来更改点击时的边框。

编辑样式开发工具中的屏幕截图：

html 输出的屏幕截图：

Answer 1

TailwindCSS 无法覆盖应用的 jQuery 移动 css 的原因是因为它正在失去 CSS 特异性 战斗。如果您不需要移动设备提供的所有样式 jQuery，最好将其删除并完全基于 TailwindCSS。我认为您只需要 jQuery 移动脚本即可使 tap 活动正常运行。

为什么 Tailwindcss 不能为 <a> 覆盖 jQuery 移动 css？

Why can't Tailwindcss override jQuery mobile css for <a>?

css

jquery

tailwind-css