如何在JavaScript中实现Tailwind式带冒号的动态状态类？

1. 手写CSS直接实现 #

直接编写对应状态的CSS规则，注意选择器中的冒号需要用\:转义：

/* 基础颜色类 */
.bg_amber_5 {
  background-color: #fbbf24;
}

/* hover状态类 */
.hover\:bg_green:hover {
  background-color: #22c55e;
}

/* focus状态类 */
.focus\:bg_blue:focus {
  background-color: #3b82f6;
}

如果想提升灵活性，可结合CSS变量复用逻辑：

.single-bg {
  background-color: var(--bg-color);
}
.bg_amber_5 {
  --bg-color: #fbbf24;
}
.hover\:bg_green:hover {
  --bg-color: #22c55e;
}

2. 用预处理器批量生成 #

借助Sass/Less的循环功能，批量生成所有状态与样式的组合类，避免重复手写：

以Sass为例：

// 定义颜色映射表
$color-map: (
  amber_5: #fbbf24,
  green: #22c55e,
  blue: #3b82f6
);

// 定义需要支持的状态
$states: hover, focus, active, checked;

// 生成基础颜色类
@each $name, $color in $color-map {
  .bg_#{$name} {
    background-color: $color;
  }
}

// 生成状态+颜色的组合类
@each $state in $states {
  @each $name, $color in $color-map {
    .#{$state}\:bg_#{$name}:#{$state} {
      background-color: $color;
    }
  }
}

编译后会自动生成hover:bg_green、focus:bg_blue等所有组合规则，预处理器会自动处理冒号转义。

3. JavaScript动态解析处理 #

如果需要支持动态自定义类名，可通过JS解析DOM元素的类名，自动生成对应伪类样式：

// 颜色映射
const colorMap = {
  amber_5: '#fbbf24',
  green: '#22c55e',
  blue: '#3b82f6'
};

// 状态与伪类映射
const stateMap = {
  hover: ':hover',
  focus: ':focus',
  checked: ':checked'
};

// 获取所有包含冒号类的元素
const elements = document.querySelectorAll('[class*=":"]');

// 缓存已生成的样式规则，避免重复创建
const styleCache = new Set();

elements.forEach(el => {
  const classList = el.className.split(' ');
  classList.forEach(cls => {
    if (cls.includes(':') && !styleCache.has(cls)) {
      const [stateKey, propClass] = cls.split(':');
      const pseudoState = stateMap[stateKey];
      if (!pseudoState) return;

      const colorKey = propClass.replace('bg_', '');
      const color = colorMap[colorKey];
      if (!color) return;

      // 创建并插入样式规则
      const style = document.createElement('style');
      const escapedCls = cls.replace(':', '\\:');
      style.textContent = `.${escapedCls}${pseudoState} { background-color: ${color}; }`;
      document.head.appendChild(style);
      styleCache.add(cls);
    }
  });
});

4. 自定义PostCSS插件处理 #

如果项目使用PostCSS，可编写简单插件自动转换冒号格式的类名：

module.exports = () => {
  return {
    postcssPlugin: 'state-class-transform',
    Rule(rule) {
      rule.selectors = rule.selectors.map(selector => {
        // 拆分并转换每个类名
        return selector.split('.').filter(Boolean).map(part => {
          if (part.includes(':')) {
            const [state, cls] = part.split(':');
            return `.${state}\\:${cls}:${state}`;
          }
          return `.${part}`;
        }).join('');
      });
    }
  };
};

module.exports.postcss = true;

将插件加入PostCSS配置后，编写CSS时直接用hover:bg_green这类类名，编译后会自动转换成合法的.hover\:bg_green:hover选择器。

内容的提问来源于stack exchange，提问作者Bipul Chandro Roy