bun 和 tailwind 结合开发 – dev798

bun 和 tailwind 结合开发

2025-2-19 23:05

|

31

|

0

|

171 字

|

3 分钟

tailwind 官方文档并没有详细介绍单纯的 html 中引入 tailwind 怎么编译输出的问题。提供的框架集成基本用的都 vite 方式编译，再添加 tailwind 插件来导出最终的 css 文件。可惜我搞了半天没有搞好，不想使用 react 或者 vue。

安装 bun

npm install -g bun
bun upgrade --canary

touch index.html

index.html

<html>
  <body>
    Hello world
  </body>
</html>

bun index.html

使用 Tailwind CSS

bun init -y
bun add -D bun-plugin-tailwind

touch bunfig.toml style.css

bunfig.toml

[serve.static]
plugins = ["bun-plugin-tailwind"]

style.css

@import "tailwindcss";

index.html

<head>
  <link rel="stylesheet" type="text/css" href="./style.css" />
</head>

<body class="bg-slate-600 flex items-center justify-center">
  <div class="text-3xl font-bold text-lime-400">
    This is tailwind styled text
  </div>
</body>

构建

touch build.ts

build.ts

import BunPluginTailwind from "bun-plugin-tailwind"

await Bun.build({
  entrypoints: ["index.html"],
  outdir: "dist",
  plugins: [BunPluginTailwind]
})

bun run build.ts

bunx serve dist

参考

暂无评论

发送评论编辑评论

Markdown

|´・ω・)ノ

ヾ(≧∇≦*)ゝ

(☆ω☆)

（╯‵□′）╯︵┴─┴

￣﹃￣

(/ω＼)

∠( ᐛ 」∠)＿

(๑•̀ㅁ•́ฅ)

→_→

୧(๑•̀⌄•́๑)૭

٩(ˊᗜˋ*)و

(ノ°ο°)ノ

(´இ皿இ｀)

⌇●﹏●⌇

(ฅ´ω`ฅ)

(╯°A°)╯︵○○○

φ(￣∇￣o)

ヾ(´･･｀｡)ノ"

( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃

(ó﹏ò｡)

Σ(っ °Д °;)っ

( ,,´･ω･)ﾉ"(´っω･｀｡)

╮(╯▽╰)╭

o(*////▽////*)q

＞﹏＜

( ๑´•ω•) "(ㆆᴗㆆ)

颜文字

Emoji

小恐龙

花!