这是我参与「第五届青训营 」伴学笔记创作活动的第 五 天
1. 安装 npm install windicss -D
2. 在 package.json 文件中的 script 字段，我们新增如下字段：
"scripts": {
"windicss:help": "windicss --help",
"windicss:init": "windicss --init . --compile",
"windicss:build": "windicss ./index.html -to windi-acss.css"
},
3. 初始化命令：npm run windicss:init
项目根目录将会新增三个文件：
├── index.html 新增的
├── index.windi.html 新增的
├── package.json
└── windi.css 新增的
4. 在index.html中 <link rel="stylesheet" href="windi.css">改为windi.css => windi-acss.css
5. 运行：npm run windicss:build
这个命令会根据 HTML 的类名生成对应的 CSS
├── index.html
├── index.windi.html
├── package.json
├── windi-acss.css 新增的
└── windi.css
6. 运行html，能正常显示
7. 增加热更新
"scripts": {
"windicss:watch": "windicss ./src/index.html -dto ./src/windi-acss.css"
},
windicss:watch 命令添加了 -d 参数，开启开发环境下的热更新功能
调整目录结构为：
8. 使用windi
bg-gray-100代表background-color为一个较浅的灰色。flex代表设置了display:flex布局。justify-center代表justify-content:center，定义了项目在主轴上的对齐方式为居中对齐。items-center代表align-items:center，定义项目在交叉轴上的对齐方式为居中对齐。min-h-screen代表min-height: 100vh;元素最小高度为100vh。text-pink-600代表文本颜色为深粉色。text-5xl代表字体大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WindiCSS-study</title>
<link rel="stylesheet" href="windi-acss.css">
</head>
<body class="bg-gray-100">
<section class="flex justify-center items-center min-h-screen text-pink-600 text-5xl">Hello WindiCSS!</section>
</body>
</html>
npm run windicss:watch后再运行html文件。
实现效果如下：
1. 案例
接下来我们简单实战一下：实现一个带有hover效果的按钮效果。
w-40 h-10创建一个宽40px，高10px的超链接。bg-green-500代表background-color为一个较深的绿色。inline-block这个很重要，由于<a>标签是一个行内标签，宽高效果需要先将<a>标签变为行内块元素才能生效。text-center代表文本居中。text-white代表文本颜色为白色。loading-10代表行高为10，即2.5rem。rounded-2xl代表圆角边框。hover:bg-green-200代表鼠标悬浮时，background-color变为一个较浅的绿色。
<!-- 1.用长宽 -->
<a href="" class="w-40 h-10 bg-green-500 inline-block
text-center text-white loading-10 rounded-2xl hover:bg-green-200">提交</a>
也可以用内边距构造。
px-8``padding在x轴上的距离，以px为单位。py-1``padding在y轴上的距离，以px为单位。
<!-- 2.用内边距 -->
<a href="" class="px-8 py-1 bg-green-500 inline-block
text-center text-white rounded-2xl hover:bg-green-200">提交1</a>
实现效果如下：
案例2
下面例子实现了仿苹果的页面。
下部的4个div能够在大屏时一行4个排列，中屏是一行2个排列，小屏时竖向排列
<div class="container mx-auto my-4">
<img src="https://www.apple.com.cn/v/macbook-pro-14-and-16/d/images/overview/hero/hero_intro__cww8m2vra4uq_large.jpg" alt="" class="rounded-2xl" />
<div class="my-8 overflow-hidden rounded-2xl border shadow-lg sm:flex sm:flex-wrap">
<div class="group border-b p-6 hover:bg-gray-800 sm:w-1/2 sm:border-r md:w-1/4 md:border-b-0">
<h2 class="text-xl font-bold mb-2 group-hover:text-white">行走的突破力</h2>
<p class="text-gray-500 group-hover:text-white">有了 M2 Pro 或 M2 Max 芯片的强势驱动，MacBook Pro 的动力和能效再创巅峰。无论是接电源还是用电池，它都同样火力全开，而且电池续航还更持久。炫目的 Liquid 视网膜 XDR 屏，和你常用的一众强大端口，也都集结完毕。一款卓尔不凡的专业级笔记本电脑</p>
</div>
<div class="group border-b p-6 hover:bg-gray-800 sm:w-1/2 md:w-1/4 md:border-r md:border-b-0">
<h2 class="text-xl font-bold mb-2 group-hover:text-white">行走的突破力</h2>
<p class="text-gray-500 group-hover:text-white">有了 M2 Pro 或 M2 Max 芯片的强势驱动，MacBook Pro 的动力和能效再创巅峰。无论是接电源还是用电池，它都同样火力全开，而且电池续航还更持久。炫目的 Liquid 视网膜 XDR 屏，和你常用的一众强大端口，也都集结完毕。一款卓尔不凡的专业级笔记本电脑</p>
</div>
<div class="group border-b p-6 hover:bg-gray-800 sm:w-1/2 sm:border-r sm:border-b-0 md:w-1/4">
<h2 class="text-xl font-bold mb-2 group-hover:text-white">行走的突破力</h2>
<p class="text-gray-500 group-hover:text-white">有了 M2 Pro 或 M2 Max 芯片的强势驱动，MacBook Pro 的动力和能效再创巅峰。无论是接电源还是用电池，它都同样火力全开，而且电池续航还更持久。炫目的 Liquid 视网膜 XDR 屏，和你常用的一众强大端口，也都集结完毕。一款卓尔不凡的专业级笔记本电脑</p>
</div>
<div class="group border-b p-6 hover:bg-gray-800 sm:w-1/2 md:w-1/4">
<h2 class="text-xl font-bold mb-2 group-hover:text-white">行走的突破力</h2>
<p class="text-gray-500 group-hover:text-white">有了 M2 Pro 或 M2 Max 芯片的强势驱动，MacBook Pro 的动力和能效再创巅峰。无论是接电源还是用电池，它都同样火力全开，而且电池续航还更持久。炫目的 Liquid 视网膜 XDR 屏，和你常用的一众强大端口，也都集结完毕。一款卓尔不凡的专业级笔记本电脑</p>
</div>
</div>
</div>
实现效果：
- 大屏
-中屏
- 小屏
