如何用自定义变体实现跨浏览器可读的Input Slider样式？

我想用Tailwind CSS给Input Slider的轨道（track）和滑块（thumb）设置样式，但因为要针对WebKit和Mozilla分别使用不同的伪元素：

• ::-webkit-slider-runnable-track 适配Chrome、Edge、Opera、Safari
• ::-moz-range-track 适配Firefox
• ::-webkit-slider-thumb 适配Chrome、Edge、Opera、Safari
• ::-moz-range-thumb 适配Firefox

这些选择器未标准化，必须分别设置样式，用任意值写法会导致代码冗长且可读性差（示例代码如下）：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<input
  type="range"
  class="
    m-5 appearance-none w-[20em] h-[2em] outline-none overflow-hidden rounded
    
    /* Track for webkit */
    [&::-webkit-slider-runnable-track]:bg-slate-300
    [&::-webkit-slider-runnable-track]:h-full
    [&::-webkit-slider-runnable-track]:rounded
    
    /* Track for moz */
    [&::-moz-range-track]:bg-slate-300
    [&::-moz-range-track]:h-full
    [&::-moz-range-track]:rounded
    
    /* Thumb for webkit */
    [&::-webkit-slider-thumb]:h-full
    [&::-webkit-slider-thumb]:w-[8px]
    [&::-webkit-slider-thumb]:bg-blue-500
    [&::-webkit-slider-thumb]:[box-shadow:_-20em_0_0_20em_black]
    /* Custom for webkit */
    [&::-webkit-slider-thumb]:appearance-none
    
    /* Thumb for moz */
    [&::-moz-range-thumb]:h-full
    [&::-moz-range-thumb]:w-[8px]
    [&::-moz-range-thumb]:bg-blue-500
    [&::-moz-range-thumb]:[box-shadow:_-20em_0_0_20em_black]
    /* Custom for moz */
    [&::-moz-range-thumb]:border-0
    [&::-moz-range-thumb]:rounded-none
  "
/>

我尝试创建自定义变体但未成功（示例代码如下）：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@custom-variant slider-track (&::-webkit-slider-runnable-track, &::-moz-range-track));
</style>

<input
  type="range"
  class="
    m-5 appearance-none w-[20em] h-[2em] outline-none overflow-hidden rounded
    
    /* Track for webkit & moz */
    slider-track:bg-slate-300
    slider-track:h-full
    slider-track:rounded
    
    /* Thumb for webkit */
    [&::-webkit-slider-thumb]:h-full
    [&::-webkit-slider-thumb]:w-[8px]
    [&::-webkit-slider-thumb]:bg-blue-500
    [&::-webkit-slider-thumb]:[box-shadow:_-20em_0_0_20em_black]
    /* Custom for webkit */
    [&::-webkit-slider-thumb]:appearance-none
    
    /* Thumb for moz */
    [&::-moz-range-thumb]:h-full
    [&::-moz-range-thumb]:w-[8px]
    [&::-moz-range-thumb]:bg-blue-500
    [&::-moz-range-thumb]:[box-shadow:_-20em_0_0_20em_black]
    /* Custom for moz */
    [&::-moz-range-thumb]:border-0
    [&::-moz-range-thumb]:rounded-none
  "
/>

请问如何让类名中的变体更易读，并以此消除代码重复？

方法1：修正自定义变体语法 #

你之前的自定义变体写法多了一个冗余右括号，修正后即可同时针对多个伪元素创建统一变体，大幅简化代码：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@custom-variant slider-track (&::-webkit-slider-runnable-track, &::-moz-range-track);
@custom-variant slider-thumb (&::-webkit-slider-thumb, &::-moz-range-thumb);
</style>

<input
  type="range"
  class="
    m-5 appearance-none w-[20em] h-[2em] outline-none overflow-hidden rounded
    
    /* 统一设置轨道样式 */
    slider-track:bg-slate-300
    slider-track:h-full
    slider-track:rounded
    
    /* 统一设置滑块基础样式 */
    slider-thumb:h-full
    slider-thumb:w-[8px]
    slider-thumb:bg-blue-500
    slider-thumb:[box-shadow:_-20em_0_0_20em_black]
    
    /* 浏览器专属样式单独设置 */
    [&::-webkit-slider-thumb]:appearance-none
    [&::-moz-range-thumb]:border-0
    [&::-moz-range-thumb]:rounded-none
  "
/>

方法2：封装自定义组件类 #

如果想进一步简化，可将滑块完整样式封装成自定义工具类，直接复用：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@layer utilities {
  .custom-slider {
    @apply m-5 appearance-none w-[20em] h-[2em] outline-none overflow-hidden rounded;
    
    /* 轨道样式 */
    &::-webkit-slider-runnable-track {
      @apply bg-slate-300 h-full rounded;
    }
    &::-moz-range-track {
      @apply bg-slate-300 h-full rounded;
    }
    
    /* 滑块样式 */
    &::-webkit-slider-thumb {
      @apply appearance-none h-full w-[8px] bg-blue-500 [box-shadow:_-20em_0_0_20em_black];
    }
    &::-moz-range-thumb {
      @apply border-0 rounded-none h-full w-[8px] bg-blue-500 [box-shadow:_-20em_0_0_20em_black];
    }
  }
}
</style>

<input type="range" class="custom-slider" />

方法3：项目级全局扩展变体 #

如果是在完整Tailwind项目（非CDN模式）中，可在tailwind.config.js全局扩展自定义变体，所有组件均可复用：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addVariant }) {
      addVariant('slider-track', ['&::-webkit-slider-runnable-track', '&::-moz-range-track']);
      addVariant('slider-thumb', ['&::-webkit-slider-thumb', '&::-moz-range-thumb']);
    }
  ],
}

使用时和方法1一致，直接用slider-track:和slider-thumb:前缀即可。

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