「这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战」。
前言
Tailwind CSS是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来。
基本使用
使用 Tailwind，通过直接在 HTML 中应用预先存在的类来设置元素的样式。
控制布局
可以使用
👉 flexbox : flex 容器，如flex
👉 padding ：元素内边距，如p-10，px-4
👉 margin：元素外边距，如m-10，mx-4
👉 ...
等功能类控制布局
<div class="flex">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
</div>
设置宽高
使用
👉 width ：元素宽度
👉 height ：元素高度
👉 ...
等功能类来大小，如以下的 w-12 ，h-12
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
设置外观
使用
👉 background color ：元素背景色，如bg-white
👉 border radius：边框圆角，如rounded-sm，rounded-full
👉 box-shadow ：盒阴影，如shadow-sm，shadow-inner
👉 ...
等功能类来设置外观样式
<div class=" bg-white rounded-xl shadow-md ">
测试背景颜色、圆角、阴影
</div>
文字样式
使用
👉 font size：制元素的字体大小，使用 text-{size}
👉 text color：控制元素的文字颜色，使用 text-{color} ，
👉 font-weight ：控制字体粗细，使用 font-{weight}
👉 ...
等功能类来设置文字样式
<div class="text-xl text-black font-medium ">
测试 字体、样式、粗细
</div>
进阶使用
响应设计
要添加一个仅在特定断点生效的功能类，只需要在功能类前加上断点名称，后面跟 : 字符。如
<img class="w-16 md:w-32 lg:w-48" src="...">
md:w-32表示：当前设备是pc端（screen宽度大于768px）
md、lg等是官方定义好的（这个断点也可以自己定义 👉 查看）
响应式设计 👉 查看更多
关于windicss
可以把 Windi CSS 看作是按需供应的 Tailwind 替代方案，它提供更快的加载体验，完美兼容 Tailwind v2.0，并且拥有很多额外的酷炫功能。
Windi CSS 支持 Tailwind CSS 的所有 工具类，无需任何额外配置。
Windi CSS 与 Tailwind CSS 的 v2 完全兼容。在此基础上，额外新增了一些特性👉【查看】
参考资料：
🎨【点赞】【关注】不迷路，更多前端干货等你解锁
往期推荐
👉 Vite基础入门
