有没有类似于 tailwind 但是是组合类型的 css 库？例如将 display: flex; flex-direction: row; align-items: center; 合为 flex-h-center 这样

我发现我平时使用 tailwind 其实大多数也是在做重复工作，例如写个居中对齐就是 flex items-center ，于是我想有没有组合类型的 css 库，将常用的多个 css 组合合并为一个类，例如 flex-v-center 从而达到比 tailwind 还少写代码的目的

tailwind 是原子类型的 css 库，例如：flex justify-center items-center
bootstrap 是组件类型的 css 库
我现在想找在这两者之间的库，即组合类型的 css 库，例如将 display: flex; flex-direction: row; align-items: center; 合为 flex-h-center 这样

不考虑下 tailwind 的 addUtilities 吗，自己注册一些常用的样式组合
addUtilities({
  .flex-h-center  {
    'display': 'flex',
    'flex-direction': 'row',
    'align-items': 'center'
  }
})

用 unocss ，可以配置 shortcuts ，完美符合你的需求

@koor
unocss 和 elementui 的样式冲突是怎么解决的？就是 button 的样式。

https://tailwindcss.com/docs/reusing-styles
这功能自带的，如此操作你就获得了可以直接使用的 btn-primary
@layer components {
  .btn-primary {
    @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hofer:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;
  }
}

直接给 tailwind 提 PR 就有了，不做伸手党，也为开源做贡献

你要的可能是 https://www.ripple-ui.com/