1、Windi CSS简介
Windi CSS 是下一代工具优先的 CSS 框架。如果你已经熟悉了 Tailwind CSS，可以把 Windi CSS 看作是按需供应的 Tailwind 替代方案，它为你提供了更快的加载体验，完美兼容 Tailwind v2.0，并且拥有很多额外的酷炫功能。
通过扫描 HTML 和 CSS 按需生成工具类（utilities），Windi CSS 致力于在开发中提供 更快的加载体验 以及更快的 HMR，并且在生产环境下无需对 CSS 进行 Purge（一种在生产环境中对未使用的 CSS 进行清除而节省体积的技术）。
2、安装vue-cli-plugin-windicss插件
yarn add -D vue-cli-plugin-windicss
3、在vue.config.js文件中配置插件
//vue.config.js
module.exports = {
pluginOptions: {
windicss: {
// 具体配置请查看 https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
},
},
}
4、在main入口文件引入样式
//main.ts
import 'windi.css'
5、使用示例
1、Windi CSS简介
Windi CSS 是下一代工具优先的 CSS 框架。如果你已经熟悉了 Tailwind CSS，可以把 Windi CSS 看作是按需供应的 Tailwind 替代方案，它为你提供了更快的加载体验，完美兼容 Tailwind v2.0，并且拥有很多额外的酷炫功能。
通过扫描 HTML 和 CSS 按需生成工具类（utilities），Windi CSS 致力于在开发中提供 更快的加载体验 以及更快的 HMR，并且在生产环境下无需对 CSS 进行 Purge（一种在生产环境中对未使用的 CSS 进行清除而节省体积的技术）。
2、安装vue-cli-plugin-windicss插件
yarn add -D vue-cli-plugin-windicss
3、在vue.config.js文件中配置插件
//vue.config.js
module.exports = {
pluginOptions: {
windicss: {
// 具体配置请查看 https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
},
},
}
4、在main入口文件引入样式
//main.ts
import 'windi.css'
5、使用示例
现在，开始在你的项目中使用 [类实用程序] 或 [CSS 指令]，并享受它们的便利。
<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:(py-4 flex items-center space-y-0 space-x-6)">
<img class="block mx-auto h-24 rounded-full sm:(mx-0 flex-shrink-0)" src="/img/erin-lindford.jpg" alt="Woman's Face" />
<div class="text-center space-y-2 sm:text-left">
<div class="space-y-0.5">
<p class="text-lg text-black font-semibold">Erin Lindford</p>
<p class="text-gray-500 font-medium">产品经理</p>
</div>
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:(text-white bg-purple-600 border-transparent) focus:(outline-none ring-2 ring-purple-600 ring-offset-2)">
消息
</button>
</div>
</div>
6、vscode插件推荐
在vscode编辑器中可以通过安装Windi CSS Intellisense插件，来提高 Windi 的开发体验，例如：自动补全、语法高亮、代码折叠和构建。
