Help getting Remix+Vite working with Tailwind when using bun and Cloudflare Pages

[ryan0x44]

I've tried to follow the official docs and during dev I can see my tailwind styles successfully applied, however I'm getting Error: [remix] dest already exists. per the following build output:

bun run build
$ remix vite:build
vite v5.1.3 building for production...
transforming (39) node_modules/cookie/index.js
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
✓ 82 modules transformed.
build/client/.vite/manifest.json                0.95 kB │ gzip:  0.32 kB
build/client/assets/tailwind-Ci9HFj96.css       4.37 kB │ gzip:  1.34 kB
build/client/assets/_index-CS0oEcM-.js          0.60 kB │ gzip:  0.34 kB
build/client/assets/root-BQHM9nUS.js            1.48 kB │ gzip:  0.88 kB
build/client/assets/entry.client-DcS1Z8G2.js   14.14 kB │ gzip:  4.92 kB
build/client/assets/components-Bw_S0XI-.js    224.43 kB │ gzip: 72.30 kB
✓ built in 1.17s
vite v5.1.3 building SSR bundle for production...
✓ 7 modules transformed.
build/server/.vite/manifest.json           0.30 kB
build/server/assets/tailwind-Ci9HFj96.css  4.37 kB
build/server/index.js                      5.73 kB
x Build failed in 39ms
Error: [remix] dest already exists.
    at /home/ryan/remix-vite-tailwind/node_modules/fs-extra/lib/move/move.js:51:31
    at /home/ryan/remix-vite-tailwind/node_modules/universalify/index.js:21:38 {
  code: 'PLUGIN_ERROR',
  plugin: 'remix',
  hook: 'writeBundle'
}
error: script "build" exited with code 1

I've uploaded my code to https://github.com/ryan0x44/remix-vite-tailwind, but here's a summary:

• bunx create-remix@latest --template remix-run/remix/templates/vite-cloudflare
• bun install -D tailwindcss
• bunx tailwindcss init --ts
• app/root.tsx add:

  import type { LinksFunction } from "@remix-run/cloudflare";
  
  import styles from "./tailwind.css?url";
  
  export const links: LinksFunction = () => [
    { rel: "stylesheet", href: styles },
  ];
  

  per https://remix.run/docs/en/main/styling/tailwind and https://remix.run/docs/en/main/future/vite#fix-up-css-imports-referenced-in-links
• Create app/tailwind.css with:

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

• Change content in tailwind.config.ts to:

  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  

• Create postcss.config.mjs per https://remix.run/docs/en/main/future/vite:

  export default {
    plugins: {
      tailwindcss: {},
    },
  };
  

Any help would be appreciated.

[ryan0x44]

Thanks to https://discord.com/channels/770287896669978684/1166826036873396254/1166851708392046733 and https://github.com/mvacha/remix-vite/blob/main/app/root.tsx I found this was an easy fix by removing:

import type { LinksFunction } from "@remix-run/cloudflare";

import styles from "./tailwind.css?url";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
];

with

import "./tailwind.css";

in my app/root.tsx file.

[artemis-prime]

Would someone please explain the difference and why this works?