Fix Remix Tailwind runtime matrix build

Author: Ali-dev11

CHANGELOG.md

@@ -23,6 +23,7 @@ The format follows Keep a Changelog and the version numbers follow Semantic Vers
 ### Fixed
 
 - Fixed Remix scaffolds to include the CLI/dev dependencies required for `npm run dev`, `pnpm run dev`, `yarn dev`, and `bun run dev` style workflows.
+- Fixed Tailwind-enabled Remix scaffolds to use the Vite Tailwind integration path instead of the PostCSS-only setup, which resolves the Bun production-build failure in the runtime matrix.
 - Fixed strict ESLint scaffolds so typed rules no longer run against config files such as `eslint.config.js`.
 - Stopped offering invalid combinations such as microfrontend architecture outside the microfrontend intent, NestJS with JavaScript, RTK Query without compatible Redux state, and ORMs when no database is selected.
 

docs/changelog.md

@@ -26,6 +26,7 @@ Track what changed in DevForge CLI across releases, including scaffolding behavi
 ### Fixed
 
 - Fixed Remix scaffolds to include the CLI/dev dependencies required for `npm run dev`, `pnpm run dev`, `yarn dev`, and `bun run dev` style workflows.
+- Fixed Tailwind-enabled Remix scaffolds to use the Vite Tailwind integration path instead of the PostCSS-only setup, which resolves the Bun production-build failure in the runtime matrix.
 - Fixed strict ESLint scaffolds so typed rules no longer run against config files such as `eslint.config.js`.
 - Stopped offering invalid combinations such as microfrontend architecture outside the microfrontend intent, NestJS with JavaScript, RTK Query without compatible Redux state, and ORMs when no database is selected.
 

src/templates.ts

@@ -890,7 +890,7 @@ function collectDependencies(plan: ProjectPlan): {
     }
 
     if (plan.frontend.styling === "tailwind-css") {
-      if (["react-vite", "vue-vite", "svelte", "solidjs"].includes(plan.frontend.framework)) {
+      if (["react-vite", "vue-vite", "svelte", "solidjs", "remix"].includes(plan.frontend.framework)) {
         addRecord(devDependencies, {
           "@tailwindcss/vite": "latest",
           tailwindcss: "latest",
@@ -1485,7 +1485,7 @@ function tailwindSupportFiles(plan: ProjectPlan): GeneratedFile[] {
     return [];
   }
 
-  if (["react-vite", "vue-vite", "svelte", "solidjs"].includes(plan.frontend.framework)) {
+  if (["react-vite", "vue-vite", "svelte", "solidjs", "remix"].includes(plan.frontend.framework)) {
     return [];
   }
 
@@ -2190,6 +2190,7 @@ function remixSource(plan: ProjectPlan, context?: FrontendSurfaceContext): Gener
   const surface = frontendSurfaceDetails(plan, context);
   const stylesheetPath =
     plan.frontend?.styling === "scss" ? "./styles.scss?url" : "./styles.css?url";
+  const pluginLines = ["remix()", "tsconfigPaths()", ...(plan.frontend?.styling === "tailwind-css" ? ["tailwindcss()"] : [])];
   return [
     makeFile(
       "app/root.tsx",
@@ -2296,9 +2297,10 @@ function remixSource(plan: ProjectPlan, context?: FrontendSurfaceContext): Gener
         'import { vitePlugin as remix } from "@remix-run/dev";',
         'import { defineConfig } from "vite";',
         'import tsconfigPaths from "vite-tsconfig-paths";',
+        ...viteTailwindPluginImportLines(plan),
         "",
         "export default defineConfig({",
-        "  plugins: [remix(), tsconfigPaths()],",
+        vitePluginExpression(pluginLines),
         "});",
         "",
       ].join("\n"),

test/generator.test.ts

@@ -283,6 +283,7 @@ test("remix bun scaffolds include runtime guidance, CLI dependencies, and typed-
   const viteConfigFile = files.find((file) => file.path === "vite.config.ts");
   const entryClientFile = files.find((file) => file.path === "app/entry.client.tsx");
   const entryServerFile = files.find((file) => file.path === "app/entry.server.tsx");
+  const postcssConfigFile = files.find((file) => file.path === "postcss.config.mjs");
 
   assert.ok(packageJsonFile);
   assert.ok(readmeFile);
@@ -292,6 +293,7 @@ test("remix bun scaffolds include runtime guidance, CLI dependencies, and typed-
   assert.ok(viteConfigFile);
   assert.ok(entryClientFile);
   assert.ok(entryServerFile);
+  assert.equal(postcssConfigFile, undefined);
 
   const packageJson = JSON.parse(packageJsonFile.content) as {
     scripts: Record<string, string>;
@@ -306,8 +308,12 @@ test("remix bun scaffolds include runtime guidance, CLI dependencies, and typed-
   assert.equal(packageJson.devDependencies["@remix-run/dev"], "latest");
   assert.equal(packageJson.devDependencies.vite, "latest");
   assert.equal(packageJson.devDependencies["vite-tsconfig-paths"], "latest");
+  assert.equal(packageJson.devDependencies["@tailwindcss/vite"], "latest");
+  assert.equal(packageJson.devDependencies["@tailwindcss/postcss"], undefined);
   assert.equal(packageJson.dependencies["@remix-run/react"], "latest");
   assert.match(viteConfigFile.content, /vitePlugin as remix/);
+  assert.match(viteConfigFile.content, /@tailwindcss\/vite/);
+  assert.match(viteConfigFile.content, /plugins: \[remix\(\), tsconfigPaths\(\), tailwindcss\(\)\]/);
   assert.match(eslintConfigFile.content, /\*\*\/\*\.\{ts,tsx,mts,cts\}/);
   assert.match(eslintConfigFile.content, /projectService: true/);
   assert.match(eslintConfigFile.content, /\*\*\/\*\.\{js,mjs,cjs\}/);