Windi CSS 属性化模式

⚠️ attributify 不适用于 svelte-windicss-preprocess。

使用此功能，您可以在 HTML 属性中编写 windi 类。

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

默认情况下，Attributify 是可选的，首先在您的 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>

正常化

您实际上有两种编程范式可供选择：

1. 基于实用程序分组

class=...
bg=...
text=...
border=...

2. 基于变体分组

class=...
sm=...
md=...
dark=...

当然，您可以将它们混合在一起，但我们不推荐这样做，因为它会降低代码的清晰度。