React Tailwind 组件构建器 - 实时预览和代码生成器

什么是 React Tailwind 组件构建器？

React Tailwind 组件构建器是一款免费的浏览器工具，可生成使用 Tailwind CSS 设置样式的 React 组件。用户选择组件类型（如按钮或文本输入框），调整几项样式选项后，工具会在匹配的 JSX 代码旁显示实时预览。所有操作都在浏览器中完成，无需账户，也无需向服务器发送请求。

组件类型

该工具可以生成五种组件：

• 按钮 — 带有自定义文本的可点击按钮
• 文本输入框 — 带有占位文本的单行表单字段
• 文本区域 — 带有指定行数的多行表单字段
• 选择框 — 根据选项列表生成的下拉列表
• 面包屑 — 显示页面在网站中位置的一行链接，例如 首页 / 产品 / 类别

可以更改哪些属性

以下五种样式属性适用于所有组件类型：

• 文本颜色 — 白色、黑色、灰色、蓝色、红色或绿色
• 背景颜色 — 无、白色、浅灰色、蓝色、红色或绿色
• 内边距 — 无、小、中、大或按钮默认值
• 边框圆角 — 无、小、中、大或完全圆角
• 宽度 — 自动、全宽、二分之一、三分之一或四分之一

某些属性只会出现在特定组件类型中：按钮的文本，文本输入框或文本区域的占位文本，文本区域的行数，选择框的选项列表，以及面包屑的项目列表。文本输入框、文本区域和选择框还带有“必填”和“禁用”复选框；按钮也带有“禁用”复选框。

有四种属性是固定的，无法通过界面更改：外边距（始终为 m-0）、边框样式（始终为 border border-transparent）、字号（始终为 text-base）和字重（始终为 font-medium）。每个生成的组件都带有相同的这四个类。如需使用不同的外边距、边框或字号，请手动编辑复制的代码。

生成的类列表如何构建

该工具按照固定顺序为每个组件构建 Tailwind 类字符串：

1. 设置了文本颜色时，添加文本颜色类
2. 设置了背景颜色时，添加背景颜色类
3. 添加内边距、外边距、边框和边框圆角类
4. 宽度不是“自动”时，添加宽度类
5. 添加固定的字号和字重类
6. 添加交互状态（悬停、聚焦、激活）的类，这些类因组件类型而异
7. 选中“禁用”时，添加禁用状态的类

按钮会获得 hover:bg-opacity-90、focus:ring-2、focus:ring-offset-2 和 focus:ring-blue-500。未禁用的按钮还会获得 cursor-pointer。文本输入框、文本区域和选择框则会获得 focus:outline-none、focus:ring-2、focus:ring-blue-500 和 focus:border-blue-500。面包屑不会获得这些交互类；由于导航列表无法禁用，禁用状态也永远不适用于面包屑。

示例：按钮

使用默认设置（白色文本、蓝色 500 背景、中等内边距、圆角）时，工具输出：

示例：文本输入框

使用灰色文本、白色背景、小内边距、大边框圆角、全宽，并选中“必填”时：

示例：文本区域和选择框

文本区域和选择框遵循与文本输入框相同的类构建规则。一个使用黑色文本、中等内边距、中等圆角、全宽并包含 4 行的文本区域：

一个与上面文本输入框示例使用相同颜色和间距、包含三个选项的选择框：

示例：面包屑

面包屑链接和分隔符始终使用固定类（链接使用 hover:text-blue-600，斜杠分隔符使用 mx-2 text-gray-400）。只有外层列表会应用五种共享样式属性。使用灰色文本且没有内边距或圆角时：

响应式预览与响应式类

该工具提供“响应式视图”控件，其中有移动设备、平板电脑和桌面三种选项。切换选项只会改变预览框的宽度，以便用户大致查看组件在较窄屏幕上的外观。它不会向生成的代码添加任何 Tailwind 断点前缀，例如 sm:、md:、lg: 或 xl:。无论选择哪种响应式视图，JSX 输出都相同。如果需要组件在不同屏幕宽度下呈现不同外观，必须自行将这些断点类添加到复制的代码中。

如何将 Tailwind CSS 添加到 React 项目

1. 安装软件包：npm install -D tailwindcss postcss autoprefixer
2. 设置配置文件：npx tailwindcss init -p
3. 在 tailwind.config.js 的 content 中列出项目的源文件
4. 将三个 Tailwind 指令添加到主 CSS 文件中：@tailwind base; @tailwind components; @tailwind utilities;
5. 将生成的组件粘贴到 React 文件中

常见问题

React Tailwind 组件构建器有什么作用？ 它会生成带样式的 React 组件及其对应的 Tailwind CSS 类，并在用户调整设置时显示实时预览。

该工具会自动添加类似 sm: 或 md: 的响应式断点类吗？ 不会。移动设备/平板电脑/桌面控件只会调整预览框的大小。导出的代码不包含 sm:、md:、lg: 或 xl: 类；如有需要，必须手动添加。

可以更改外边距、边框样式或字号吗？ 无法通过界面更改。每个生成的组件都使用相同的固定外边距（m-0）、边框（border border-transparent）、字号（text-base）和字重（font-medium）。请直接编辑复制的代码来更改这些设置。

该工具会保存我的组件吗？ 不会。工具没有保存功能。请复制生成的代码，并将其存储在项目自己的文件中。

它会生成 TypeScript 吗？ 该工具输出 JSX（JavaScript 语法）。输出是普通 JSX 标记，因此无需修改即可粘贴到 .tsx 文件中，但不会生成类型定义。

该工具可以免费使用吗？ 可以。它完全在浏览器中运行，无需账户，也不会向服务器发送请求。

它支持 Next.js、Gatsby 或其他 React 框架吗？ 支持。生成的代码是带有 Tailwind 类的普通 JSX，因此可用于任何已配置 Tailwind CSS 的基于 React 的框架。