how to use tailwind with bun

Question

I'm creating a react app using bun.sh.

But I also use tailwindcss for styling and tailwind has no official solution for bun. How can use these two together?

I know bun is not ready for production but I'm still looking for a solution if its possible.

Cubiform

Answer 1

You can run a javascript file (or a package.json script or a bin file) with using bun run followed by the library name.

In your case, 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 tailwind.config.js file to your project.

Insurmountable

Answer 2

To use Tailwind with bun, use the Tailwind CLI and import the processed .css file. Learn more: https://tailwindcss.com/docs/installation

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

or

bun tailwindcss -i ./src/input.css -o ./dist/output.css --watch
bun run tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Use that output.css in your main file and done!

Acceleration

in cra, it is compiled automatically, is that possible with bun without any effort? – Cubiform

@TayfunErbilen with a plugin, yes. – Debtor

Answer 3

use CLI instation methode using npx or npm it

https://tailwindcss.com/docs/installation

Duala

Answer 4

You can probably add this Bun plugin:

import type { BunPlugin } from 'bun';
import postcss from 'postcss';
import tailwindcss from '@tailwindcss/postcss';

const styleFilter = /.\.(css)$/;

export const cssPlugin: BunPlugin = {
  name: 'CSS Loader',
  setup(build) {
    build.onLoad({ filter: styleFilter }, async (args) => {
      const css = await Bun.file(args.path).text();
      const result = await postcss([tailwindcss]).process(css, { from: args.path });

      return {
        contents: result.css,
        loader: 'text',
      };
    });
  },
};

However, it uses postcss.

Marionmarionette