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>

捷徑

快速組合實用程序以創(chuàng)建可重用的組件。

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

視覺分析儀

我們?yōu)槟峁┝艘粋€可視化分析器，以概述您的實用程序使用情況和設計系統。