资源
构建出色的 Tailwind CSS 网站所需的一切
我们认为 Tailwind 是一个出色的 CSS 框架,但您需要的不只是 CSS 框架才能制作出视觉上令人惊叹的作品。
设计资源
设计很难,所以我们制作了一些资源来帮助您进行设计。这些资源是帮助您进行设计的好方法,也是支持框架开发的好方法。
重构 UI
学习 UI 设计
了解更多, 重构 UI重构 UI 是 Adam Wathan 和 Steve Schoger 共同制作的一本面向开发人员的设计书籍 + 视频系列。它涵盖了我们所知道的有关如何让事物看起来很棒的一切。
到目前为止,已有近 10,000 人选择了它,并且对它如何帮助他们改进工作说了各种各样很棒的话。
Tailwind UI
由 Tailwind CSS 的创建者精心打造的漂亮 UI 组件
了解更多, Tailwind UITailwind UI 是一个专业设计、预构建、完全响应的 HTML 代码段集合,您可以将其放入 Tailwind 项目中。
目前有 550 多个组件可用于三个不同的类别(营销、应用程序 UI 和电子商务),并且我们一直在添加更多组件。
其他资源
Tailwind 并不是我们维护的唯一开源项目。我们制作了一些其他资源来帮助您进行设计和开发工作流程。
Heroicons由 Tailwind CSS 的创建者制作的漂亮的手工 SVG 图标。
了解更多, 由 Tailwind CSS 的创建者制作的漂亮的手工 SVG 图标。一套 450 多个免费的 MIT 许可 SVG 图标。可作为基本 SVG 图标以及通过第一方 React 和 Vue 库获得。
Hero Patterns由 Tailwind CSS 的创建者制作的无缝 SVG 背景图案。
了解更多, 由 Tailwind CSS 的创建者制作的无缝 SVG 背景图案。一个包含 100 多个免费的 MIT 许可的高质量 SVG 图案的集合,供您在 Web 项目中使用。
屏幕录制
前往我们的官方 YouTube 频道,深入了解数十个视频,这些视频将教会您从 Tailwind 基础到高级概念的一切知识。
基础知识将自定义设计系统转换为 Tailwind CSS
了解如何配置 Tailwind 以创建专为您的项目调整的实用程序框架。
基础知识将 Tailwind CSS 添加到现有项目
了解如何在不产生命名冲突或特殊性问题的情况下将 Tailwind CSS 添加到现有项目。
我们的构建方式使用 Tailwind CSS、Shopify 和 Next.js 构建无头电子商务商店
使用 GraphQL API 从 Shopify 商店获取产品,并使用 Tailwind UI 组装页面。
连接并做出贡献
无论您是初学者还是高级用户,加入 Tailwind 社区都是一个与志同道合的人联系的好方法,他们正在使用该框架构建很棒的东西。