如何在Tailwind CSS中创建支持任意值的自定义类？

你预期的my-custom-class[#fff]这类带方括号动态参数的类语法，无法通过@layer下的静态CSS定义实现——这类动态参数的解析是Tailwind在构建阶段通过插件API完成的，具体实现方式如下：

1. 修改tailwind.config.js配置 #

在配置文件的plugins字段中，通过Tailwind内置的matchComponentsAPI定义支持动态值的自定义类，示例代码：

const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 替换为你项目实际的content扫描路径
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function({ matchComponents }) {
      matchComponents({
        'my-custom-class': (arbitraryValue) => ({
          // 绑定传入的动态值到对应CSS属性
          'background-color': arbitraryValue,
          // 可添加任意固定公共样式，比如圆角、内边距、字号等
          'border-radius': '6px',
          'padding': '8px 16px'
        })
      }, {
        // 可选：配置默认值，不传方括号参数时自动生效
        values: {
          DEFAULT: '#165DFF'
        },
        // 可选：限制传入值类型，比如这里强制校验为合法颜色值，非法值不会生成样式
        type: 'color'
      })
    })
  ]
}

2. 模板中直接使用 #

配置完成后就可以按你预期的语法在页面中使用，支持传入任意符合CSS规范的属性值：

<!-- 传入十六进制色值 -->
<button class="my-custom-class[#fff]">白色背景按钮</button>
<!-- 传入rgba值 -->
<button class="my-custom-class[rgba(0,0,0,0.5)]">半透明黑色背景按钮</button>
<!-- 传入CSS变量 -->
<button class="my-custom-class[var(--primary-color)]">主题色背景按钮</button>
<!-- 不传参数使用默认值 -->
<button class="my-custom-class">默认色按钮</button>

注意事项 #

• 你示例代码中@layer componenets存在拼写错误，正确拼写为components，但即使修正拼写，静态CSS类定义也无法捕获类名后方括号内的动态参数，必须通过插件API实现。
• 如果要定义的是通用工具类而非组件类，把API换成matchUtilities即可，用法完全一致。
• 插件定义的动态类同样支持在@apply中使用。

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