tailwind-css - 使用 Tailwind CSS 开发 Web UI 的基础方法

Question

所有指南和视频教程都只是展示了使用 Tailwind CSS 实现样式是多么容易和快速，它们都没有解释为什么要应用这些类或选择嵌套<div>标签。

以下面 URL 中的第一个 Banner 模板为例，https://tailwindui.com/components/marketing/elements/banners为什么一个简单的 Banner 有这么多嵌套标签？不能将它们组合成 1 个或 2 个<div>标签以使其更简单且易于阅读/维护吗？我就是不明白为什么？

标签： tailwind-css

Answer 1

由于 Tailwind 是一个实用程序框架，它本质上是一对一地映射到 vanilla CSS，因此了解它们为何应用某些 Tailwind 类与了解底层 CSS 规则是相同的。

我强烈建议学习使用纯 HTML/CSS 创建网站，而不必担心使用 Tailwind 或其他框架。深入了解 HTML/CSS 的工作原理将使学习使用 Tailwind 并了解其优势和劣势变得更加容易。

Web.dev 有关于 CSS 基础和MDN的精彩课程。网上还有很多其他资源可以满足您的需求。