Windi CSS 入门

Windi CSS 是下一代实用程序优先的 CSS 框架。

如果您已经熟悉 Tailwind CSS，请将 Windi CSS 视为 Tailwind 的按需替代品，它提供更快的加载时间、与 Tailwind v2.0 的完全兼容性以及一系列额外的酷炫功能。

为什么选择 Windi CSS？

引用作者的话应该可以说明他创建 Windi CSS 的动机：

当我的项目变大，大概有几十个组件时，初始编译时间达到3s，热更新用Tailwind CSS 1s多。 - @voorjaar

通过扫描您的 HTML 和 CSS 并按需生成实用程序，Windi CSS 能够在开发中提供更快的加载时间和快速的 HMR，并且不需要在生产中清除。

Basic Usage

Windi CSS 支持 Tailwind CSS 的所有实用程序，无需任何额外配置。

您可以像往常一样在组件和样式表中使用实用程序类：

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:(py-4 flex items-center space-y-0 space-x-6)">
  <img class="block mx-auto h-24 rounded-full sm:(mx-0 flex-shrink-0)" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">Erin Lindford</p>
      <p class="text-gray-500 font-medium">Product Engineer</p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:(text-white bg-purple-600 border-transparent) focus:(outline-none ring-2 ring-purple-600 ring-offset-2)">
      Message
    </button>
  </div>
</div>

只有您使用的实用程序才会生成相应的 CSS。

整合

我们为您最喜欢的工具提供一流的集成，并为每个工具提供最佳的开发人员体验。请参阅集成指南以开始使用！

特点

除了 Tailwind CSS v2 中包含的所有功能外，Windi CSS 还提供了一些很棒的功能。有关详细信息，请参阅下一章。