# @darraghmckay/tailwind-react-ui 中文文档

规范地址：https://npmcn.com/package/%40darraghmckay/tailwind-react-ui/

版本：0\.9\.8
npm 元数据更新时间：2022-11-25T11:44:32.204Z
中文译文更新时间：2026-11-11T12:11:31.135Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40darraghmckay/tailwind-react-ui
原文对照：https://npmcn.com/package/%40darraghmckay/tailwind-react-ui/?lang=original
项目主页：https://emortlock.github.io/tailwind-react-ui/
源码仓库：https://github.com/darraghmckay/tailwind-react-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：414 kB，266 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- Node.js 要求：\>=8\.11\.3
- 运行依赖：8 个
- peer 依赖：react \*，react-dom \*，tailwindcss 3\.x\.x
- 首次发布：2020-10-15T07:44:14.985Z
- 最新版本发布：2022-11-25T11:44:32.122Z
- 近 30 天下载量：3043（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 0 个）

## 中文简介

与 Tailwind CSS 一起使用回放组件库和 UI 框架

## 安装

```sh
npm install @darraghmckay/tailwind-react-ui
```

也可以使用：`pnpm add @darraghmckay/tailwind-react-ui`、`yarn add @darraghmckay/tailwind-react-ui`、`bun add @darraghmckay/tailwind-react-ui`

## README

# 尾风回放 UI

[![CircleCI](https://circleci.com/gh/emortlock/tailwind-react-ui.svg?style=svg)](https://circleci.com/gh/emortlock/tailwind-react-ui)

* * *

**编号 :** 正如"0.#.#"的版本号所显示的那样,这仍然有很多工作在进行中,因此在V1发行被固化之前不会遵循语义化的版本. 期望在小版本跳出时会发生中断更改 .

* * *

Tailwind React UI 提供了可用的已建组件 [尾风 CSS](https://tailwindcss.com/) 公用事业框架.

若您不熟悉 Tailwind背后的概念, 请访问https://tailwindcs.com/docs/What-is-tailwind:

> 创建构建自定义 UIs 的框架,意味着您无法在按钮,窗体,卡片,导航等通常的级别提供抽象. 取而代之的是,Tailwind提供了高度可调和,低级的公用类,使得建立复杂的用户界面变得容易.

Tailwind React UI 利用这些公用类来提供各种项目中常见的基等组件,同时仍然提供自定义输出的能力来匹配您的工程风格.

## 特征

### 无样式构建

Tailwind React UI的组件没有内置/封装样式(禁止一些用于CSS过渡),因此没有特定问题,JS工具链中也没有新的CSS可以应用. 图书馆只使用由 [尾风 CSS](https://tailwindcss.com/) 您的整个应用程序将使用可用钩子来指定应用的类.

### 工具类道具

引入 [道具 API](https://emortlock.github.io/tailwind-react-ui/#usage) 用于 Tailwind 的自定义类和快速原型

-   通过 `withTailind` 更高级的顺序组件,或者通过使用组件原始来处理下风

### 可配置 主题

有个 [可配置主题](https://emortlock.github.io/tailwind-react-ui/#theming) 应用设计系统方法来设计部件的基质

-   用途 [反应上下文](https://reactjs.org/docs/context.html) 用于自定义默认应用的颜色 / 空格 / 等类
    
-   仍然可以利用所有组件中的公用道具来以任何你想要的方式来覆盖默认的发型,同时在再生成组件中应用合理默认,例如. `<FillButton bg="purple-dark" text="white" />` 还将对由此产生的要素采用交互式样式 `<button className="bg-purple text-white hover:bg-purple-darker focus:bg-purple-darker" />`
    

### 可构成组件

Tailwind React UI的成套组件具有高度的可调和性,可以有很大的灵活性.

-   部件基本上可以使用,但可酌情提供包装来控制UI状态来打开/关闭/etc.
    
-   组件具备无障碍最佳做法;投入将读出相关的帮助/错误文本,可切换组件正确呼出其开放状态等
    

### PurgeCSS 支助

[清洗](https://github.com/FullHuman/purgecss) 当使用 TailwindCSS 来剥去任何未使用的公用设施时, 并避免任何复杂情况时, 库会提供您的主题将从组件生成的类的白名单, 以及解析组件使用的公用类道具的自定义提取器 .

## 示例

### 使用工具组件

```jsx
<Box maxW="md" m={{ x: 'auto' }}>
  <Box border shadow bg="white">
    <Box p={4}>
      <Text is="h1" text={['blue', 'xxl']} m={{ b: 4 }}>
        Hello World
      </Text>
    </Box>
    <Flex items="end" wrap reverse>
      <Touchable
        p={{ x: 4, y: 2 }}
        border={[true, 'transparent']}
        bg="blue"
        bg-hocus="blue-dark"
        text="white"
        w="full"
        w-sm="1/5"
      >
        Foo
      </Touchable>
      <Touchable
        p={{ x: 4, y: 2 }}
        border={[true, 'blue']}
        text="blue"
        text-hocus="white"
        bg-hocus="blue"
        w="full"
        w-sm="1/5"
      >
        Bar
      </Touchable>
    </Flex>
  </Box>
</Box>
```

### 使用 UI 组件

```jsx
<Container maxW="md">
  <Card border shadow>
    <CardBody>
      <Title size={6} text="blue">
        Hello World
      </Title>
    </CardBody>
    <CardFooter wrap>
      <FillButton brand="primary" w="full" w-sm="1/5">
        Foo
      </FillButton>
      <OutlineButton brand="primary" w="full" w-sm="1/5">
        Bar
      </OutlineButton>
    </CardFooter>
  </Card>
</Container>
```

## 有用链接

-   [GitHub 图像](https://github.com/emortlock/tailwind-react-ui)
    
-   [文档](https://emortlock.github.io/tailwind-react-ui/#documentation)
    
-   [组件演示](https://emortlock.github.io/tailwind-react-ui/#utility-components)

## 常见问题

### @darraghmckay/tailwind-react-ui 是什么？

与 Tailwind CSS 一起使用回放组件库和 UI 框架

### 如何安装 @darraghmckay/tailwind-react-ui？

在项目目录运行 npm install @darraghmckay/tailwind-react-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-dom（\*）、tailwindcss（3\.x\.x）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @darraghmckay/tailwind-react-ui 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/darraghmckay\_\_tailwind-react-ui 是否存在。

### @darraghmckay/tailwind-react-ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @darraghmckay/tailwind-react-ui 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=8\.11\.3。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @darraghmckay/tailwind-react-ui 可以商用吗？

@darraghmckay/tailwind-react-ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @darraghmckay/tailwind-react-ui 的下载量有多少？

根据 npm 官方下载统计，@darraghmckay/tailwind-react-ui 在 2026/10/12 – 2026/11/10 这 30 天内被下载 3,043 次，日均约 101 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @darraghmckay/tailwind-react-ui 还在维护吗？

最新版本 0\.9\.8 发布于 2022/11/25（3 年前）；至今共发布 13 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/10/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。