Nuxtjs using Bun to Config Tailwind CSS

Tony Lu
1 min readSep 23, 2023

--

Bun represents a highly efficient, all-inclusive toolkit designed for accelerating the development of JavaScript and TypeScript applications. What sets Bun apart is its capacity to optimize the development workflow, providing unparalleled speed and efficiency. This is made achievable through Bun’s multifaceted nature, encompassing not only runtime capabilities but also serving as a package manager, bundler, and test runner.

When I start to use bun with tailwindcss, by install it using

bun install --save-dev @nuxtjs/tailwindcss

Then add a module in nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
modules:['tailwindcss']
})

then run with bun run dev, I encounter following error.

Cannot start nuxt:  Cannot find module '/Users/tony/projects/xxxx/@nuxtjs/tailwindcss'
Require stack:
- /Users/tony/projects/xxxx/index.js

Require stack:
- index.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1070:15)
at Function.resolve (node:internal/modules/helpers:127:19)
at Function._resolve [as resolve] (node_modules/jiti/dist/jiti.js:1:250334)
at resolveModule (node_modules/@nuxt/kit/dist/index.mjs:2239:29)
at requireModule (node_modules/@nuxt/kit/dist/index.mjs:2244:24)
at loadNuxtModuleInstance (node_modules/@nuxt/kit/dist/index.mjs:2459:90)
at async installModule (node_modules/@nuxt/kit/dist/index.mjs:2425:47)
at async initNuxt (node_modules/nuxt/dist/index.mjs:3563:7)
at async NuxtDevServer._load (node_modules/nuxi/dist/chunks/dev2.mjs:255:5)
at async NuxtDevServer.load (node_modules/nuxi/dist/chunks/dev2.mjs:187:7)

after spent some time to expore this issue and found we need to add to bun so that it can load the module to execution environment.

bun add tailwindcss

with this command you can find there is some change in the package.json.

"dependencies": {
"@nuxtjs/tailwindcss": "^6.8.0"
}
}

then you can enjoy the tailwindcss.

--

--