# @birdycom/omniacss-migrate 中文文档 规范地址：https://npmcn.com/package/%40birdycom/omniacss-migrate/ 版本：0\.14\.3 npm 元数据更新时间：2026-11-05T08:43:28.785Z 中文译文更新时间：2026-11-08T03:37:44.784Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40birdycom/omniacss-migrate 原文对照：https://npmcn.com/package/%40birdycom/omniacss-migrate/?lang=original 项目主页：https://omniacss.eu/ 源码仓库：https://github.com/Birdycom/OmniaCSS ## 关键信息（来自 npm 元数据） - 包体积（解压后）：255 kB，29 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - Node.js 要求：\>=22 - 运行依赖：2 个 - 首次发布：2026-10-27T16:54:03.739Z - 最新版本发布：2026-11-05T08:43:28.431Z - 近 30 天下载量：2892（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：16（近 12 个月 16 个） ## 中文简介 从 Tailwind CSS 切换一个 Laravel / Vue / React 工程到 OmniaCSS 并保留您的类名( PostCSS + Vite 插件, 扫描, 设置, 编码), 或者将一个 Bootstrap 3/4/5 站点转换为 OmniaCSS + OmniaUI . ## 安装 ```sh npm install @birdycom/omniacss-migrate ``` 也可以使用：`pnpm add @birdycom/omniacss-migrate`、`yarn add @birdycom/omniacss-migrate`、`bun add @birdycom/omniacss-migrate` ## README # @birtycom/omniacs-migrate (英语) 切换 a **Laravel, Vue 或反应** 从 Tailwind CSS 到 OmniaCSS 的项目 **并保留您的类名**。 。 。 . `flex items-center gap-4 p-4 md:p-8 bg-white dark:bg-gray-900 hover:bg-red-500/50 w-[37px]` 继续工作:这些课程按要求解决,并作为只使用OmniaCSS令牌(OKLCH中的Omnia调色板, `rem` 天平,奥姆尼亚阴影和断点). 来自 **诱饵3、4或5**看到了吗 [从靴子](https://npmcn.com/package/%40birdycom/omniacss-migrate/#readme-from-bootstrap)。 。 。 . > 这是唯一一个给Tailwind和Bootstrap命名的软件包,因为它是一个迁移工具. ## 三步内拉拉维尔 ```bash # 1. see what changes (dry run, nothing is written) and how much of your markup is covered npx @birdycom/omniacss-migrate scan . npx @birdycom/omniacss-migrate setup . # 2. apply the switch: removes the Tailwind packages from package.json, swaps the Vite/PostCSS plugin, carries your theme into CSS npx @birdycom/omniacss-migrate setup . --write npm uninstall tailwindcss @tailwindcss/vite @tailwindcss/postcss && npm install -D @birdycom/omniacss-migrate # 3. build as usual npm run dev ``` 你的"刀锋","Vue"和"React"文件保持原样. 用手做两个编辑: ```js // vite.config.js import omniaMigrate from "@birdycom/omniacss-migrate/vite"; // was: import tailwindcss from "@tailwindcss/vite" export default defineConfig({ plugins: [laravel({ input: ["resources/css/app.css", "resources/js/app.js"] }), omniaMigrate()] }); ``` ```css /* resources/css/app.css: the entry, under our own name (setup --write renames @import "tailwindcss" to it): */ @import "@birdycom/omniacss-migrate"; /* the Tailwind forms keep working too: */ @import "tailwindcss"; @tailwind base; @tailwind components; @tailwind utilities; ``` 不使用维特? 使用 PostCSS 插件代替 : ```js // postcss.config.js import omniaMigrate from "@birdycom/omniacss-migrate/postcss"; export default { plugins: [omniaMigrate({ content: ["resources/views/**/*.blade.php", "resources/js/**/*.{vue,tsx,jsx,js}"] })] }; ``` ## 插件会做什么 - 替换 `@import "@birdycom/omniacss-migrate"` 编号 : `@import "tailwindcss"` 编号 : `@tailwind base|components|utilities` 与 Omnia 核心(tokens + 您使用的 Omnia 类) , 一个小基重置, 以及您在内容中找到的类的兼容 CSS . - 扩展 `@apply` (带有变体, `!important`还有你们自己的班级, `theme(colors.red.500)`, (中文(简体) ), `--spacing(4)`, (中文(简体) ), `@theme`, (中文(简体) ), `@custom-variant`, (中文(简体) ), `@variant`, (中文(简体) ), `@source`, (中文(简体) ), `@source inline("…")`; 忽略 `@plugin` 财务报告和审定财务报表 `@config`。 。 。 . - 读取 `tailwind.config.{js,cjs,mjs}` (单位:千美元)`darkMode`, (中文(简体) ), `theme.colors`编号 :`extend.colors`, (中文(简体) ), `fontFamily`, (中文(简体) ), `borderRadius`, (中文(简体) ), `spacing`, (中文(简体) ), `boxShadow`, (中文(简体) ), `screens`, (中文(简体) ), `container`, (中文(简体) ), `prefix`, (中文(简体) ), `important`还有你 `@theme` 块. - 输出以级联层包裹 `omnia, theme, base, components, utilities`: Omnia 重置和符号最低; Omnia 类(例如代码所写的)和 Tailwind 风格的名称一起在 `utilities`,排序 Tailwind 方式(基类之后的变量,长手之前的短手,类优先具有更多的属性). 所以,奥姆尼亚级击败 每一个重置和你自己 `@layer components`,在同级赛中胜败 `class` 和代码之前一样. 类别覆盖面:布局、弹性/网格、间隔、尺寸、打字、颜色(文字、bg、边框、环、轮廓、填充、中风、分音、口音、护身、装饰、梯度) `from-`编号 :`via-`编号 :`to-`),边框,半径,阴影,环,不透明,滤波器和背景滤波器,过渡,动画,变形,显示,位置,z-index,溢出,光标,滚动坐标, `tailwindcss-animate` 类,任意值(`w-[37px]`, (中文(简体) ), `bg-(--brand)`, (中文(简体) ), `[mask-type:luminance]`),不透明度修改器(`bg-red-500/50`),负数(`-mt-2`, (中文(简体) ), `!important`变量 `hover: focus: active: disabled: first: odd: before: after: placeholder: file: marker: selection:`, (中文(简体) ), `sm: md: lg: xl: 2xl: max-md: min-[…]:`, (中文(简体) ), `@md:` 集装箱查询, `dark:`, (中文(简体) ), `group-*`, (中文(简体) ), `peer-*`, (中文(简体) ), `data-[…]:`, (中文(简体) ), `aria-*:`, (中文(简体) ), `has-[…]:`, (中文(简体) ), `not-*`, (中文(简体) ), `in-*`, (中文(简体) ), `supports-[…]:`, (中文(简体) ), `*:`,任意变体 `[&>svg]:`, (中文(简体) ), `motion-safe:`, (中文(简体) ), `print:`, (中文(简体) ), `rtl:`。 。 。 . ### 颜色 尾风调色板名称映射到 **最近的奥姆尼亚调色板符号** (单位:千美元)`src/data/colors.json`,生成于 `scripts/build-color-map.mjs` 与 `nearestOmnia()`: `bg-red-500` 变成 `var(--color-red-50)`. 任意颜色`bg-[#0041a7]`)也被映射到最近的符号(`arbitraryColors: "keep"` 保持字迹。 使用不透明修饰器 `color-mix(in oklab, 50%, transparent)`。 。 。 . 颜色来自 `tailwind.config` 被映射到奥姆尼亚地标上`--keep-brand-colors` 编号 : `keepBrandColors` ; 值为 `var(...)`编号 :`hsl(var(...))` (shadcn风格) 保持你写的. ### 缩放 间距、尺寸、字体大小、半径、模糊和容器使用熟悉的数字(`p-4` =: `1rem`) (中文(简体) ). 阴影重用奥姆尼亚自己的阴影值. 断点跟随OmniaCSS(`sm` -36雷姆 -对, `md` 50雷姆(50雷姆), `lg` 64雷姆语; `xl` 80雷姆和 `2xl` 96rem 为相容性存在). 使用 `breakpoints: "tailwind"` 中文无改动. 两个系统中都存在的名称(`p-4`, (中文(简体) ), `flex`, (中文(简体) ), `shadow-md` .) 永不相撞: 类相配层解脱出Omnia核心输出. ## 国 际 ```text omniacss-migrate scan coverage: % of class occurrences supported + the unsupported list omniacss-migrate setup [--write] plan (dry run) or apply: package.json, vite/postcss config, CSS @theme + dark mode omniacss-migrate codemod [--write] rewrite to native OmniaCSS class names where the CSS is identical omniacss-migrate build [-c glob] [-o file] write the CSS once (no Vite or PostCSS) omniacss-migrate css "md:hover:bg-red-500/50" print the CSS for one class ``` `omniacss migrate scan .` 通过主要的CLI(`npm i -D @birdycom/omniacss-migrate`) (中文(简体) ). `setup` 财务报告和审定财务报表 `codemod` 是干线,除非你通过 `--write`。先提交:文件已更改. ## 代码 (可选) `codemod` 重写 `class`编号 :`className`编号 :`cn()`编号 :`cva()` 字符串为 **本地语言** OmniaCSS 当一个 Omnia 类有完全相同的声明时命名( 例如) `items-center` 变成 `align-items-center`, (中文(简体) ), `p-4` 变成 `p-1`) (中文(简体) ). 其他一切皆为所出并列. 之后 `--write` 文件 `omniacss-migrate.manifest.json` 告诉比较图层 哪些名称是本地的, 所以 `p-1` (奥姆尼亚, `1rem`从来没有与旧混淆 `p-1` (单位:千美元)`0.25rem`) (中文(简体) ). 运行它在整个项目,不是一个文件夹。 测试和脚本`tests/`, (中文(简体) ), `scripts/`, (中文(简体) ), `*.test.*`, (中文(简体) ), `*.spec.*` (.)被跳过并列出,因为他们经常将类名作为数据;添加 `--include-tests` 来重写它们. ## 从靴子 ```bash npx @birdycom/omniacss-migrate bootstrap scan . # report only npx @birdycom/omniacss-migrate bootstrap codemod . --write # apply (commit first) npx omniacss build -o css/omnia.css # OmniaCSS for exactly the classes you use ``` HTML、PHP、Blade、Twig、ERB、Vue和JSX模板;类属性内的模板代码(``, (中文(简体) ), `{{ … }}`)是未触及的. - **公用事业** 在已安装的 OmniaCSS 构建中查阅: `mt-3` (1雷姆)变成 `mt-1`, (中文(简体) ), `d-md-none` 变成 `md:d-none`, (中文(简体) ), `justify-content-between` 变成 `justify-between`。主题颜色(`text-primary`, (中文(简体) ), `bg-dark`, (中文(简体) ), `border-danger`)地图到最近的奥姆尼亚地标. - **构成部分** 成为 OmniaUI 类 : `btn btn-primary` → `oc-btn`, (中文(简体) ), `alert alert-danger` → `oc-alert oc-alert--danger`, (中文(简体) ), `form-control` → `oc-input` (单位:千美元)`oc-select` 编号 `