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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 391 天前的主题，其中的信息可能已经有所发展或是发生改变。

我发现我平时使用 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 这样

组合

CSS

库

8 条回复 2024-09-20 12:05:28 +08:00

ZZITE

2024-09-20 10:26:37 +08:00

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

koor

2024-09-20 10:28:27 +08:00

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

waiaan

2024-09-20 10:33:49 +08:00

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

defaw

2024-09-20 11:00:09 +08:00

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 hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;
}
}

heroisuseless

2024-09-20 11:05:14 +08:00

@ZZITE 我希望有一套良好设计的组合 css ，而不是自己设计这个组合 css 叫什么，是即开即用型而不是自己设计，这套组合 css 可以不用很全，仅包括最常用的组合 css 即可，可以与 tailwind 搭配，但是这套组合 css 是预设好的，设计精良的

heroisuseless

2024-09-20 11:06:49 +08:00

@defaw 不是组件型 css 而是组合型 css ，按我的想法是在组件型 css 与原子型 css 之间的组合型 css ，我现在就是好奇有没有这种设计精良的组合型 css

antony98

2024-09-20 11:29:18 +08:00

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

unclemcz

2024-09-20 12:05:28 +08:00 via Android

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