Windi CSS框架使用

Windi CSS是一个CSS框架，上手非常简单。安装后在对应的标签添加类名即可进行文字、颜色、布局的修饰。
官网：https://cn.windicss.org/

根据自己的构建工具选择对应的安装方式，以Vite 为例

安装及配置

npm i -D vite-plugin-windicss windicss

Vite 配置中添加插件

import WindiCSS from 'vite-plugin-windicss'

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

最后，在你的 Vite 入口文件main.js中导入 virtual:windi.css

import 'virtual:windi.css'

基本使用方法

 <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>

需要使用工具类的静态全名，不能拼接

<-- 不能提取 -->
<div class="text-${ active ? 'green' : 'orange' }-400"></div>

<-- 需使用全名 -->
<div class="${ active ? 'text-green-400' : 'text-orange-400' }"></div>

@apply指令

如果觉得在标签上写可读性不高，也可以给标签定义类名，再在样式用通过@apply引用Windi CSS类名

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

.btn {
  @apply font-bold py-2 px-4 rounded;
}