css框架之windicss

官网地址

windicss

安装

1. 执行命令

npm i -D vite-plugin-windicss windicss

2. 在vite.config.js中配置

//引入
import WindiCSS from 'vite-plugin-windicss'
//使用
plugins:[
    WindiCSS()
]

3. 在main.js中使用

import 'virtual:windi.css'

在vue文件中使用

• 常规使用

<button
    class="bg-purple-300 m-2 text-indigo-100 px-6 py-2 rounded transition-all hover:(bg-purple-800)"
  >
    按钮
  </button>
<button
    class="bg-purple-300 m-2 text-indigo-100 px-6 py-2 rounded transition-all hover:bg-purple-800"
  >
  按钮
  </button>

• 优化
  • 定义css类名

  <button class="btnStyle">  按钮  </button>
  <button class="btnStyle">  按钮  </button>
  

  • 使用指令@apply

  <style scoped>
  .btnStyle {
    @apply bg-purple-300 m-2 text-indigo-100 px-6 py-2 rounded transition-all hover:(bg-purple-800);
  }
  </style>