# TailwindColor

**Repository Path**: xuebusi/TailwindColor

## Basic Information

- **Project Name**: TailwindColor
- **Description**: TailwindColor
- **Primary Language**: Swift
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-10
- **Last Updated**: 2025-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TailwindColorKit

![Swift](https://img.shields.io/badge/Swift-5.6+-orange.svg)
![Platforms](https://img.shields.io/badge/Platforms-iOS%20%7C%20macOS%20%7C%20tvOS%20%7C%20watchOS-lightgrey.svg)
![License](https://img.shields.io/badge/License-MIT-blue.svg)

TailwindColorKit 是一个 Swift 库，为 SwiftUI 应用提供了完整的 Tailwind CSS 颜色系统实现。通过这个库，你可以轻松地在 iOS、macOS、tvOS 和 watchOS 应用中使用 Tailwind 的标准颜色。

## 特性

- **完整的 Tailwind 颜色系统** - 包含所有 Tailwind CSS v4 标准颜色
- **支持所有色阶** - 从 50 到 950
- **类型安全** - 通过枚举和静态类型保证颜色安全
- **轻量级** - 无额外依赖，纯 Swift 实现

## 安装

### Swift Package Manager

在 Package.swift 文件中添加以下依赖：

```swift
dependencies: [
    .package(url: "https://github.com/yourusername/TailwindColorKit.git", from "1.0.5")
]
```

或者在 Xcode 中使用 `Add Package Dependency` 添加仓库地址。

## 快速开始

```swift
import SwiftUI
import TailwindColorKit

struct ContentView: View {
    var body: some View {
        VStack {
            // 使用预定义颜色
            Rectangle()
                .fill(Color.orange500)
                .frame(width: 100, height: 100)
            
            // 使用便捷方法
            Text("Hello Tailwind")
                .foregroundColor(.tailwind(.yellow, .s100))
                .padding()
                .background(Color.blue500)
        }
        .frame(width: 300, height: 500)
        .background(Color.slate800)
    }
}
```

## 颜色参考

TailwindColorKit 包含所有 TailwindCSS 标准颜色：

### 主要颜色家族

| 颜色名称 | 颜色值 | 预览 |
|----------|---------|-------|
| slate | `#64748B` | <div style="background-color:#64748B; width:60px; height:20px; border:1px solid #ddd"></div> |
| gray | `#6B7280` | <div style="background-color:#6B7280; width:60px; height:20px; border:1px solid #ddd"></div> |
| zinc | `#71717A` | <div style="background-color:#71717A; width:60px; height:20px; border:1px solid #ddd"></div> |
| neutral | `#737373` | <div style="background-color:#737373; width:60px; height:20px; border:1px solid #ddd"></div> |
| stone | `#78716C` | <div style="background-color:#78716C; width:60px; height:20px; border:1px solid #ddd"></div> |
| red | `#EF4444` | <div style="background-color:#EF4444; width:60px; height:20px; border:1px solid #ddd"></div> |
| orange | `#F97316` | <div style="background-color:#F97316; width:60px; height:20px; border:1px solid #ddd"></div> |
| amber | `#F59E0B` | <div style="background-color:#F59E0B; width:60px; height:20px; border:1px solid #ddd"></div> |
| yellow | `#EAB308` | <div style="background-color:#EAB308; width:60px; height:20px; border:1px solid #ddd"></div> |
| lime | `#84CC16` | <div style="background-color:#84CC16; width:60px; height:20px; border:1px solid #ddd"></div> |
| green | `#22C55E` | <div style="background-color:#22C55E; width:60px; height:20px; border:1px solid #ddd"></div> |
| emerald | `#10B981` | <div style="background-color:#10B981; width:60px; height:20px; border:1px solid #ddd"></div> |
| teal | `#14B8A6` | <div style="background-color:#14B8A6; width:60px; height:20px; border:1px solid #ddd"></div> |
| cyan | `#06B6D4` | <div style="background-color:#06B6D4; width:60px; height:20px; border:1px solid #ddd"></div> |
| sky | `#0EA5E9` | <div style="background-color:#0EA5E9; width:60px; height:20px; border:1px solid #ddd"></div> |
| blue | `#3B82F6` | <div style="background-color:#3B82F6; width:60px; height:20px; border:1px solid #ddd"></div> |
| indigo | `#6366F1` | <div style="background-color:#6366F1; width:60px; height:20px; border:1px solid #ddd"></div> |
| violet | `#8B5CF6` | <div style="background-color:#8B5CF6; width:60px; height:20px; border:1px solid #ddd"></div> |
| purple | `#A855F7` | <div style="background-color:#A855F7; width:60px; height:20px; border:1px solid #ddd"></div> |
| fuchsia | `#D946EF` | <div style="background-color:#D946EF; width:60px; height:20px; border:1px solid #ddd"></div> |
| pink | `#EC4899` | <div style="background-color:#EC4899; width:60px; height:20px; border:1px solid #ddd"></div> |
| rose | `#F43F5E` | <div style="background-color:#F43F5E; width:60px; height:20px; border:1px solid #ddd"></div> |

### 色阶示例 (以 blue 为例)

| 色阶 | 颜色值 | 预览 |
|------|---------|-------|
| 50 | `#EFF6FF` | <div style="background-color:#EFF6FF; width:60px; height:20px; border:1px solid #ddd"></div> |
| 100 | `#DBEAFE` | <div style="background-color:#DBEAFE; width:60px; height:20px; border:1px solid #ddd"></div> |
| 200 | `#BFDBFE` | <div style="background-color:#BFDBFE; width:60px; height:20px; border:1px solid #ddd"></div> |
| 300 | `#93C5FD` | <div style="background-color:#93C5FD; width:60px; height:20px; border:1px solid #ddd"></div> |
| 400 | `#60A5FA` | <div style="background-color:#60A5FA; width:60px; height:20px; border:1px solid #ddd"></div> |
| 500 | `#3B82F6` | <div style="background-color:#3B82F6; width:60px; height:20px; border:1px solid #ddd"></div> |
| 600 | `#2563EB` | <div style="background-color:#2563EB; width:60px; height:20px; border:1px solid #ddd"></div> |
| 700 | `#1D4ED8` | <div style="background-color:#1D4ED8; width:60px; height:20px; border:1px solid #ddd"></div> |
| 800 | `#1E40AF` | <div style="background-color:#1E40AF; width:60px; height:20px; border:1px solid #ddd"></div> |
| 900 | `#1E3A8A` | <div style="background-color:#1E3A8A; width:60px; height:20px; border:1px solid #ddd"></div> |
| 950 | `#172554` | <div style="background-color:#172554; width:60px; height:20px; border:1px solid #ddd"></div> |

每个颜色家族都提供 50、100、200、300、400、500、600、700、800、900 和 950 色阶。

## API 使用示例

```swift
// 直接使用预定义颜色
Text("标题")
    .foregroundColor(.blue500)

View()
    .background(Color.slate100)

// 使用便捷方法
Text("内容")
    .foregroundColor(.tailwind(.emerald, .s600))
    .background(Color.tailwind(.gray, .s50))

// 在代码中动态选择颜色
let colorLevel: TailwindColor.Level = .s300
Rectangle()
    .fill(Color.tailwind(.purple, colorLevel))
```

## 贡献

欢迎贡献！请提交 issue 或 pull request。

## 许可证

TailwindColorKit 使用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。

---

**TailwindColorKit** 由 [SwiftUI训练营] 开发，灵感来自 Tailwind CSS 颜色系统。