携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

一、初识windicss

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

在创建WindiCss时，作者曾说：

当项目越来越大时，使用Tailwind CSS最初编译的时间达到了3s，而热更新时的时间甚至超过了1s

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

二、安装使用

windicss支持以下构建工具：

vite
webpack
rollup
POSTCSS
CLI

windicss支持以下框架：

nuxt
vue cli
gridsome
svelte

对于一些编辑器，windicss也有相应的插件：

VS Code
WebStorm

因为我主要是用于适配我的个人博客项目，所以采用vite安装的同时使用其在vscode上的插件 vite安装命令如下

npm i -D vite-plugin-windicss windicss

然后，在你的 Vite 配置(vite.config.js)中添加插件：

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

最后，在你的 Vite 入口文件(main.js)中导入 virtual:windi.css：

import 'virtual:windi.css'

在vscode中安装windicss插件步骤如下：

综上所述，我们的windicss和插件就引入成功了，接下来终端执行相应的命令启动项目

PS C:\Users\My\Desktop\learn\blog-vue\blog-vue> npm run dev
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> blog-vue@0.0.0 dev
> vite


  VITE v3.0.7  ready in 901 ms

  ➜  Local:   http://127.0.0.1:4000/
  ➜  Network: use --host to expose

三、总结

至此windicss的安装就结束了，这个工具我也是第一次接触文章里就不献丑了

初识Windi Css

一、初识windicss

二、安装使用

三、总结