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>

重要前缀

在任何实用程序类前加上 !将它们设置为！重要。

<div class="text-red-400 !text-green-300">Green</div>

捷径

快速组合实用程序以创建可重用的组件。

​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>

实时语言

<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;
}

视觉分析仪

我们为您提供了一个可视化分析器，以概述您的实用程序使用情况和设计系统。