Windi CSS特性
Windi CSS 与 Tailwind CSS 的 v2 完全兼容。在此基础上，我们新增了许多额外的特性，进一步提升你的工作体验，并给于更多可能性。
自动值推导
在你的类名中使用任意值，然后生成相应的样式。
<!-- sizes and positions -->
<div class="p-5px mt-[0.3px]"></div>
<!-- colors -->
<button class="bg-hex-b2a8bb"></button>
<button class="bg-[hsl(211.7,81.9%,69.6%)]"></button>
<!-- grid template -->
<div class="grid-cols-[auto,1fr,30px]"></div>
可变修饰组
通过编组的方式可以将同样的可变修饰用在不同的工具类上。
<div class="bg-white dark:hover:(bg-gray-800 font-medium text-white)"/>
<div class="bg-white dark:hover:bg-gray-800 dark:hover:font-medium dark:hover:text-white"/>
响应式设计
拓展响应式断点控制。
<div class="p-1 md:p-2 <lg:p-3"></div>
Important 前缀
在任意工具类前加上 ! 前缀，可使它们变为 !important。
<div class="text-red-400 !text-green-300">Green</div>
Shortcuts
快速创建可复用的组件和工具类。
windi.config.js
export default {
theme: {
/* ... */
},
shortcuts: {
'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
'btn-green': 'text-white bg-green-500 hover:bg-green-700',
},
}
<div class="btn hover:btn-green"></div>
暗色模式
<div class="text-black dark:text-white"></div>
RTL
<div class="text-green-400 rtl:(text-red-400 text-right)"></div>
指令
完全兼容 Tailwind 风格的指令 @apply, @screen。
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 hover:bg-blue-700 text-white;
padding-top: 1rem;
}
可视化分析器
我们为你提供了可视化分析器，可以让你对工具类的使用情况和设计系统的有大致的了解。