windicss

vscode 提示插件 WindiCSS IntelliSense

下载

npm i -D vite-plugin-windicss windicss

配置

vite.config.ts

import WindiCSS from "vite-plugin-windicss";export default {plugins: [WindiCSS()],
};

main.ts

import "virtual:windi.css";

使用

测试数据

自动值推导

默认单位都是 rem 某些时候你需要用到具体 px 来适应设计图

Important 前缀

在类名前加上 ! 即为当前下属性加上 important

test

在 @apply 指令中使用

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

Shortcuts

快速创建可复用的组件和工具类。
windi.config.ts

import { defineConfig } from "vite-plugin-windicss";export default defineConfig({shortcuts: {"common-box": "w-[375px] bg-hex-b2a8bc",},
});

全局使用

指令

@apply

和 Shortcuts 很像，Shortcuts 全局可用，@apply 当前文件可用（把一堆臃肿的类名重新取名放在视图上）

测试数据

theme()

theme() 函数允许你通过 . 运算符来获取你设置的值。

windi.config.ts

import { defineConfig } from "vite-plugin-windicss";
export default defineConfig({theme: {extend: {colors: {"main-color": "#fc0",},},},
});

style 写法

class 写法

test

属性化模式

基于这个特性，你可以在 html 属性中编写 windi 类。
windi.config.ts

import { defineConfig } from "windicss/helpers";export default defineConfig({// attributify 开启属性模式// attributify: true,attributify: {// 属性别名prefix: "w:",},alias: {},
});

开启属性模式 默认写法

测试数据

开启属性模式 配置别名

测试数据