Windi CSS 屬性化模式

?? attributify 不適用于 svelte-windicss-preprocess。

使用此功能，您可以在 HTML 屬性中編寫 windi 類。

關(guān)于css size的問題，css size可能會(huì)略有增加，但是在gzip壓縮下，影響很小。

默認(rèn)情況下，Attributify 是可選的，首先在您的 windi 配置中啟用它。

?windi.config.ts?

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  attributify: true,
})

并根據(jù)需要使用它們：

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

前綴

如果您擔(dān)心命名沖突，可以通過以下方式向?qū)傩阅Ｊ教砑幼远x前綴：

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

正?；?/p>

您實(shí)際上有兩種編程范式可供選擇：

1. 基于實(shí)用程序分組

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

2. 基于變體分組

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

當(dāng)然，您可以將它們混合在一起，但我們不推薦這樣做，因?yàn)樗鼤?huì)降低代碼的清晰度。