逐步学习使用 TailwindCSS 3.0 和示例构建现代网站 | Tailwind CSS 3.0: Fundamentals

您将了解 Tailwind CSS，这是一个改变您使用 CSS 的方式的 CSS 框架。您将发现并体验它与其他人的不同之处。

本课程将为您节省学习和研究工作，您将从头开始学习基础知识，以构建您下定决心的任何网站。

在这门综合课程中了解如何使用 Tailwind CSS。

• 使页面适应不同的屏幕尺寸（响应式设计）
• 应用 CSS 状态
• 设计暗模式
• 重用你的风格（不要重复自己的原则）
• 了解如何安装和使用插件

Tailwind CSS 是目前最流行的 CSS 框架，它采用与标准 CSS 截然不同的方法。

通常，当您想要设置网页样式时，您已经编写了 CSS。Tailwind CSS 为您提供了可直接包含在 HTML 中的预定义类。

该框架涵盖了您可能需要的所有内容：颜色、大小、字体类型、边距、间距、弹性框、圆角、阴影等。因此您可以编写完全自定义的设计，而无需编写任何 CSS。

这种工作方式为您提供了几个优势。例如：

• 您不会花费精力选择班级名称。
• 您没有要维护的 CSS 文件。
• 样式是每个页面的本地样式。

基于实用程序类的框架，例如 Tailwind CSS，已经被 GitHub、Heroku、Twitch 或 Kickstarter 等知名公司使用。Netflix 已经在其收视率最高的 10 大电视和电影列表中使用了 Tailwind CSS。市场上的使用趋势正在增长。

您将使用 Tailwind CSS 实用程序类作为课程项目为类似 Netflix 的网站构建登录页面。你会一点一点地改进和完成它。

课程大纲：

• 安装节点。它是安装必要软件包的基础。
• 配置 Visual Studio Code，我将向您展示我用来舒适工作的插件。
• 安装 Tailwind CSS 及其依赖项，让一切准备好开始工作。
• 使用移动优先的方法构建类似 Netflix 的登录页面。
• 使页面适应不同的屏幕尺寸，称为响应式设计。
• 添加 CSS 状态，例如当您将鼠标悬停在按钮上时。
• 使用自动暗模式配置您的页面。
• 创建可以重用的自定义类，以避免重复代码。

您还将控制 4 个官方 Tailwind CSS 插件：

• 排版：设置文本样式（例如，来自数据库的文本）。
• 表格：用于样式表格
• Aspect-Ratio :控制图像的纵横比
• Line-Clamp : 限制文字，达到视觉和谐

此外：

• 在每个课程模块之后，您将进行一次测验，以检查您是否错过了任何重要的事情。
• 该课程还活着，我将随着 Tailwind CSS 的发展对其进行更新。您还可以访问我发布页面源代码的存储库。

通过本课程，我可以让您轻松实用地建立良好的基础并构建您想要的任何页面，并提供清晰实用的课程。

如果您还没有决定，您可以免费观看我们从头开始构建页面的课程。所以你可以看到整个过程。

当然，如果您有任何问题，您可以将它们发布在问题和答案部分，我会在那里回答。

里面见！