# 手撕tailwind源码

**Repository Path**: leeyamaster/hand-tear-tailwind-source

## Basic Information

- **Project Name**: 手撕tailwind源码
- **Description**: 手搓tailwind
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-28
- **Last Updated**: 2026-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Mini Tailwind - 迷你版 Tailwind CSS 引擎

从零手写实现，理解 Tailwind CSS 的核心原理。

## 核心原理

1. **扫描**：解析 HTML/JS 等源文件，提取所有 `class` 属性中的类名
2. **映射**：将工具类名（如 `flex`、`p-4`）映射为对应的 CSS 属性
3. **生成**：只生成被使用到的 CSS，输出最终样式文件

## 使用方法

```bash
# 构建 CSS（扫描 examples 目录，输出 dist/output.css）
npm run build

# 或直接运行
node src/cli.js --input examples --output dist/output.css
```

## 支持的工具类

- 布局：flex, block, inline-block, hidden
- 间距：p-4, m-2, px-4, py-2, mt-4 等
- 文字：text-sm, text-lg, text-red-500, font-bold
- 背景：bg-blue-500, bg-gray-100
- 边框：rounded, border, border-2