您希望拥有的 Tailwind CSS 资源。

背景故事

这周我决定研究一下 Tailwind CSS 并创建一个简单的电子商务网站。我首先注意到的是它的文档写得非常好。即使 Tailwind 是你的第一个 CSS 框架，你也可以轻松地浏览不同的部分😉。在某些领域，比如导航，他们上传了一些视频教程来帮助你轻松地创建导航。所有部分都有带有交互式小部件的代码片段，向你展示 UI 组件在不同屏幕尺寸下的外观。此外，还有一个自定义部分，向你展示如何应用自定义样式，例如如何添加特定的rems、colors、font-size、insets等。文档让我能够更快地编写代码。最好的是，这个框架不会限制你。人们无法分辨你是从头开始构建网站还是使用 Tailwind 框架构建的。每个网站仍然会有其独特的属性，具体取决于设计和实现的实用程序类。
最重要的是，Tailwind 使用移动优先断点系统，并且只使用min-width而不是max-width。您为较小断点添加的类将在较大的断点中使用。这花了一点时间来适应，因为我一直都在用，max-width但现在我真的很喜欢它。
让我的 HTML 文件变得干净整洁的最有用的方法就是使用这个@apply方法。我没有把实用类放在整个 HTML 文件中，而是在 style.css 文件中使用了它们。这就像在 SASS 中使用 mixin 一样。

附言：在开始使用 Tailwind CSS 之前，请确保您先了解 HTML 和 CSS。这样，您就不会对实用类及其应用感到困惑。如果您更喜欢视觉化，并且不喜欢通过文档学习，我推荐Net Ninja Tailwind CSS 速成课程。Shaun 将指导您如何使用 Tailwind 从零开始构建一个简单的网站。（我是他 YouTube 频道的忠实粉丝，真不敢相信他的内容是免费的。🤗）

Tailwind CSS 资源

让我列出一些我在学习过程中发现有用的资源。希望你能把它们添加到你的列表中，或者如果已经使用了的话，继续使用它们。

1）TailwindInk

这是一个颜色生成器网站，当你选择品牌颜色时，它会为你提供互补色。你可以轻松地将颜色代码复制到你的 tailwind 配置 js 文件中。

2）尾块

这个令人惊叹的项目由Mert Cukuren创建，它包含 60 多个使用 Tailwind 构建的 UI 模块，随时可用。只需点击“查看代码”按钮，然后将代码复制到您的文件中即可。此外，这些组件完全响应式设计，您可以查看这些模块在不同屏幕设备上的显示效果。您可以选择网站上使用的配色方案。例如，在下图中，我选择了蓝色。更棒的是，您可以打开暗黑模式，查看模块的实际显示效果。

3）Tailwind 入门套件

这个网站有很多很棒的组件，可以帮助你快速上手。你只需要稍微调整一下颜色，并添加/删除一些你选择的组件即可。文档简单易懂，你不太可能会感到困惑。该工具包包含登录页面、控制面板、个人资料页面等等。

4）针迹

这是 Tailwind 组件的模板生成器。您只需将想要在网站上使用的不同 UI 块拖放到模板中，网站就会为您生成代码。它使用简单，直观易懂。有时，您无需从头编写所有代码。

5 Tailwind 字体排版演练

这是一个很棒的网站，你可以在实际编写代码之前检查排版效果。你可以选择标题和正文的字体系列，看看它们是否符合你的喜好。如果你不太确定，可以轻松选择其他字体系列。所有使用的字体都可以在 Google Font 网站上免费获取。

6）Tailwind 组件

这是一个免费的社区组件库，使用 Tailwind CSS 构建。其中包含各种组件，例如 404 页面、通知下拉菜单、电商产品列表页等等。您还可以查看组件在不同屏幕尺寸或断点下的显示效果。您还可以提交自己的代码组件供他人使用和分享。

7）Tailwind周刊

这个很棒的网站由 Vivian Guillen 创建，他每周都会发布关于 Tailwind CSS 的新闻通讯。你不必担心你的邮箱被垃圾邮件骚扰（我也很讨厌这种情况），因为文章每周都会发布一篇。

8 顺风跑

这就像一个实时代码编辑器，可以随时随地创建 Tailwind UI 块。它就像使用 Codepen 一样，但已经为你添加了 Tailwind。你有一个 HTML 文件，可以在其中添加元素和实用类，还有一个配置文件，可以添加任何你想要的自定义样式。如果你想在不打开本地编辑器的情况下练习 Tailwind，这个网站非常适合你。

9）顺风梯度生成器

如果你像我一样热爱渐变，你会发现这个网站非常有用。你可以选择不同的颜色（最多 3 种），并选择渐变的起始和结束方向。之后，代码会为你生成，你可以将其复制到编辑器中的代码中。这些繁琐的工作都为你完成了，让整个过程更加轻松。

10 个很棒的 Tailwind CSS

这是一个很棒的 Github 仓库，我建议你在学习或使用 Tailwind 构建项目时，随时将它放在你的口袋里。这里有超过 90 个精彩的资源，可以帮助你在构建不同的网站时轻松上手。我相信，如果你使用仓库中提供的资源，你的工作效率一定会翻倍。即使有些资源我还没有添加到这里，你也一定能在那里找到。其中一些资源包括：

• IDE 扩展
• 插件
• 帮助您启动项目的工具
• UI 组件和模板助您启动项目
• 入门和主题
• Tailwind 开源项目值得贡献。
• Tailwind 学习资源可帮助您完成旅程。

综上所述

Tailwind 是一款非常棒的 CSS 框架，值得考虑在下一个项目中使用。有很多资源可以帮助你快速启动项目，但我希望上面的列表能对你有所帮助。别忘了把这篇文章分享给你的朋友和其他正在学习 CSS 框架的代码新手。

此外，Ro 还创建了一个名为“Devs helping Dev”的精彩社区。您可以加入Discord。该频道关注开发者的心理健康，您可以从有同样经历的同行那里获得支持。如今许多人失业或转行科技，您会发现这个社区充满关爱，并在您的职业生涯中为您提供帮助。希望在那里见到您。Twitter 账号：@devshelpingdevs 🥰

如果你觉得这篇文章有用，请分享给你的同学或正在学习 Tailwind CSS 的初学者。你也可以请我喝杯咖啡。🙂