由 Tailwind CSS 制作者打造

使用 Tailwind CSS 打造的精美 UI 组件。

HTML
React
Vue

500 多个专业设计、完全响应式、精心制作的组件示例,您可以将其直接放入您的 Tailwind 项目中,并根据自己的喜好进行自定义。

500 多个组件

精美设计、精心制作的组件,遵循所有无障碍最佳实践,易于自定义。

React、Vue 和 HTML

由 Headless UI 提供支持的 React 和 Vue 的交互式示例,以及如果您想自己编写任何必要的 JS 的纯 HTML。

完全响应式

每个示例都完全响应式,并经过精心设计和实施,以确保在任何屏幕尺寸下都能看起来很棒。

营销

英雄区、特色版块、新闻稿订阅表单——构建精美营销网站所需的一切。

页面版块

元素

反馈

页面示例

  • 登录页面

    4 个示例

    仅提供 PNG 预览,升级以获取 HTML。

  • 定价页面

    3 个示例

    仅提供 PNG 预览,升级以获取 HTML。

  • 关于页面

    3 个示例

    仅提供 PNG 预览,升级以获取 HTML。

应用程序 UI

表单布局、表格、对话框——构建精美响应式 Web 应用程序所需的一切。

应用程序外壳

标题

数据展示

  • 描述列表

    7 个组件

  • 统计数据

    5 个组件

    仅提供 PNG 预览,升级以获取 HTML。

  • 日历

    8 个组件

    仅提供 PNG 预览,升级以获取 HTML。

列表

  • 堆叠列表

    17 个组件

  • 表格

    20 个组件

    仅提供 PNG 预览,升级以获取 HTML。

  • 网格列表

    7 个组件

    仅提供 PNG 预览,升级以获取 HTML。

  • 信息流

    3 个组件

    仅提供 PNG 预览,升级以获取 HTML。

表单

反馈

  • 警报

    6 个组件

    仅提供 PNG 预览,升级以获取 HTML。

  • 空状态

    6 个组件

    仅提供 PNG 预览,升级以获取 HTML。

导航

  • 导航栏

    11 个组件

  • 分页

    3 个组件

  • 选项卡

    9 个组件

    仅提供 PNG 预览,升级以获取 HTML。

  • 垂直导航

    6 个组件

    仅提供 PNG 预览,升级以获取 HTML。

  • 侧边栏导航

    5 个组件

    仅提供 PNG 预览,升级以获取 HTML。

  • 面包屑

    4 个组件

    仅提供 PNG 预览,升级以获取 HTML。

  • 步骤

    8 个组件

    仅提供 PNG 预览,升级以获取 HTML。

  • 命令面板

    9 个组件

    仅提供 PNG 预览,升级以获取 HTML。

覆盖层

元素

布局

  • 容器

    5 个组件

    仅提供 PNG 预览,升级以获取 HTML。

  • 面板

    10 个组件

    仅提供 PNG 预览,升级以获取 HTML。

  • 列表容器

    7 个组件

    仅提供 PNG 预览,升级以获取 HTML。

  • 媒体对象

    8 个组件

    仅提供 PNG 预览,升级以获取 HTML。

  • 分隔线

    8 个组件

    仅提供 PNG 预览,升级以获取 HTML。

页面示例

  • 首页

    2 个示例

    仅提供 PNG 预览,升级以获取 HTML。

  • 详情页

    2 个示例

    仅提供 PNG 预览,升级以获取 HTML。

  • 设置页

    2 个示例

    仅提供 PNG 预览,升级以获取 HTML。

电子商务

结账表单、购物车、产品视图 - 构建下一个电子商务前端所需的一切。

组件

页面示例

定价

一次购买,永久使用。

每个组件包都包含终身访问权限、免费更新以及 React、Vue 和纯 HTML 的示例。

获取全功能访问权限

获取全功能访问权限

$299

一次性付款
加上当地税费

只需一次性付款,即可获得所有应用程序 UI、营销和电子商务组件的终身访问权限,以及我们所有网站模板的访问权限。

全功能访问权限功能

  • 500 多个组件 — 构建精美应用程序 UI、营销网站、电子商务商店等所需的一切。

  • 每个网站模板 — 精美设计、精心制作的网站模板,使用 React 和 Next.js 等现代技术构建。

  • 终身访问权限 — 立即访问我们今天拥有的所有内容,以及我们将来添加的任何新组件和模板。

适用于团队 — 访问我们所有组件和模板,以及您整个团队的任何未来更新。

  • $149加上当地税费

    英雄、特色部分、时事通讯注册表单 — 构建精美营销网站所需的所有组件。

  • $149加上当地税费

    表单布局、表格、对话框 — 构建精美响应式 Web 应用程序所需的所有组件。

  • $149加上当地税费

    结账表单、购物车、产品视图 — 构建下一个电子商务前端所需的所有组件。

客户评价

Tailwind 和 Tailwind UI 再次显著加快了我的前端工作。到目前为止,Tailwind UI 无疑是我购买过的投资回报率最高的数字资产。

Ben Barbersmith@benbarbersmith

常见问题解答

您需要了解的一切

一般

What does “lifetime access” mean exactly?

Tailwind UI products are a one-time purchase, with no recurring subscription. When you purchase any Tailwind UI product, you have access to all of the content in that product forever.

What does “free updates” include?

When you purchase any Tailwind UI product, any improvements we make or new content we add to that product will always be free for anyone who owns that product.

Individual component packages: When you buy the Marketing, Application UI, or Ecommerce component packages individually, you'll get any new components we add to those packages in the future at no extra cost.

We regularly add new components to these packages whenever we have new ideas, and you can see what previous updates have looked like in our changelog.

Any new component packages we release are considered separate products, and can be purchased at an upgrade price.

All-access: When you purchase an all-access license, you get access to every component package and every site template available today, plus any additional component packages or templates we release in the future at no additional cost.

This means that if we add a brand new component package like “Journalism” or design a new social media website template, access to those products are included in your original purchase, with no upgrade cost.

兼容性

Are Figma, Sketch, or Adobe XD files included?

No, design assets for tools like Figma, Sketch, or Adobe XD are not included.

We don't produce high-quality design artifacts as part of our own design and development process, so building these extra resources means we can't spend as much time creating new examples in code which is where we believe we can provide the most value.

What JS framework is used?

All of the components in Tailwind UI are provided in three formats: React, Vue, and vanilla HTML.

The React and Vue examples are fully functional out-of-the-box, and are powered by Headless UI — a library of unstyled components we designed to integrate perfectly with Tailwind CSS. Headless UI supports both React and Vue 3, but is not compatible with Vue 2.

The vanilla HTML examples do not include any JavaScript and are designed for people who prefer to write any necessary JavaScript themselves.

Most of the components do not rely on JS at all, but for the ones that do (dropdowns, dialogs, etc.) we've provided some simple comments in the HTML to explain things like what classes you need to use for different states (like a toggle switch being on or off), or what classes we recommend for transitioning elements on to or off of the screen (like a dialog opening).

To get a better idea of how this looks in practice, check out our documentation.

What version of Tailwind CSS is used?

Everything in Tailwind UI is designed and developed for the latest version of Tailwind CSS, which is currently Tailwind CSS v3.4.

What browsers are supported?

The components in Tailwind UI are designed to work in the latest, stable releases of all major browsers, including Chrome, Firefox, Safari, and Edge.

We don't support Internet Explorer 11.

许可

Can I upgrade to a team license later?

Yup! If you're a solo developer you can start with a personal license, and then upgrade to the team license later if other developers join your team.

There is an "Upgrade to Team License" option under the "Account" menu within the Tailwind UI app after logging in.

Note that we only offer team all-access licenses, and do not offer team licenses for the individual component packages.

Do I need to purchase a license for each project I work on?

Unlike most other templates/themes, you don't have to buy a new Tailwind UI license every time you want to use it on a new project.

As long as what you're building is allowed as per the license, you can build as many sites as you want without ever having to buy an additional license.

For more information and examples, read through our license.

Can I use Tailwind UI for client projects?

Yes! As long what you're building is a custom website developed for a single client, you can totally use components and templates in Tailwind UI to help build it.

The only thing you can't do is use Tailwind UI to build a website or template that is resold to multiple clients.

For more information and examples, read through our license.

Can I use Tailwind UI for my own commercial projects?

Absolutely! Your license gives you permission to build as many of your own projects as you like, whether those are simple public websites or SaaS applications that end users need to pay to access.

As long as what you’re building isn’t a website builder or other tool that customers can use to create their own sites using elements that originate from Tailwind UI, you’re good to go.

For more information and examples, read through our license..

Can I use Tailwind UI in open source projects?

Yep! As long as what you're building is some sort of actual website and not a derivative component library, theme builder, or other product where the primary purpose is clearly to repackage and redistribute our components, it's totally okay for that project to be open source.

For more information and examples of what is and isn't okay, read through our license.

Can I sell templates/themes I build with Tailwind UI?

No, you cannot use Tailwind UI to create derivative products like themes, UI kits, page builders, or anything else where you would be repackaging and redistributing our components or templates for someone else to use to build their own sites.

For more information and examples of what is and isn't okay, read through our license.

支持

你们提供技术支持吗?

Tailwind UI 是一款自助产品,这意味着虽然我们提供客户支持来处理帐户管理和许可相关问题,但我们期望客户具备使用 Tailwind CSS、HTML、React 和 Vue 的必要知识,才能成功使用该产品。

由于每个项目都不同,并且独立编写的代码片段之间的交互方式可能很复杂且耗时,因此 我们不提供技术支持或咨询

Tailwind UI 客户可以访问一个私人 Discord 社区,在那里您可以提出问题并帮助他人解决他们的问题,但我们自己不提供第一方技术支持或咨询。

你们的退款政策是什么?

如果您对您的购买有任何不满意,请在 30 天内通过电子邮件联系我们 [email protected],我们将全额退款,无需任何理由。