Windi CSS Vite
特点
- ⚡️ 速度快 - 比 Vite 上的 Tailwind 快 20~100 倍
- 按需 CSS 实用程序（与 Tailwind CSS v2 完全兼容）
- 按需原生元素样式重置（预检）
- 模块热更换 (HMR)
- 从 tailwind.config.js 加载配置
- 与框架无关——Vue、React、Svelte 和 vanilla！
- CSS @apply / @screen 指令转换（也适用于 Vue SFC 的 <style>）
- 支持变体组——例如bg-gray-200 悬停：（bg-gray-100 text-red-300）
- “在 Devtools 中设计”——如果您在传统的 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 条目中导入 virtual:windi.css：
main.js
import 'virtual:windi.css' 这就是了! 开始在你的应用程序中使用类工具或CSS指令，并享受其速度吧 ⚡️
如果您要从 Tailwind CSS 迁移，请查看迁移部分
支持
TypeScript
为您的 windi.config.js 启用 TypeScript？当然，为什么不呢？
将其重命名为 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 支持
当在工作区中找到依赖项 pug 时，它将自动启用 Pug 对 .pug 和 Vue SFC 的支持。
“在 DevTools 中设计”
当您使用基于清除的 Tailwind 时，这可能是一种常见的做法，您在浏览器中拥有所有类，您可以通过直接更改 DevTools 中的类来尝试工作方式。虽然您可能认为这是某种“按需”限制，其中 DevTools 不知道您尚未在源代码中使用的那些。
但不幸的是，我们是来打破限制的 请参阅视频演示。
只需将以下行添加到您的主要条目
import 'virtual:windi-devtools' 它将自动为您启用，玩得开心！
哦，不要担心最终的包，在生产构建 virtual:windi-devtools 将是一个空模块，你不需要做任何事情
⚠️ 请谨慎使用，在后台我们使用 MutationObserver 来检测类更改。这意味着不仅您的手动更改而且您的脚本所做的更改都将被检测并包含在样式表中。在使用动态构造的类（误报）时，这可能会导致开发和生产构建之间出现一些偏差。如果可能，我们建议将您的动态部件添加到安全列表或为您的生产构建设置 UI 回归测试。
配置
预检（样式重置）
预检是按需启用的。如果你想完全禁用它，你可以配置如下
windi.config.ts
import { defineConfig } from 'vite-plugin-windicss'
export default defineConfig({
preflight: false,
})
安全列表
默认情况下，我们会静态扫描您的源代码并找到实用程序的所有用法，然后按需生成相应的 CSS。但是，存在一些限制，即无法有效匹配在运行时决定的实用程序，例如
<!-- 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
],
})
扫描
在服务器启动时，vite-plugin-windicss 将扫描您的源代码并提取实用程序用法。默认情况下，仅包含 src/ 下扩展名为 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,
}
并根据需要使用它们：
<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>
前缀
如果您担心命名冲突，可以通过以下方式为属性模式添加自定义前缀：
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">
有关快捷方式和别名之间的区别，请参阅此发布帖子。
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
默认情况下，导入 virtual:windi.css 将导入所有三层，顺序为基础 - 组件 - 实用程序。如果您想更好地控制订单，可以通过以下方式将它们分开：
- 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'
更多
有关更多配置参考，请参阅 options.ts。
注意事项
Scoped Style
您需要设置 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 安装插件并调整 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 -->
更多建议：