@aphrody/bun-plugin-尾风
Bun 的尾风 CSS v4, 打开 @tailwindcss/node 和有节点的氧化物扫描仪:
Bun.build插头,Bun.serveHTML 导入和bun ./index.htmldev 服务器( 有热重装) ,- 同一引擎上的 PostCSS 插件 (
@aphrody/bun-plugin-tailwind/postcss用于涡轮包装、网络包装和Vite, - a 材料3预设(
theme: "m3"从@aphrody/m3-tokens财务报告和审定财务报表@aphrody/m3-tailwind。 。 。 .
bun add -d @aphrody/bun-plugin-tailwind
tailwindcss 本身不需要安装 : @import "tailwindcss" 从项目中解析,然后
从插件本身的依赖性.
Bun. 建设
import tailwind from "@aphrody/bun-plugin-tailwind";
await Bun.build({
entrypoints: ["./index.html"],
outdir: "./dist",
plugins: [tailwind],
});
/* style.css */
@import "tailwindcss";
使用 Tailwind 特性的任何样式表都会编译 : @import "tailwindcss", (中文(简体) ), @source (包括 not 财务报告和审定财务报表
inline(…), (中文(简体) ), @plugin, (中文(简体) ), @config (Tailwind v3 JavaScript configs), (简体中文), @theme, (中文(简体) ), @utility, (中文(简体) ), @variant, (中文(简体) ),
@custom-variant, (中文(简体) ), @apply, (中文(简体) ), @reference 财务报告和审定财务报表 theme()其他样式表留给 Bun .
班级候选人来自两个地方:
- Tailwind 的自动源代码检测
root(或工作目录),荣誉.gitignore,加上每个@source。 。 。 . - 每个文件的构建负载(JavaScript, TypeScript, HTML, Vue, Svelte, Astro, MDX, .), 所以分类为 a
gi或
node_modules应用程序导入的组件也找到 .
Dev 服务器
# bunfig.toml
[serve.static]
plugins = ["@aphrody/bun-plugin-tailwind"]
bun ./index.html
相同的设置适用于服务于 HTML 的导入 Bun.serve({ routes: { "/": html } })在发展过程中,编辑a
源文件重建样式表并热重装; 编辑样式表、 a @plugin 或一个 @config 文件
重编该根.
选项
import { tailwind } from "@aphrody/bun-plugin-tailwind";
tailwind({
base: import.meta.dir, // automatic source detection root (default: build root, else cwd)
sources: ["../ui/src/**/*.tsx", "!**/*.test.tsx"], // extra sources, `!` excludes
optimize: true, // Lightning CSS pass (`optimize` of @tailwindcss/node); `{ minify: false }` to keep it readable
minify: true, // shorthand for `optimize: { minify: true }`
sourcemap: true, // inline source map to the original stylesheets
moduleGraph: { exclude: /node_modules/ }, // or `false` to scan only the sources
theme: "m3", // Material 3 preset, see below
schemeImport: id => sheets[id], // CSS of `@import "m3:theme.css"`-style imports, compiled with the root
});
Bun.build({ minify: true }) 已修改 CSS Bun 输出; optimize 用于插件本身的输出(用于
以 PostCSS 插件为例. sourcemap 默认为建筑 sourcemap 选项:
Bun.build({ sourcemap: "linked" }) (或 "external", (中文(简体) ), "inline"),邦用自己的图作"Tailwind",所以CSS
在您的样式表和Tailwind的地图点.
一个 @import 用于另一个插件方案@import "m3:theme.css";继续导入捆绑者通过
插件,所以Tailwind 从来没有看到它的内容。 当内容保持 @theme, (中文(简体) ), @utility 或者说 @apply,通过
schemeImport(id, importer): 它返回的 CSS 在编译前替换每个无条件的导入( 重复 ,
周期是错误; undefined 继续输入.
PostCSS(带涡轮包装或网络包装的下部js,维特)
// postcss.config.mjs
export default {
plugins: {
"@aphrody/bun-plugin-tailwind/postcss": {},
},
};
它的选项与 Bun 插件相同(但 moduleGraph),报告其读取的文件和目录
邮政 dependency 编号 : dir-dependency 消息,所以主机在变化中重建,并链接其源地图. 有用吗
在节点js下dist/,ES模块和CommonJS).
在下一个Js应用程序中, @aphrody/next-bun 使用 Bun 插件构建时 Bun.build (单位:千美元)withBun)和涡轮包装
使用 PostCSS 插件.
材料3
tailwind({ theme: "m3" });
tailwind({
theme: { seed: "#0b57d0", variant: "vibrant", contrastLevel: 0.5 },
});
tailwind({ theme: { seed: false } }); // colours set at runtime (applyDynamicColor, <m3-theme>, M3Html)
theme 添加,紧接着 @import "tailwindcss",由Aphrody M3出版的床单:
| 选项 | 工作表 | 给 |
|---|---|---|
tokens | @aphrody/m3-tokens/m3-tokens.css | --md-sys-* 运动、高地、状态、形状符号 |
expressive | @aphrody/m3-tokens/expressive.css | M3 外形和弹簧 |
preset | @aphrody/m3-tailwind/preset.css | bg-primary, (中文(简体) ), text-body-large, (中文(简体) ), rounded-large, (中文(简体) ), shadow-elevation-2,, , , , , , , , |
seed | 生成 | 第49条 --md-sys-color-* 轻而易举的角色和黑暗.dark操作员, .light(中文(简体) ) |
每个默认值继续;种子默认值为 M3 基线 #6750A4。 。 。 . @aphrody/bun-plugin-tailwind/m3 出口
m3SchemeCss(seed, options) 财务报告和审定财务报表 m3Prelude(theme) 用于其他工具.
API 密码
@aphrody/bun-plugin-tailwind/core 出口 TailwindRoot,引擎两个插件都使用:
import { TailwindRoot } from "@aphrody/bun-plugin-tailwind/core";
const root = new TailwindRoot("src/style.css", process.cwd(), {
sourcemap: true,
});
const { css, map, dependencies, globs, scannedFiles } = await root.generate(
await Bun.file("src/style.css").text(),
);
当样式表、导入样式表、 a 插件或配置已更改 .
比较 bun-plugin-tailwind
所有的东西 bun-plugin-tailwind 由 Tailwind Labs 发布的软件包
候选者,在变化上重建,dev服务器),外加:命名为有选项的工厂, sources, (中文(简体) ), moduleGraph 控制,
闪电CSS optimize编号 :minify,源地图,仅使用根 @theme编号 :@variant, (中文(简体) ), tailwindcss 已解决
在不安装的情况下, PostCSS 插件和一个普通JS/Node.js 构建,以及材料 3 预设. 它利用公众
@tailwindcss/oxide 软件包,而不是捆绑的本地加通,所以它运行在 Oxide 有预建二进制的地方 .
测试
bun test test/integration/bun-plugin-tailwind/