前言
Windi CSS 是下一代工具优先的 CSS 框架。通过扫描 HTML 和 CSS 按需生成工具类(utilities),Windi CSS 致力于在开发中提供 更快的加载体验 以及更快的 HMR,并且在生产环境下无需对 CSS 进行 Purge(一种在生产环境中对未使用的 CSS 进行清除而节省体积的技术)。Windi CSS 支持 Tailwind CSS 的所有 工具类,无需任何额外配置。
你可以像平常一样正常编写你的组件,同时在样式表中使用实用类。
一、安装
npm i -D vite-plugin-windicss windicss
安装相关包
二、项目配置
1.vite.config.js
代码如下(示例):
import WindiCSS from 'vite-plugin-windicss'
export default {
plugins: [
WindiCSS(),
],
}
在你的 Vite 配置中添加插件
2.main.js
代码如下(示例):
import 'virtual:windi.css'
在你的 Vite 入口文件中导入 virtual:windi.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>
<style scoped>
.login_module {
@apply bg-light-50 flex items-center justify-center flex-col;
}
<style>
具体使用可以到官网查看,样式查看链接,vite集成链接。
除此之外使用vscode开发的还可以安装windicss intelliSecse插件,来优化开发效果。
总结
以上就是今天要讲的内容,本文仅仅简单介绍了vue3中vite集成使用Windi CSS的使用,而Windi CSS提供了大量能使我们快速便捷地产生样式的方式类。