Windi CSS 入门

2023-02-16 17:58 更新

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 还提供了一些很棒的功能。有关详细信息,请参阅下一章。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号