Windi CSS样式的认识和使用

最新推荐文章于 2025-04-18 10:46:47 发布

可爱的秋秋啊

最新推荐文章于 2025-04-18 10:46:47 发布

阅读量1k

点赞数 3

分类专栏： css 文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/mq1314520_zhl/article/details/143888709

版权

css 专栏收录该内容

7 篇文章

订阅专栏

1、摘要

Windi CSS 是下一代工具优先的 CSS 框架。如果你已经熟悉了 Tailwind CSS，可以把 Windi CSS 看作是按需供应的 Tailwind 替代方案，它为你提供了更快的加载体验，完美兼容 Tailwind v2.0，并且拥有很多额外的酷炫功能。

网址（中文官方文档）：特性 | Windi CSS

2、为什么选择 Windi CSS？

通过扫描 HTML 和 CSS 按需生成工具类（utilities），Windi CSS 致力于在开发中提供更快的加载体验以及更快的 HMR，并且在生产环境下无需对 CSS 进行 Purge（一种在生产环境中对未使用的 CSS 进行清除而节省体积的技术）

3、安装与配置

对于构建工具的支持基本与框架无关。它们适用于大多数框架，无需进行特殊配置。

vite
```
npm i -D vite-plugin-windicss windicss
```
然后，在你的 Vite 配置中添加插件：
```
import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}
```
最后，在你的 Vite 入口文件中导入 virtual:windi.css：
```
import 'virtual:windi.css'
```
注意：Windi CSS 为主流工具提供了最佳的适配。你可以选择你喜欢的工具并开始使用 Windi CSS。

4、基础用法

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">产品经理</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)">
      消息
    </button>
  </div>
</div>