jquery插件样式被tailwind“吃掉”是因为@tailwind base（preflight）重置原生标签样式，需关闭coreplugins.preflight: false并重启服务，配合prefix: 'tw-'和twmerge确保类名隔离与安全合并。
为什么jQuery插件样式总被Tailwind“吃掉”
不是类名撞车，而是Tailwind的@tailwind base（即preflight）直接重置button、input、select等原生标签样式，比如button { background-color: transparent; }。jQuery插件（如Datepicker、Select2、Bootstrap Table）大多依赖这些默认样式或自己微调过，一加载Tailwind就“归零”，导致按钮透明、下拉箭头消失、边框错位。
浏览器DevTools里搜data-tailwind="true"，如果看到button规则带这个属性，基本就是preflight在作祟——它不靠类名触发，prefix和!important都拦不住。
必须关掉preflight，且重启开发服务器
corePlugins.preflight: false不是可选项，是硬性前提。关掉后，Tailwind跳过生成@tailwind base部分CSS，让浏览器保留原生样式，jQuery插件才有基础可依。
- 在
tailwind.config.js或.ts中明确写：corePlugins: { preflight: false } - Vue + Vite / React + Webpack项目改完必须重启dev server，HMR不会重建这部分CSS
- 别删
@tailwind base的import语句——那是无效操作；要的是构建时跳过编译
加prefix: 'tw-'隔离工具类，但所有地方都要手动改
prefix: 'tw-'能让text-red-500变成tw-text-red-500，从源头避开jQuery插件自定义的.datepicker、.select2-selection等类名，但只对JIT生成的工具类生效。
- HTML/JSX里所有Tailwind类必须手改：
class="tw-p-4 tw-rounded"，漏一个p-4就找不到对应规则 -
prefix: 'tw'（缺短横线）→ 生成twtext-red-500，非法类名，样式全失效 -
@apply写在CSS文件里会自动转前缀，但JS中拼接className得自己补：tw-p-4、tw-hidden
用twMerge处理动态类拼接冲突
jQuery插件常配合React/Vue做条件渲染，比如className={`tw-p-4 ${isOpen ? 'tw-hidden' : 'tw-block'}`。两个padding类共存时，浏览器按CSS输出顺序取最后一个，但构建缓存或工具链更新会让顺序不可控。
- 装
tailwind-merge：npm install tailwind-merge - 用
twMerge合并：twMerge('tw-p-4', 'tw-p-2')→ 只留tw-p-2，不依赖加载顺序 - 注意：它只识别带前缀的类，混用
p-4和tw-p-4时完全不处理，也不会报错
真正落地时，最容易漏的是三处：HTML里漏改一个class字符串、关preflight后没重启服务、twMerge输入里混进了无前缀类——这三处任一出错，整个方案就断链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
