Windicss基本用法介绍

Windicss-基本用法及介绍

windicss，下一代工具类CSS框架，[Windicss官网](Home | Windi CSS)

简单的用法案例展示

<div class="flex items-center justify-around bg-teal-100 rounded-md p-4px w-200px">
  <div class="w-[25%] h-12 bg-red-400 rounded-md m-4px"></div>
  <div class="w-[25%] h-12 bg-green-400 rounded-md m-4px"></div>
  <div class="w-[25%] h-12 bg-blue-400 rounded-md m-4px"></div>
</div>

Windicss-自动推导式

windicss 提供了自动推导功能，可以在类中使用任意符合格式的值，然后生成相应的css样式，用起来非常的灵活方便。

例如：

• w-200px可以自动解析为 width: 200px;
• w-[25%] 可以自动解析为 width: 25%;
• h-200px可以自动解析为 height: 200px;

Windicss-Import 前缀

在windicss中想要使用带有important属性的css样式非常的简单，只需要在任意工具类的前面加上!前缀，即可使此工具类变为!important ，就可以覆盖之前的样式中的熟悉了。

例如：

给w-200px 添加 ! 前缀为 !w-200px 即可解析为 width: 200px !important;

响应式设计

再Windicss中内置了sm、md、lg、xl、2xl尺寸的媒体查询，可以轻松的实现响应式设计。

只需将可变修饰的前缀加到对应的工具类前。

例如：

md:w-full lg: w-[80%]

名称	默认	带有<前缀	带有>前缀
sm	(min-width:640px)	(max-width:639.9px)	(min-width:640px) and (max-width:639.9px)
md	(min-width:768px)	(max-width:767.9px)	(min-width:768px) and (max-width:767.9px)
lg	(min-width:1024px)	(max-width:1023.9px)	(min-width:1024px) and (max-width:1023.9px)
xl	(min-width:1280px)	(max-width:1279.9px)	(min-width:1280px) and (max-width:1279.9px)
2xl	(min-width:1536px)	(max-width:1535.9px)	(min-width:1536px) and (max-width:1535.9px)