如何在Tailwind CSS JIT模式下为自定义工具类配置动态传入参数

你可以通过以下两种方式实现自定义工具类支持JIT任意参数：

方式一：在tailwind.config.js中配置（更推荐） #

直接通过Tailwind提供的matchUtilitiesAPI定义动态工具类，你可以删掉原CSS文件中.under-line的相关代码，在配置文件中添加如下内容：

const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 保留你原有的content、theme等其他配置
  plugins: [
    plugin(function({ matchUtilities }) {
      matchUtilities({
        'under-line': (widthValue) => ({
          '&::after': {
            content: '""',
            display: 'block',
            width: widthValue,
            border: 'none',
            borderBottom: '1px solid black',
          }
        })
      }, {
        variants: ['responsive'] // 保留响应式变体支持
      })
    })
  ]
}

配置完成后重启开发服务即可生效，完全支持under-line-[80%]、under-line-[200px]、under-line-[50vw]这类任意值调用。
如果需要增加预设固定值，例如under-line-sm对应50%宽度，可以在matchUtilities的第二个参数中新增values配置：

matchUtilities({
  'under-line': (widthValue) => ({ /* 上述逻辑不变 */ })
}, {
  variants: ['responsive'],
  values: {
    sm: '50%',
    md: '80%',
    lg: '100%'
  }
})

方式二：直接在CSS文件中修改 #

如果你不想改动配置文件，也可以通过CSS变量的方式适配，修改后的代码如下：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @variants responsive {
    .under-line:after {
      content: "";
      display: block;
      width: var(--underline-width, 80%); /* 默认值保留80% */
      border: none;
      border-bottom: 1px solid black;
    }
  }
}

调用时通过JIT的内联变量语法传递参数：<div class="under-line [--underline-width:80%]">foo</div>

注意：该方式调用格式和你要求的under-line-[80%]有差异，要完全匹配你的调用格式还是优先选择方式一。

生效验证 #

确认你的Tailwind版本已开启JIT模式（3.x版本默认开启，2.x版本需要在配置中新增mode: 'jit'），重启开发服务后即可正常使用。

内容的提问来源于stack exchange，提问作者shingo.nakanishi