windi CSS 的使用 vue集成 css工具库

官网：  Home | Windi CSS

---

Vue的集成并使用 Windi CSS       官网：      Home | Windi CSS

找到安装， 选择构建的工具， 比如使用 vite 点击进去：

 第一步：安装插件

安装：  npm i -D vite-plugin-windicss windicss

第二步：在 vite.config.js中配置添加插件

 import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

第三步： 在main,js引入样式

 import 'virtual:windi.css'

 第四步使用 找到工具类：

 第一种：可在页面中直接使用：

 // class=" " 空一格写样式会提示哦！
<div class="text-2xl font-bold text-light-50 m-0 p-0">管理系统</div>

<div class=" bg-gray-100 w-full h-full m-0 p-0">login页面</div>

 第二种：在style中使用： 定义一个类名需  @apply  注意：lang="postcss"

<style lang="postcss">
.login {
  @apply bg-indigo-500 min-h-screen;
}
.left {
  @apply flex justify-center items-center;
}
.leftdis {
  @apply text-light-50;
}
</style>

 具体可去官网找样式：    

  Home | Windi CSS