不使用NextJS + bun.sh的顺风

Question

我是一个中级的网页开发。

我最近听说过BunJS，现在我在玩它。我正在用bun在NextJS上工作，并试图在其上安装尾风CSS，但似乎Tailwind并没有正式安装bun驱动的NextJS。

我以为这和我安装Node驱动的NextJS的方式一样，但看起来与此不同。每当我在命令行上启动该应用程序时，我都会出错；它告诉我要对正式文档进行修改，但文档只是在讨论react应用程序，而不是下一个应用程序。这两个文件结构非常不同，所以我真的不知道如何使Tailwind在NextJS + Bun.sh上工作。

如果有人知道如何解决这个问题，请让我知道，谢谢提前帮助！

终端↓

[0.07ms] "node_modules.bun" - 58 modules, 6 packages
[2.00ms] bun!! v0.1.6


  Link: http://localhost:3000


[0.04ms] "node_modules.server.bun" - 50 modules, 6 packages
[41.51ms] Next.js ready! (powered by bun)
[57.22ms] / - 2 transpiled, 4 imports


warn: To use Tailwind with bun, use the Tailwind CLI and import the processed .css file.
Learn more: https://tailwindcss.com/docs/installation#watching-for-changes
@tailwind base;
^
/home/kawa/Personal_Project/next-app/styles/globals.css:1:1 0

Answer 1

基本上，您的项目文件夹没有tailwind.config.js文件。因此，编译器正在寻找globals.css中的@横向指令，该指令当然不存在。要生成tailwind.config.js文件，首先要向您的项目添加尾风包：bun add -d tailwindcss

然后像这个bun run tailwindcss init一样初始化顺风css

这应该会将文件添加到项目中。现在，如果你使用“顺风”，它应该能工作

Answer 2

使用bun和nextjs运行顺风cli文档将导致一个错误，如

指定的输入文件./src/input.css不存在。

相反，将顺风指向样式/globals.css，如：

npx tailwindcss -i ./styles/globals.css -o ./dist/output.css --watch

然后，更新您的_app.tsx文件：

替换import“./styles/globals.css”；

“./dist/output.css”；

和鲍勃的叔叔(虽然文字下划线-3x1看起来有点摇摇欲坠)