你不需要学习 Tailwind CSS 就能使用它
几个月前，我写了一篇关于何时学习 React 的文章，现在在这篇文章中，我将对 TailwindCSS/Tailwind 做类似的事情，只不过是“使用”而不是“学习”，因为你不需要学习 Tailwind。
大约一周前，我决定写这篇文章，因为我发现使用 Tailwind 非常容易，尽管我当时并没有学习任何相关知识。我当时只是在为 Hacktoberfest 的一个开源项目做贡献而已。
这个项目用了 Tailwind 框架，虽然我更喜欢原生 CSS，但项目要求我还是得用。相信我，这简直易如反掌，除非你觉得在公园散步都不容易。嗯……🤔
Tailwind 对 CSS 开发者来说是一个非常有用的框架，但我见过一些开发者对这个框架存在误解。Tailwind 并不是一个学习 CSS 的框架，它本身也无法提升你对 CSS 的知识或理解。
嘿，别急着跑到评论区说“我不同意你的观点，Tailwind 帮助我更好地理解了 CSS”。先让我解释一下，好吗？让我们一起学习新知识。
另外，正如我在一篇关于 React 的类似文章中提到的，本文并非劝阻你使用 Tailwind 或其他 CSS 框架，而是希望解释 Tailwind 是什么、何时使用以及如何使用它。所以，请放松心情，享受这段轻松愉快的阅读之旅吧。
Tailwind是什么？
Tailwind 是一个实用性优先的 CSS 框架，它让 CSS 的使用更加便捷。因此，你无需使用语义化的类以及样式表文件，只需使用单一用途的类即可。
这意味着，一个简单的网页的传统HTML文件可以是这样的：
<style>
.desc {
padding: 15px;
border: 2px solid red;
}
.subtitle {
color: gray;
}
</style>
<p class="desc">This is the description of the page</p>
<h1>Hello World</h1>
<p class="subtitle">This is a subtitle</p>
所以类的样式desc只应用于p元素本身，对吧？但有了 Tailwind 之后，情况会更好。
<p class="p-4 border-2 border-solid border-red-900">
This is the description of the page
</p>
<h1>Hello World</h1>
<p class="text-gray-900">This is a subtitle</p>
我们在第一个示例中应用的所有样式（padding，，border和color）都已应用到第二个示例中，而无需您直接使用 CSS。
因此，您只需flex在 Tailwind 提供的全局样式文件中指定一个样式声明类，即可将样式应用到元素上。同样的方法也适用于transition动画、样式表border-radius等诸多其他功能。
我们提供了所有你可能需要的样式，它们都以类的形式提供，你只需将它们插入到你的 HTML 文件中即可。仅此一项就能让你的 CSS 工作效率提升十倍。
Tailwind 的另一个优点是，与 JavaScript 框架（例如 React）不同，Tailwind 并不局限于某些项目，或者更确切地说，它并非“最适合”某些项目。Tailwind 的应用范围很广，从简单的个人项目到可扩展的 Web 应用程序都可以使用。
如何使用 Tailwind
正如副标题所示，你不需要学习 Tailwind，只需要使用它。很多开发者可能不认同我的观点，但这是事实。
想想看：除了如何为你的项目进行设置之外，学习 Tailwind 没有什么其他内容。
如果你发现自己在学习 Tailwind，那么你实际上学习的并不是 Tailwind，而是 CSS。我稍后会解释这是为什么。
但在使用 Tailwind 之前，请尽可能地学习好 CSS 的基础知识。因为 Tailwind 的作用是让使用其他工具更便捷，但如果你不理解或不了解主要工具的工作原理，使用起来就会很吃力。
例如，一位真正了解产品设计的产品设计师，在使用其他设计工具时绝不会感到吃力。他/她可能需要一些时间来完全适应新的工作环境，但最终肯定能够做到。
我使用 Tailwind 的方式正是我向遇到的每个初学者推荐的方式，因为有趣的是，几乎没有哪个真正懂得如何使用 CSS 的 CSS 开发人员会在使用 Tailwind 时遇到困难。
对我来说，情况是这样的：假设我需要创建一个元素，元素的内容和容器之间要有空格，我会直接去Tailwind 文档里查找可用的类padding。因为我需要的是padding正确的吗？不是margin！
现在我如何才能确切地知道完成这项工作需要哪些东西呢？我已经掌握了CSS的基础知识。
同样，要为按钮创建悬停效果，我只需前往 Tailwind 的文档查看可用于悬停的类，或者更好的是，查看如何使用 Tailwind 应用悬停效果。
总而言之，既然我知道自己想用 CSS 实现什么，那么接下来我想了解如何用 Tailwind 来实现这些功能。随着时间的推移，我可能不再需要查阅 Tailwind 的文档来了解如何应用paddingCSS 样式，因为到那时我已经熟练掌握了最常用的样式。
这就是为什么我不建议尝试学习/记忆 Tailwind 的类——例如py`Tailwind`、px`Tailwind` rounded、`Tailwind` 等。这完全是浪费时间。
只有当你用这些课程知识完成大量项目后，它们才会真正留在你的记忆中，你不需要死记硬背它们。
此外，还有一个很棒的VSCode 扩展程序，可以自动补全这些类名，而无需您查阅文档。
所以，如果你是 CSS 新手，想要直接学习 Tailwind，我建议你先练习一下你所掌握的 CSS 知识，用 CSS 构建两到三个简单的项目，然后再用 Tailwind 构建项目。
你需要知道你想设置什么样式，然后至少要对如何使用原生 CSS 设置元素样式有一个大致的了解，这样使用 TailwindCSS 设置样式就会更容易。
结论
Tailwind 能提升你的 CSS 知识吗？
在我看来，Tailwind本身并不能提升你对CSS的知识或理解，只有你自己才能做到这一点。方法如下：
当您使用 Tailwind 将样式应用于元素时，您与该元素样式的大部分交互都是在 CSS 中进行的，您将看到 Tailwind 是如何用 CSS 编写的，您甚至可以在浏览器中进行一些更改，因此，您正在提高自己的 CSS 水平。
但所有这些都是通过 Tailwind 实现的，所以你可以把功劳归于 Tailwind。不过，请在评论区告诉我你对 Tailwind 的看法。分享你的经验，因为以上是我的经验。
好了，感谢阅读！如果你喜欢这篇文章，请关注我并点赞，这样就能看到更多内容了。你也可以在推特上联系我，我的账号是@elijahtrillionz 。如果你觉得我值得，也可以请我喝杯咖啡支持一下😃
