diff --git a/packages/docs/src/routes/(ecosystem)/ecosystem.css b/packages/docs/src/routes/(ecosystem)/ecosystem.css
index aa04bc8eb70..8f10fbfc0eb 100644
--- a/packages/docs/src/routes/(ecosystem)/ecosystem.css
+++ b/packages/docs/src/routes/(ecosystem)/ecosystem.css
@@ -252,3 +252,8 @@
 [data-theme='dark'] [alt='Twitter'] {
   filter: invert(1);
 }
+
+.custom-grid-cols-240px-1fr-tailwind-workaround {
+  /* temporary workaround .grid-cols-\[240px\,1fr\] is not currently working in tailwind */
+  grid-template-columns: 240px 1fr;
+}
diff --git a/packages/docs/src/routes/(ecosystem)/ecosystem/index.tsx b/packages/docs/src/routes/(ecosystem)/ecosystem/index.tsx
index cc2a0a5351b..1d67a6e9d28 100644
--- a/packages/docs/src/routes/(ecosystem)/ecosystem/index.tsx
+++ b/packages/docs/src/routes/(ecosystem)/ecosystem/index.tsx
@@ -23,7 +23,7 @@ export default component$(() => {
 
   return (
     <>
-      <div class="ecosystem lg:grid grid-cols-[240px,1fr] m-auto max-w-screen-xl gap-8">
+      <div class="ecosystem lg:grid grid-cols-[240px,1fr] m-auto max-w-screen-xl gap-8 custom-grid-cols-240px-1fr-tailwind-workaround">
         <EcosystemMenu />
         <MobileEcosystemMenu />