WindiCSS 是否支持使用 @layer utilities 规则添加自定义工具类？

方案1：通过配置文件全局注册 #

直接在项目根目录的windi.config.js（或.windicssrc）配置文件中定义，适合全局通用的工具类：

// windi.config.js
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  theme: {
    extend: {
      // 扩展已有工具类的可选值，例如自定义间距、颜色
      spacing: {
        '128': '32rem',
      },
      colors: {
        'custom-primary': '#165DFF',
      }
    },
  },
  // 自定义全新的工具类
  utilities: {
    '.content-auto': {
      'content-visibility': 'auto',
    },
    // 支持动态生成带参数的工具类
    '.text-shadow': {
      get value() {
        return (size: string) => ({
          'text-shadow': `0 0 ${size} rgba(0,0,0,0.1)`
        })
      }
    }
  }
})

方案2：在CSS文件中通过@layer声明（与Tailwind用法完全兼容） #

你之前在Tailwind JIT模式中使用的CSS自定义工具类写法，WindiCSS原生完全兼容，无需调整代码即可直接运行：

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .custom-underline {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}

定义完成后，你可以直接在模板中使用content-auto、hover:custom-underline、md:content-auto这类带变体的写法，WindiCSS会自动生成对应样式。

注：如果自定义工具类不生效，先检查WindiCSS的扫描配置是否覆盖了你存放自定义CSS的文件路径，WindiCSS默认会自动扫描项目内的CSS、Vue、JSX、TSX等常用格式文件

内容的提问来源于stack exchange，提问作者ctwhome