背景
This means that we won't expect adding new features to Windi CSS in the future, but we will still provide security fixes as needed. Windi CSS is not deprecated, and existing users and projects can continue to use it without issues --- windicss.org/posts/sunse…
Windi CSS 已经不再添加新的 features 了，而且随着项目体积的增加，Windi CSS 导致项目热更新的速度越来越慢。然后有两种选择，一种是迁移到 Unocss，这种迁移成本比较小，但是 Unocss 社区吐槽并不好用；另一种是迁移到 Tailwind CSS，TailWind CSS 因为引入了 JIT， 热更速度已经超过了 Windi CSS ，但是 Tailwind CSS 和 Windi CSS 有很多地方不兼容，我们需要将这些不兼容的地方改掉。
安装 Tailwind CSS
将 Tailwind CSS 安装为PostCSS插件是将其与webpack、Rollup、Vite和Parcel等构建工具集成的最无缝方式。
- 安装 Tailwind CSS，并且创建 tailwind.config.js
npm install -D tailwindcss
npx tailwindcss init
- 将 Tailwind 添加到您的 PostCSS 配置，在您的 postcss. config.js 文件中或项目中配置 PostCSS 的任何位置添加
tailwindcss和autoprefixer。
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
- 配置模板路径，将路径添加到 tailwind.config.js 文件中的所有模板文件。
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
- 将 Tailwind 指令添加到您的 CSS。
// main.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
迁移
根据 Windi CSS 特性 cn.windicss.org/features/ ，大致可以反向得出，只要我们将使用 Windi CSS 特性的地方移除，那么大部分就可以支持 Tailwind CSS 了。当然，除了这些，还有别的坑。我们会在文章的末尾列出，迁移 Windi CSS 所遇到的坑。
自动值推导
Windi CSS 允许你在样式类中编写任意值，同时会根据适当的语义生成相应的样式。直接的 p-5px 和 显示转义的 p-[5px] 都是被支持的。但是 Tailwind CSS 不支持 p-5px 这种写法，只支持 p-[5px] 这种写法。 所以我们需要将 p-5px 这种写法全部替换掉。
我们可以使用 VS Code 中的正则搜索，来找到所有不支持的属性，然后全部替换掉。例如我想将 w-XXpx 替换成 w-[XXpx]，我们可以使用 w-(\d+)px -> w[$1px]
需要替换的属性大致有：
- w min-w max-w
- h min-h max-h
- p 注意，因为 padding 中的还包含 pt、pl、pt、pb 属性，所以要修改一下正则，改为
p[xyrltb]?-(\d+)px->p$1-[$2px] - m 同理 margin 也需要修改，
m[xyrltb]?-(\d+)px->m$1-[$2px] - text
- leading
- rounded
- border 注意 border 比 padding 还要特殊，因为 border 还支持
border(-[xyrltb])?-(\d+)px->border$1-[$2px] - z 注意 z 的属性没有单位。
- top / right / bottom / left
可以使用 \w+-\d+px 粗略的检查是否还有没有替换的 class
可变修饰组
通过使用括号对相同的工具类进行编组，将其应用于同一可变修饰。
<div class="hover:(bg-gray-400 font-medium)"/>
我们需要将其替换成
<div class="hover:bg-gray-400 hover:font-medium"/>
Shortcuts
不支持 shortcuts，可以使用 plugins，使用 plugins 的好处是，你生成的 class 可以在 @apply 中使用。如果你直接定义在 common 中，并不能使用在 @apply，而且也不会有 VS Code 提示。
// windi.config.js
export default {
theme: {/* ... */},
shortcuts: {
btn: 'pt-12',
},
};
需要将其替换成
// Tailwind.config.js
export default {
theme: {/* ... */},
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.btn': {
paddingTop: '12px',
},
});
}),
],
};
响应式设计
添加通过 < 和 @ 前缀的方式，提供了超过查询范围的情况下的更多控制能力。
lg => greater or equal than this breakpoint
<lg => smaller than this breakpoint
@lg => exactly this breakpoint range
例如
<div class="<2xl:(text-xl mb-18px)"/>
需要改成
<div class="max-2xl:text-xl max-2xl:mb-18"/>
Important 前缀
支持，所以不需要修改
暗色模式
支持，所以不需要修改
RTL
支持，所以不需要修改
指令
支持，所以不需要修改
插件迁移
移除，因为 Tailwind CSS 支持line-clamp，不需要插件了。
require('windicss/plugin/line-clamp')
迁移 VS Code 插件
移除 windicss-intellisense，添加 Tailwind CSS-intellisense
主要的 Break change
-
不支持
w-50px这种写法，有两种方式，在 Tailwind CSS.config.js 中声明 spacing，然后写成w-50; 或者是w-[50px]。这里不止 w，h、p、m、text 等也是有问题的 -
::v-depp + @apply 无效，解决方案是使用 :deep + @apply
-
img的 height 被设置成了 auto, 如果在 img 标签中设置高度，就没有作用。然后将 height 重写为 unset 也没有用。除了img， ****Tailwind CSS 有很多重写的样式和 Windi CSS 不同。例如还有sub、sup等标签。 -
不支持这种写法
<2xl:(text-xl mb-18px)，改为max-2xl:text-xl max-2xl:mb-18 -
不支持
not-first-of-type、not-last-of-type等这些 not 开头的 variants
这些主要是我们在迁移项目时，遇到的不兼容属性，不兼容的属性应该不止这些，最好的方法就是修改完以后，在测试一遍程序，检查有哪些地方的样式被影响到了。
