3

I am a intermediate level web dev.

I recently heard of BunJS, and now playing around with it. I am working on NextJS with bun and trying to install Tailwind CSS on it, but seems like Tailwind CSS does not have official instrauction for NextJS powered by bun.

I thought it would be as same as how I install NextJS powered by Node, but looks like it is different from that. I get error whenever I start the app on command line; it tells me to go chack official document, but the doc is taliking about react app rather than next app. The both file structures are very different, so I honestly have no idea what to do to make Tailwind work on NextJS + Bun.sh

If someone knows how to fix this issue, please let me know, thanks for help in advance!

Terminal ↓

[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
juliomalves
  • 42,130
  • 20
  • 150
  • 146
kawa
  • 207
  • 1
  • 7

2 Answers2

1

Basically, your project folder does not have a tailwind.config.js file. So, the compiler is looking for the @tailwind directive within globals.css which, of course, doesn't exist. To generate the tailwind.config.js file, first add the tailwindcss package to your project: bun add -d tailwindcss

Then initialize tailwind css like this bun run tailwindcss init

This should add the file to your project. Now, if you use the @tailwind, it should work

tirupats
  • 158
  • 1
  • 10
  • Thanks for reply. Unfortunately, I still have the same message. I even made whole project form scratch, and got the same error saying: `use the Tailwind CLI and import the processed .css ...` do you make it work for your own project? if so, can you show us your inputs on terminal step by step? – kawa Aug 17 '22 at 09:36
1

Running through the tailwind cli docs with bun and nextjs will result in an error like

Specified input file ./src/input.css does not exist.

Instead, point tailwind to the styles/globals.css like:

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

Then, update your _app.tsx file:

Replace import "../styles/globals.css";

with import "../dist/output.css";

and Bob's your uncle (although underlines with text-3x1 are looking a bit wonky)

DoctorEw
  • 11
  • 3