Windi CSS 入門

Windi CSS 是下一代實(shí)用程序優(yōu)先的 CSS 框架。

如果您已經(jīng)熟悉 Tailwind CSS，請(qǐng)將 Windi CSS 視為 Tailwind 的按需替代品，它提供更快的加載時(shí)間、與 Tailwind v2.0 的完全兼容性以及一系列額外的酷炫功能。

為什么選擇 Windi CSS？

引用作者的話應(yīng)該可以說(shuō)明他創(chuàng)建 Windi CSS 的動(dòng)機(jī)：

當(dāng)我的項(xiàng)目變大，大概有幾十個(gè)組件時(shí)，初始編譯時(shí)間達(dá)到3s，熱更新用Tailwind CSS 1s多。 - @voorjaar

通過(guò)掃描您的 HTML 和 CSS 并按需生成實(shí)用程序，Windi CSS 能夠在開(kāi)發(fā)中提供更快的加載時(shí)間和快速的 HMR，并且不需要在生產(chǎn)中清除。

Basic Usage

Windi CSS 支持 Tailwind CSS 的所有實(shí)用程序，無(wú)需任何額外配置。

您可以像往常一樣在組件和樣式表中使用實(shí)用程序類：

<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>

只有您使用的實(shí)用程序才會(huì)生成相應(yīng)的 CSS。

整合

我們?yōu)槟钕矚g的工具提供一流的集成，并為每個(gè)工具提供最佳的開(kāi)發(fā)人員體驗(yàn)。請(qǐng)參閱集成指南以開(kāi)始使用！

特點(diǎn)

除了 Tailwind CSS v2 中包含的所有功能外，Windi CSS 還提供了一些很棒的功能。有關(guān)詳細(xì)信息，請(qǐng)參閱下一章。