Windi CSS Vite

特點

• ?? 速度快 - 比 Vite 上的 Tailwind 快 20~100 倍
• 按需 CSS 實用程序（與 Tailwind CSS v2 完全兼容）
• 按需原生元素樣式重置（預(yù)檢）
• 模塊熱更換 (HMR)
• 從 tailwind.config.js 加載配置
• 與框架無關(guān)——Vue、React、Svelte 和 vanilla！
• CSS @apply / @screen 指令轉(zhuǎn)換（也適用于 Vue SFC 的 <style>）
• 支持變體組——例如bg-gray-200 懸停：（bg-gray-100 text-red-300）
• “在 Devtools 中設(shè)計”——如果您在傳統(tǒng)的 Tailwind 中以這種方式工作，我們沒有理由做不到！

查看 Vite 上 Windi CSS 和 Tailwind CSS 的速度比較。

安裝

安裝包：

npm i -D vite-plugin-windicss windicss

然后，在你的 Vite 配置中安裝插件：

?vite.config.js?

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

最后，在您的 Vite 條目中導(dǎo)入 virtual:windi.css：

?main.js?

import 'virtual:windi.css' 

這就是了! 開始在你的應(yīng)用程序中使用類工具或CSS指令，并享受其速度吧 ??

如果您要從 Tailwind CSS 遷移，請查看遷移部分

支持

TypeScript

為您的 windi.config.js 啟用 TypeScript？當(dāng)然，為什么不呢？

將其重命名為 windi.config.ts 一切正常！

?windi.config.ts?

import { defineConfig } from 'windicss/helpers'
import formsPlugin from 'windicss/plugin/forms'

export default defineConfig({
  darkMode: 'class',
  safelist: 'p-3 p-4 p-5',
  theme: {
    extend: {
      colors: {
        teal: {
          100: '#096',
        },
      },
    },
  },
  plugins: [formsPlugin],
})

Pug 支持

當(dāng)在工作區(qū)中找到依賴項 pug 時，它將自動啟用 Pug 對 .pug 和 Vue SFC 的支持。

“在 DevTools 中設(shè)計”

當(dāng)您使用基于清除的 Tailwind 時，這可能是一種常見的做法，您在瀏覽器中擁有所有類，您可以通過直接更改 DevTools 中的類來嘗試工作方式。雖然您可能認(rèn)為這是某種“按需”限制，其中 DevTools 不知道您尚未在源代碼中使用的那些。

但不幸的是，我們是來打破限制的 請參閱視頻演示。

只需將以下行添加到您的主要條目

import 'virtual:windi-devtools' 

它將自動為您啟用，玩得開心！

哦，不要擔(dān)心最終的包，在生產(chǎn)構(gòu)建 virtual:windi-devtools 將是一個空模塊，你不需要做任何事情

?? 請謹(jǐn)慎使用，在后臺我們使用 MutationObserver 來檢測類更改。這意味著不僅您的手動更改而且您的腳本所做的更改都將被檢測并包含在樣式表中。在使用動態(tài)構(gòu)造的類（誤報）時，這可能會導(dǎo)致開發(fā)和生產(chǎn)構(gòu)建之間出現(xiàn)一些偏差。如果可能，我們建議將您的動態(tài)部件添加到安全列表或為您的生產(chǎn)構(gòu)建設(shè)置 UI 回歸測試。

配置

預(yù)檢（樣式重置）

預(yù)檢是按需啟用的。如果你想完全禁用它，你可以配置如下

?windi.config.ts?

import { defineConfig } from 'vite-plugin-windicss'

export default defineConfig({
  preflight: false,
})

安全列表

默認(rèn)情況下，我們會靜態(tài)掃描您的源代碼并找到實用程序的所有用法，然后按需生成相應(yīng)的 CSS。但是，存在一些限制，即無法有效匹配在運(yùn)行時決定的實用程序，例如

<!-- will not be detected -->
<div className={`p-${size}`}>

為此，您需要在 windi.config.ts 的安全列表選項中指定可能的組合。

?windi.config.ts?

import { defineConfig } from 'vite-plugin-windicss'

export default defineConfig({
  safelist: 'p-1 p-2 p-3 p-4',
})

或者你可以這樣做

?windi.config.ts?

import { defineConfig } from 'vite-plugin-windicss'

function range(size, startAt = 1) {
  return Array.from(Array(size).keys()).map(i => i + startAt)
}

export default defineConfig({
  safelist: [
    range(3).map(i => `p-${i}`), // p-1 to p-3
    range(10).map(i => `mt-${i}`), // mt-1 to mt-10
  ],
})

掃描

在服務(wù)器啟動時，vite-plugin-windicss 將掃描您的源代碼并提取實用程序用法。默認(rèn)情況下，僅包含 src/ 下擴(kuò)展名為 vue、html、mdx、pug、jsx、tsx 的文件。如果要啟用掃描其他文件類型的位置，可以通過以下方式配置：

?windi.config.js?

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ['src/**/*.{vue,html,jsx,tsx}'],
    exclude: ['node_modules', '.git'],
  },
})

或者在插件選項中：

?vite.config.js?

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    WindiCSS({
      scan: {
        dirs: ['.'], // all files in the cwd
        fileExtensions: ['vue', 'js', 'ts'], // also enabled scanning for js/ts
      },
    }),
  ],
})

歸因模式

啟用它

?windi.config.ts?

export default {
  attributify: true,
}

并根據(jù)需要使用它們：

<button
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

前綴

如果您擔(dān)心命名沖突，可以通過以下方式為屬性模式添加自定義前綴：

?windi.config.ts?

export default {
  attributify: {
    prefix: 'w:',
  },
}

<button
  w:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  w:text="sm white"
  w:font="mono light"
  w:p="y-2 x-4"
  w:border="2 rounded blue-200"
>
  Button
</button>

別名配置

請注意，別名條目在使用時需要以 * 為前綴，例如：

<div class="*hstack">

有關(guān)快捷方式和別名之間的區(qū)別，請參閱此發(fā)布帖子。

?windi.config.ts?

export default {
  alias: {
    'hstack': 'flex items-center',
    'vstack': 'flex flex-col',
    'icon': 'w-6 h-6 fill-current',
    'app': 'text-red',
    'app-border': 'border-gray-200 dark:border-dark-300',
  },
}

Layers Ordering

Supported from v0.14.x

默認(rèn)情況下，導(dǎo)入 virtual:windi.css 將導(dǎo)入所有三層，順序為基礎(chǔ) - 組件 - 實用程序。如果您想更好地控制訂單，可以通過以下方式將它們分開：

- import 'virtual:windi.css'
+ import 'virtual:windi-base.css'
+ import 'virtual:windi-components.css'
+ import 'virtual:windi-utilities.css'

您還可以讓您的自定義 CSS 能夠被某些層覆蓋：

  import 'virtual:windi-base.css'
  import 'virtual:windi-components.css'
+ import './my-style.css'
  import 'virtual:windi-utilities.css'

更多

有關(guān)更多配置參考，請參閱 options.ts。

注意事項

Scoped Style

您需要設(shè)置 transformCSS: 'pre' 才能使 Scoped Style 正常工作。

具有范圍樣式的@media 指令只能與 css postcss scss 一起使用，但不能與 sass、less 或 stylus 一起使用

例子

請參閱 react、vue 和 vue 示例以及 pug 示例項目或 Vitesse

SvelteKit (as of 1.0.0-next.102)

使用 ?npm i -D vite-plugin-windicss? 安裝插件并調(diào)整 svelte 配置：

import preprocess from 'svelte-preprocess'
+ import WindiCSS from 'vite-plugin-windicss'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess(),

  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
+   vite: {
+     plugins: [
+       WindiCSS(),
+     ],
+   },
  },
};

export default config

將 ?import "virtual:windi.css"? 添加到 __layout.svelte 文件的頂部：

?__layout.svelte?

<script>
  import "virtual:windi.css"

  // if you want to enable windi devtools
  import { browser } from "$app/env";
  if (browser) import("virtual:windi-devtools")
  // ...
</script>
<!-- ...rest of __layout.svelte -->