52 lines
1.0 KiB
TypeScript
52 lines
1.0 KiB
TypeScript
/**
|
|
* Tailwind CSS 工具类
|
|
* 提供常用的 Tailwind 类组合，方便在组件中使用
|
|
*/
|
|
|
|
// 布局
|
|
export const tw = {
|
|
// 弹性布局
|
|
flex: 'flex',
|
|
flexCol: 'flex flex-col',
|
|
flexRow: 'flex flex-row',
|
|
itemsCenter: 'items-center',
|
|
justifyBetween: 'justify-between',
|
|
justifyCenter: 'justify-center',
|
|
|
|
// 间距
|
|
p1: 'p-1',
|
|
p2: 'p-2',
|
|
p4: 'p-4',
|
|
m1: 'm-1',
|
|
m2: 'm-2',
|
|
m4: 'm-4',
|
|
|
|
// 宽高
|
|
wFull: 'w-full',
|
|
hFull: 'h-full',
|
|
|
|
// 文本
|
|
textCenter: 'text-center',
|
|
textSm: 'text-sm',
|
|
textMd: 'text-base',
|
|
textLg: 'text-lg',
|
|
textXl: 'text-xl',
|
|
|
|
// 颜色
|
|
primaryText: 'text-blue-600',
|
|
primaryBg: 'bg-blue-500',
|
|
|
|
// 边框和圆角
|
|
rounded: 'rounded',
|
|
roundedMd: 'rounded-md',
|
|
roundedLg: 'rounded-lg',
|
|
|
|
// 常用组合
|
|
button: 'px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600 transition-colors',
|
|
card: 'p-4 bg-white rounded-lg shadow',
|
|
|
|
// 函数：组合多个类
|
|
cn: (...classes: string[]) => classes.filter(Boolean).join(' '),
|
|
};
|
|
|
|
export default tw;
|