custom-tail-wind-css

自定义原子类 CSS 库，提供类似 Tailwind 风格的工具类。

安装

pnpm add custom-tail-wind-css
# 或
npm install custom-tail-wind-css

使用

// 引入全部样式
@use 'custom-tail-wind-css';

// 或者按需引入
@use 'custom-tail-wind-css/scss/common';
@use 'custom-tail-wind-css/scss/flexbox';
@use 'custom-tail-wind-css/scss/layout';
@use 'custom-tail-wind-css/scss/typography';

// 在 JS 入口文件中引入
import 'custom-tail-wind-css'

包含的工具类

Common 通用类

• Margin/Padding: .mg-t-{0-50}, .mg-b-{0-50}, .pd-l-{0-50} 等
• Background: .bg-cover, .bg-contain, .bg-center, .bg-no-repeat
• Border Radius: .radius-{2-16}, .radius-full, .radius-none
• Cursor: .pointer, .cursor-move, .cursor-not-allowed
• Overflow: .overflow-hidden, .overflow-auto, .overflow-x-scroll
• Text Ellipsis: .ellipsis, .ellipsis-2, .truncate
• User Select: .select-none, .select-text
• Opacity: .opacity-0, .opacity-50, .opacity-100

Flexbox 弹性布局

• Display: .flex, .inline-flex
• Direction: .flex-row, .flex-col, .flex-row-reverse
• Wrap: .flex-wrap, .flex-nowrap
• Align Items: .items-center, .items-start, .items-end, .items-baseline
• Justify Content: .justify-center, .justify-between, .justify-around
• Flex: .flex-1, .flex-auto, .flex-none
• Gap: .gap-{0-20}, .gap-x-{0-20}, .gap-y-{0-20}

Layout 布局

• Display: .block, .inline-block, .hidden, .grid
• Position: .relative, .absolute, .fixed, .sticky
• Inset: .top-0, .right-0, .bottom-0, .left-0, .inset-0
• Size: .w-full, .h-full, .w-screen, .h-screen
• Z-Index: .z-0, .z-10, .z-20, .z-30, .z-40, .z-50
• Object Fit: .object-cover, .object-contain, .object-fill
• Float: .float-left, .float-right, .clearfix

Typography 文字排版

• Font Size: .fz-{10-36}, .text-xs, .text-sm, .text-base, .text-lg
• Font Weight: .font-normal, .font-medium, .font-semibold, .font-bold
• Font Style: .italic, .not-italic
• Text Align: .text-left, .text-center, .text-right
• Text Transform: .uppercase, .lowercase, .capitalize
• Text Decoration: .underline, .line-through, .no-underline
• Whitespace: .whitespace-nowrap, .whitespace-pre
• Line Height: .leading-none, .leading-normal, .leading-loose
• Text Color: .text-primary, .text-success, .text-warning, .text-danger

License

MIT