init

src/components/Stars/StarStyles/tailwind-utils.ts

@@ -0,0 +1,52 @@
+/**
+ * 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;