典型用法

安装

怎么在 html 中直接引入，或者如何在 npm 项目里安装？

跟着官方教程做吧，咱就不重复写了。

使用

“通过堆叠 class 来使用 tailwind 的主题样式”，没错就是这么一句话，其中的“主题样式”在入门阶段暂时不用在意（好吧，我还是解释一下：就是样式啦。tailwind 自带的样式就是默认主题，也可以魔改或者加自定义的新样式，这个之后再说）。

<!-- 按钮组件 -->
<button
  class="
  px-4 py-2
  bg-blue-600 hover:bg-blue-700
  text-white font-semibold
  rounded-lg shadow-md
  transition-colors duration-200
"
>
  立即登录
</button>

我想你也看到了，这样用会有一个大问题——太长了！

这甚至都不是跟“复用性差”同一个档次的问题，这是纯纯的“毫无可读性”。

然而这就是 tailwind 最基本的用法，框架也提供解决方案，可同时解决复用性和可读性问题。