如何在Tailwind CSS中创建自定义规则实现@supports简写效果？

方案1：注册自定义特性查询变体（官方推荐写法，无需额外插件） #

Tailwind 本身支持通过插件API自定义特性查询变体，直接对应你要的功能，写法更符合框架惯用逻辑：

1. 编辑tailwind.config.js配置文件，添加自定义变体：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      // 注册blur5对应的特性查询变体
      addVariant('blur5', '@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px)))')
      // 可按需添加更多自定义特性查询变体，格式为：addVariant('别名', '完整的@supports规则')
    })
  ]
}

2. 使用方式：
   • 直接在HTML类名中调用：

     <div class="blur5:bg-black"></div>
     

   • 在CSS中通过@apply调用：

     .custom-element {
       @apply blur5:bg-black;
     }
     

方案2：自定义@support别名指令（完全匹配你要求的写法） #

如果一定要使用@support blur5 { ... }的简写@规则写法，可以通过自定义PostCSS插件实现：

1. 项目根目录新建postcss-custom-supports.js插件文件：

// postcss-custom-supports.js
module.exports = () => {
  // 自定义特性查询别名映射表
  const supportAliasMap = {
    'blur5': '((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px)))',
    // 可在此处扩展更多别名
  }

  return {
    postcssPlugin: 'postcss-custom-supports',
    AtRule: {
      support: (rule) => {
        const alias = rule.params.trim()
        if (supportAliasMap[alias]) {
          rule.params = supportAliasMap[alias]
        }
      }
    }
  }
}
module.exports.postcss = true

2. 编辑postcss.config.js，引入自定义插件（必须放在tailwindcss插件之前加载）：

// postcss.config.js
module.exports = {
  plugins: [
    require('./postcss-custom-supports'),
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

3. 配置完成后即可直接使用你需要的写法：

@support blur5 {
  @apply bg-black;
}

编译后会自动替换为完整的特性查询规则。

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