构建令人敬畏的 Tailwind CSS 网站所需的一切其他内容

我们认为 Tailwind 是一个令人惊叹的 CSS 框架，但你需要的不仅仅是一个 CSS 框架来制作视觉上令人惊叹的作品。

设计资源

设计很难，所以我们制作了一些资源来帮助您。这些资源是帮助您设计的好方法，也是支持框架发展的好方法。

• Refactoring UI

  学习 UI 设计

  《重构 UI》是由亚当·瓦森和史蒂夫·肖格合作编写的面向开发者的设计书籍和视频系列。它涵盖了我们所知道的关于让事物看起来很棒的一切。

  迄今为止，已有近 10,000 人使用它，并且对它有很多好话，说它如何帮助他们改善工作。

  了解更多
  

• Tailwind UI

  由 Tailwind CSS 的创作者精心打造的美丽 UI 组件

  Tailwind UI 是一组专业设计的、预先构建的、完全响应式的 HTML 片段集合，您可以将其放入您的 Tailwind 项目中。

  目前有超过 550 个组件可用，分为三个不同的类别（营销、应用程序 UI 和电子商务），我们会不断添加更多。

  了解更多
  

额外资源

Tailwind 不是我们维护的唯一开源项目。我们还制作了一些其他资源，以帮助您进行设计和开发工作流程。

• Headless UI 完全未经样式化的、完全可访问的用户界面组件

  完全未经样式化的、完全可访问的 UI 组件，旨在与 Tailwind CSS 美观地集成。

  了解更多
  

• Heroicons 美丽手工制作的 SVG 图标，由 Tailwind CSS 的制作者制作

  450 个获得 MIT 许可的免费 SVG 图标。提供基本的 SVG 图标和第一方 React 和 Vue 库。

  了解更多
  

• Hero Patterns Tailwind CSS 制造商提供的无缝 SVG 背景图案

  一组超过 100 个免费的 MIT 许可的高质量 SVG 图案，供您在网页项目中使用。

  了解更多
  

视频

前往我们的官方 YouTube 频道，深入了解数十个视频，从 Tailwind 基础知识到高级概念，应有尽有。

• 基础知识 将定制设计系统转换为 Tailwind CSS

  了解如何配置 Tailwind，以创建专为您的项目而设计的实用框架。

  

• 基础知识 在现有项目中添加 Tailwind CSS

  了解如何将 Tailwind CSS 添加到现有项目中，而不会遇到命名冲突或特殊性问题。

  

• 我们如何建造 使用 Tailwind CSS、Shopify 和 Next.js 创建电子商务商店

  使用 GraphQL API 从 Shopify 商店获取产品，并使用 Tailwind UI 组装页面。

  

联系与贡献

无论您是初学者还是高级用户，参与 Tailwind 社区都是与志同道合的人联系的绝佳方式，他们正在使用这个框架构建令人惊叹的东西。

• Discord

  加入 Discord 群组的 10,000 多名成员，一起讨论 Tailwind 和其他相关话题。

• GitHub Discussions

  在项目中遇到问题？请与 Tailwind 社区的其他成员联系，以获得帮助。