Bun Bundler: Tailwind CSS

[itsezc]

What is the problem this feature would solve?

With Tailwind v4, Bun should be able to bundle and build TailwindCSS, similar to how Vite handles it

What is the feature you are proposing to solve the problem?

TailwindCSS build plugin (ideally built-in) to Bun

What alternatives have you considered?

No response

[huseeiin]

bun build is a low level bundler. its not intended to handle tasks like that.

[codehz]

I just created a npm package (https://www.npmjs.com/package/bun-tailwindcss , only for v4) for that, use macro to collect class (so we don't need to re-scan file...)

it looks ugly at initially, but I think this is more suitable for bun

[effektsvk]

Seems like it was added :)

https://bun.sh/docs/bundler/fullstack#using-tailwindcss-in-html-routes

[johnpyp]

Where does this plugin even exist? I can't find bun-plugin-tailwind anywhere on the internet other than the mention in the docs!

[effektsvk]

@johnpyp It will be released in the v1.2, at least according to https://x.com/jarredsumner/status/1881792754528969039

[johnpyp]

Right, and 1.2 was just released. Probably will be released later today though, makes sense.

[qodesmith]

I've upgraded to Bun 1.2 and I have no idea how to use bun-plugin-tailwind. I created a bunfig.toml like below:

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

...but get a not found error:

error: Cannot find package 'bun-plugin-tailwind' from ''

[krstffr]

I've upgraded to Bun 1.2 and I have no idea how to use bun-plugin-tailwind. I created a bunfig.toml like below:

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

...but get a not found error:

error: Cannot find package 'bun-plugin-tailwind' from ''

Yeah, I just tried this as well and got the same error.

[kravetsone]

I've upgraded to Bun 1.2 and I have no idea how to use bun-plugin-tailwind. I created a bunfig.toml like below:

[serve.static]
plugins = ["bun-plugin-tailwind"]
...but get a not found error:

error: Cannot find package 'bun-plugin-tailwind' from ''

u need install it

it just npm package

[kravetsone]

http://npmjs.com/package/bun-plugin-tailwind

[qodesmith]

I swear I searched npm earlier and nothing came up for that package. Maybe it wasn't indexed yet.

[krstffr]

I swear I searched npm earlier and nothing came up for that package. Maybe it wasn't indexed yet.

Yeah, same experience!
Works now though 👍

[RiskyMH]

Yeah its very new (like last few days), there is another one with similar name that does show up, but its way older and is doing different things.

Also with how popular the keywords tailwind and bun are, it may be hard lol.

[shiny]

Maybe the documentation needs more details; I have no idea what a Bun plugin is without this topic.

[tony13tv]

I was searching the source code for the plugin. The package.json states that it should be located in:

{
  "url": "https://github.com/tailwindlabs/tailwindcss.git",
  "directory": "packages/@tailwindcss-bun-plugin"
}

but browsing through the repo, no signs of that package. It was published to npmjs.com by pure magic.

[RiskyMH]

It appears that right now the plugin lives in a fork: https://github.com/zackradisic/tailwindcss/tree/next/packages/%40tailwindcss-bun-plugin

[johnpyp]

The bun plugin also appears to bundle tailwind binaries raw with itself...

Keeping a plugin like that in a fork of a critical lib that may or may not be up to date any given point does not seem great from a supply chain security perspective, as well as just being in a different github rather than the main Bun org.

It would be nice to have better formalized practices around this stuff, this is very... scrappy. I love that for a small project just ramping up, but Bun is in use by many companies now, 75k stars on github, etc... I'm expecting more.

[Jarred-Sumner]

@johnpyp it's temporary, the intent is to upstream a PR to Tailwind with the native code changes

[johnpyp]

Gotcha, that sounds great!

Do you think Bun will get betas at some point or release candidates to sort out this kind of thing ahead of time? Or delaying the feature if it isn't quite ready for prime time?

It's hard to imagine a project like Node shipping a highly impactful release like this without this kind of thing sorted up front.

I know Bun is in a different stage of growth, but it's clear that it's getting the adoption warranting a higher level of care before cutting a stable release.

Ultimately this is a minor case, but I'd personally love to see release process maturity more akin to Node (or similar projects) to build confidence :) it still feels a bit like the pre-1.0 days in that area, from the outside looking in.

[codegod100]

Related: I can pull in the plugin and I see the browser download the tailwind css but it's not actually styling my elements. Not sure what to do

[tony13tv]

It appears that right now the plugin lives in a fork: https://github.com/zackradisic/tailwindcss/tree/next/packages/%40tailwindcss-bun-plugin

Nice research skills.

[tony13tv]

Related: I can pull in the plugin and I see the browser download the tailwind css but it's not actually styling my elements. Not sure what to do

Are you using the following link tag?

<link rel="stylesheet" href="tailwindcss">

Right now it is not working as intended, instead create a style.css file and use the following code in it and link it to the html file.

@import "tailwindcss";

[Jarred-Sumner]

Related: I can pull in the plugin and I see the browser download the tailwind css but it's not actually styling my elements. Not sure what to do

Are you using the following link tag?

Right now it is not working as intended, instead create a style.css file and use the following code in it and link it to the html file.

@import "tailwindcss";

@zackradisic fixed this in the current version of bun-plugin-tailwind

[meenie]

For anyone wondering why <link rel="stylesheet" href="tailwindcss"> is still not working, I don't believe the latest version has been published yet.

[WaveringAna]

re-upping that its still broken with 0.0.14
https://github.com/WaveringAna/bunsite/tree/test

[vjpr]

tailwindlabs/tailwindcss#16295

[nzoschke]

bun-plugin-tailwind was working for me with bun 1.2.3, and is no longer with 1.2.4.

[ansarizafar]

I also confirm that bun-plugin-tailwind is not working with .svelte and .vue now. It was working previously.

[leetcow]

guys if I use bun build to bundle my react project, how do I use the tailwind plugin?

if I create a build file and run bun run build.ts instead, there is no --watch equivalent, which is a deal breaker

[ismoiliy98]

guys if I use bun build to bundle my react project, how do I use the tailwind plugin?

if I create a build file and run bun run build.ts instead, there is no --watch equivalent, which is a deal breaker

I created a custom build script to bundle with Bun while supporting watch mode:

import { type FSWatcher, watch } from 'node:fs';
import { $, build } from 'bun';
// TODO: Enable when stable
// import bunPluginTailwind from 'bun-plugin-tailwind';
import pkg from '../package.json';

class Builder {
  private watcher?: FSWatcher;

  constructor(private readonly externals: string[]) {}

  async build(dev = false) {
    const startTick = performance.now();

    const [result] = await Promise.all([
      build({
        entrypoints: ['src/index.ts' /* 'src/styles.css' */],
        outdir: 'dist',
        external: this.externals,
        sourcemap: dev ? 'inline' : 'none',
        minify: !dev,
        splitting: true,
        // plugins: [bunPluginTailwind],
      }),
      $`tailwindcss -i ./src/styles.css -o ./dist/styles.css`,
    ]);

    if (!result.success) {
      console.error('❌ Build failed:', result.logs);
      if (!dev) process.exit(1);
      return;
    }

    console.info('📦 Built in', +(performance.now() - startTick).toFixed(2), 'ms');
  }

  async watch() {
    if (this.watcher) return;

    this.watcher = watch('src', { recursive: true }, async (_, filename) => {
      if (filename) {
        console.info(`📝 File changed: ${filename}`);
        await this.build(true);
      }
    });

    await this.build(true);
    console.info('👀 Watching for file changes...');
  }

  async close() {
    this.watcher?.close();
  }
}

async function bootstrap() {
  const deps = Object.keys({ ...pkg.peerDependencies });
  const builder = new Builder(deps);
  const isWatchMode = process.argv.includes('-w') || process.argv.includes('--watch');

  if (!isWatchMode) return builder.build();

  process.on('SIGTERM', () => builder.close()).on('SIGINT', () => builder.close());
  await builder.watch();
}

bootstrap().catch((error) => {
  console.error('❌ Unexpected error:', error);
  process.exit(1);
});

Why this approach?

• Tailwind plugin issue: bun-plugin-tailwind currently uses an outdated Tailwind version (4.0.0-beta9) and does not strip unused CSS variables properly.
• Alternative solution: Instead of relying on the plugin, I use the Tailwind CLI (tailwindcss -i ./src/styles.css -o ./dist/styles.css) to process styles.
• Watch mode support: Pass -w or --watch to enable file watching, allowing automatic rebuilds on file changes.

This setup works well for now, but once the Tailwind plugin is stable, it can be re-enabled.

[leetcow]

is anyone able to set up heroUI with bun? it breaks for me and I've tried all different ways to bundle - not sure if something is wrong with my setup or if it's a bun bug

I've tried tailwind with the cli instead of the bun plugin, but the issue seems to be with importing the heroUI provider root component

[leetcow]

@ismoiliy98 if you're running tailwind through the CLI you shouldn't need a bun build script right? you should be able to use the bun build command with --watch

something like bun build --watch src/index.html & tailwindcss -i ./src/styles.css -o ./build/styles.css

[nzoschke]

Thanks for this blazing fast plugin.

I did a bit more debugging of this with bun 1.2.8, bun-plugin-tailwind 0.0.15 and bun-plugin-svelte 0.0.5

While it's working great for .html files, it's not working for me for .svelte files that are otherwise working with the bun svelte plugin.

index.html

<!DOCTYPE html>
<html data-theme="silk">
  <head>
    <link rel="stylesheet" href="./index.css" />
    <script src="./index.ts" type="module"></script>
  </head>

  <body>
    <div class="text-red-200">red text</div>
  </body>
</html>

index.ts

import { mount } from "svelte";
import Component from "./Component.svelte";

const target = document.createElement("span");
document.body.appendChild(target);

mount(Component, {
  target,
});

Component.svelte

<script lang="ts">
  let color = "green";
</script>

<div class="text-green-200">should be {color} text</div>

I have a hunch it's related to finding candidates. In the plugin I added this debugging

        let rawCandidates = $twctxToJs(external);
        console.log(rawCandidates)

And I see that it is scanning index.html but not Component.svelte

{
    id: ".../index.html",
    candidates: [
      "ts", "!DOCTYPE", "data-theme", "stylesheet", "class", "src", "type", "link", "head", "red", "rel",
      "module", "body", "css", "index", "script", "div", "title", "text-red-200", "href", "html",
      "text"
    ],
  }

[ArtDmn]

While it's working great for .html files, it's not working for me for .svelte files that are otherwise working with the bun svelte plugin.

Same, I can't get Svelte + Tailwind to work with Bun. If anyone has a solution, that would be great !

[ArtDmn]

Any workaround found for this? Still actively needs a solution 🥲

[marcospgp]

I think if the bun team wants to make it a top contender for go-to web bundler they need to support latest tailwind and get into the short list of installation guides on their docs

currently using tailwind with bun is a tough fight, with a zero-documentation "bun tailwind plugin", with the only reasonable option being using the tailwind CLI in tandem with bun

while tricky to setup, it does tend to work - until I tried to use heroUI though

so testing against most popular tailwind UI libraries would be a good bonus step I think

[ArtDmn]

@marcospgp There is this PR to improve the doc about tailwind plugin: #18631
Hopefully it will help you to setup a clean project (if it doesn't imply svelte at this time). I don't know about heroUI, so cannot help you on that.

[marcospgp]

it seems that the bun tailwind plugin now supports tailwind v4?

[kravetsone]

it seems that the bun tailwind plugin now supports tailwind v4?

always