属性化模式

⚠️ 属性化在 svelte-windicss-preprocess 中不可用。

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

有关 css 大小的问题，css 大小可能会略有增加，但是在 gzip 压缩下，它的影响很小。

属性化默认情况下是可选的，可以在你的 windi 配置中开启。

windi.config.ts

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  attributify: true,
})

并根据需要这样使用它们：

<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

语法

(variant[:-]{1})*key? = "((variant:)*value)*"

例子

sm = "bg-blue-200 hover:bg-blue-300"
sm:hover = "bg-blue-200 dark:bg-blue-300"
sm-hover = "bg-blue-200 dark:bg-blue-300"

p = "x-4 y-2 md:y-3"
md:bg = "blue-300 dark:blue-400"
md-bg = "blue-300 dark:blue-400"

前缀

如果你担心命名冲突，可以通过属性化方式添加自定义前缀：

windi.config.js

export default {
  attributify: {
    prefix: 'w:',
  },
}

<button 
  w:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  w:text="sm white"
  w:font="mono light"
  w:p="y-2 x-4"
  w:border="2 rounded blue-200"
>
  Button
</button>

正常化

实际上你可以有两种编程范式来选择：

基于工具类分组
```
class=...
bg=...
text=...
border=...
```
基于可变修饰分组
```
class=...
sm=...
md=...
dark=...
```

当然，你也可以将它们混合使用，但我个人不推荐。只需要选择一个并持续下去。你会发现你的代码变得更加清晰了。

工具类

参考：属性化工具类

属性化模式 #

语法 #

例子 #

前缀 #

正常化 #

工具类 #

属性化模式

语法

例子

前缀

正常化

工具类