fix(nx-dev): dynamic classes not allowed (#20800)

docs/shared/getting-started/intro.md

@@ -21,7 +21,7 @@ npx create-nx-workspace@latest
 
 ## Learn Nx
 
-{% cards cols="2" lgCols="6" mdCols="4" smCols="2" %}
+{% cards cols="2" lgCols="4" mdCols="4" smCols="2" %}
 
 {% link-card title="Nx in 10 minutes!" type="video" url="https://youtu.be/-_4WMl-Fn0w" icon="nx" /%}
 
@@ -33,7 +33,7 @@ npx create-nx-workspace@latest
 
 {% /cards %}
 
-{% cards cols="2" lgCols="6" mdCols="5" smCols="2" %}
+{% cards cols="2" lgCols="5" mdCols="5" smCols="2" %}
 
 {% link-card title="Package Based Monorepos" type="tutorial" url="/getting-started/tutorials/package-based-repo-tutorial" icon="jsMono" /%}
 

nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx

@@ -9,6 +9,47 @@ import { frameworkIcons } from '../icons';
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { ReactNode } from 'react';
 
+const colsClasses: Record<number, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-4',
+  5: 'grid-cols-5',
+  6: 'grid-cols-6',
+  7: 'grid-cols-7',
+  8: 'grid-cols-8',
+};
+const smColsClasses: Record<number, string> = {
+  1: 'sm:grid-cols-1',
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-3',
+  4: 'sm:grid-cols-4',
+  5: 'sm:grid-cols-5',
+  6: 'sm:grid-cols-6',
+  7: 'sm:grid-cols-7',
+  8: 'sm:grid-cols-8',
+};
+const mdColsClasses: Record<number, string> = {
+  1: 'md:grid-cols-1',
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+  5: 'md:grid-cols-5',
+  6: 'md:grid-cols-6',
+  7: 'md:grid-cols-7',
+  8: 'md:grid-cols-8',
+};
+const lgColsClasses: Record<number, string> = {
+  1: 'lg:grid-cols-1',
+  2: 'lg:grid-cols-2',
+  3: 'lg:grid-cols-3',
+  4: 'lg:grid-cols-4',
+  5: 'lg:grid-cols-5',
+  6: 'lg:grid-cols-6',
+  7: 'lg:grid-cols-7',
+  8: 'lg:grid-cols-8',
+};
+
 export function Cards({
   cols = 2,
   smCols = 3,
@@ -31,10 +72,13 @@ export function Cards({
   // <div className="mt-8 grid grid-cols-2 lg:grid-cols-5 md:grid-cols-3 sm:grid-cols-2 gap-4">
   return (
     <div
-      className={`mt-8 grid gap-4 ${calcCols(cols, '')} ${calcCols(
-        smCols,
-        'sm'
-      )} ${calcCols(mdCols, 'md')} ${calcCols(lgCols, 'lg')}`}
+      className={cx(
+        'mt-8 grid gap-4',
+        colsClasses[cols] || '',
+        smColsClasses[smCols] || '',
+        mdColsClasses[mdCols] || '',
+        lgColsClasses[lgCols] || ''
+      )}
     >
       {children}
       {moreLink && (