这是一门有趣的基于项目的课程，学习如何使用 Tailwind CSS 框架创建出色的布局，并熟悉使用实用程序类，而不是像 Bootstrap 这样使用基于组件的类。让我们来看看这门课程的大纲……

 ✔️ 沙盒

我不想直接进入项目，但如果你愿意，你当然可以。所以前两个部分，我们将在编码沙箱中工作。在这些部分的每个新视频中，我们将有一个新文件可供试验并了解有关 Tailwind 的某个方面的所有信息。例如，我们将提供颜色、排版、间距、Flex 类等的页面/视频。这使我们能够按特定顺序对 Tailwind 的所有部分进行必要的触摸，而不仅仅是直接跳转到项目中。

✔️ 小型项目

接下来，我们将利用我们在沙箱环境中学到的东西，并使用它来创建一些小项目。这些需要 10 到 20 分钟才能完成，我们将在每个项目的一个视频中完成。这些小项目包括

1.  电子邮件订阅卡

2.  定价网格

3.  产品模态

4.  图片库

5.  登录模态

我以后甚至可能会添加更多的迷你项目。这些将帮助您通过创造一些东西来弄湿自己的脚。

✔️ 网站项目

接下来，我们将开始开发更大的登陆页面网站。这真的会考验你学到的东西。将有 6 个不同的网站。它们都非常现代且干净。我们与 Frontend Mentor 合作进行设计。一些项目会有一些 javaScript 用于汉堡菜单、选项卡和一些验证。让我们来看看这些项目。

Clipboard 网站 – 简单的软件产品登录页面。主要关注 flexbox 和 alignment。一些背景图像等。

Loopstudios – VR 公司网站，带有很酷的图片、带有一些 JavaScript 的响应式移动菜单、渐变叠加效果。

很快 – 链接缩短工具的网站。我们将有一个漂亮的响应式菜单，并添加一些 JavaScript 用于一些表单验证和使用 DOM。

Testimonial Grid – 我们专注于使用 Tailwind 的网格类的项目。

Fylo – 具有浅色/深色模式功能的产品页面。我们将添加一些 JavaScript 以将颜色模式保存到本地存储。我们还将为 FAQ 提供一个动态选项卡组件。

书签 – 书签管理器扩展登陆页面。该网站将包含一些动态背景图片、汉堡菜单和一些使用 JavaScript 的标签页。