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

【问题标题】：Underlying methodology of web UI developement using Tailwind CSS使用 Tailwind CSS 开发 Web UI 的基础方法
【发布时间】：2021-08-11 10:18:23
【问题描述】：

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

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

【问题讨论】：

标签： tailwind-css

【解决方案1】：

由于 Tailwind 是一个实用程序框架，它本质上是一对一地映射到原始 CSS，因此了解它们为何应用某些 Tailwind 类就像了解底层 CSS 规则一样。

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

Web.dev 有一个 great course on CSS fundamentals 和 MDN。还有很多其他在线资源可以满足您的需求。

【讨论】：