diff --git a/.changeset/orange-hoops-matter.md b/.changeset/orange-hoops-matter.md
new file mode 100644
index 0000000000..7632915f23
--- /dev/null
+++ b/.changeset/orange-hoops-matter.md
@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Fixed CSS module class name collisions when running multiple versions of packages simultaneously by using content-based hashing for class name generation.
diff --git a/packages/cli/src/modules/build/lib/builder/config.ts b/packages/cli/src/modules/build/lib/builder/config.ts
index 3e360b645c..7776571e43 100644
--- a/packages/cli/src/modules/build/lib/builder/config.ts
+++ b/packages/cli/src/modules/build/lib/builder/config.ts
@@ -16,7 +16,9 @@
 
 import chalk from 'chalk';
 import fs from 'fs-extra';
+import { createHash } from 'crypto';
 import {
+  basename,
   extname,
   relative as relativePath,
   resolve as resolvePath,
@@ -239,7 +241,18 @@ export async function makeRollupConfigs(
           include: /node_modules/,
           exclude: [/\/[^/]+\.(?:stories|test)\.[^/]+$/],
         }),
-        postcss(),
+        postcss({
+          modules: {
+            generateScopedName(name: string, filename: string, css: string) {
+              const hash = createHash('md5')
+                .update(css)
+                .digest('hex')
+                .slice(0, 10);
+              const file = basename(filename, '.module.css');
+              return `${file}_${name}__${hash}`;
+            },
+          },
+        }),
         forwardFileImports({
           exclude: /\.icon\.svg$/,
           include: [