diff --git a/scripts/frontend/lib/bootstrap_tailwind_equivalents.mjs b/scripts/frontend/lib/bootstrap_tailwind_equivalents.mjs
index 491d573425c091ff23cef1b61684ab90c739e0a6..2d6fc8b5c8e18e913d764edf09b4b8c732b11d66 100644
--- a/scripts/frontend/lib/bootstrap_tailwind_equivalents.mjs
+++ b/scripts/frontend/lib/bootstrap_tailwind_equivalents.mjs
@@ -4,21 +4,21 @@ export const BOOTSTRAP_MIGRATIONS = {
   'align-content-center': '!gl-content-center',
   'align-items-center': '!gl-items-center',
   'align-items-end': '!gl-items-end',
-  'align-items-lg-center': '@lg/panel:!gl-items-center',
-  'align-items-md-center': '@md/panel:!gl-items-center',
-  'align-items-md-stretch': '@md/panel:!gl-items-stretch',
-  'align-items-sm-center': '@sm/panel:!gl-items-center',
-  'align-items-sm-start': '@sm/panel:!gl-items-start',
+  'align-items-lg-center': 'lg:!gl-items-center @lg/panel:!gl-items-center',
+  'align-items-md-center': 'md:!gl-items-center @md/panel:!gl-items-center',
+  'align-items-md-stretch': 'md:!gl-items-stretch @md/panel:!gl-items-stretch',
+  'align-items-sm-center': 'sm:!gl-items-center @sm/panel:!gl-items-center',
+  'align-items-sm-start': 'sm:!gl-items-start @sm/panel:!gl-items-start',
   'align-items-start': '!gl-items-start',
   'align-items-stretch': '!gl-items-stretch',
-  'align-items-xl-center': '@xl/panel:!gl-items-center',
+  'align-items-xl-center': 'xl:!gl-items-center @xl/panel:!gl-items-center',
   'align-middle': '!gl-align-middle',
   'align-self-baseline': '!gl-self-baseline',
   'align-self-center': '!gl-self-center',
   'align-self-end': '!gl-self-end',
-  'align-self-md-auto': '@md/panel:!gl-self-auto',
-  'align-self-md-stretch': '@md/panel:!gl-self-stretch',
-  'align-self-sm-baseline': '@sm/panel:!gl-self-baseline',
+  'align-self-md-auto': 'md:!gl-self-auto @md/panel:!gl-self-auto',
+  'align-self-md-stretch': 'md:!gl-self-stretch @md/panel:!gl-self-stretch',
+  'align-self-sm-baseline': 'sm:!gl-self-baseline @sm/panel:!gl-self-baseline',
   'align-self-start': '!gl-self-start',
   'align-text-bottom': '!gl-align-text-bottom',
   'align-text-top': '!gl-align-text-top',
@@ -42,29 +42,29 @@ export const BOOTSTRAP_MIGRATIONS = {
   clearfix: 'gl-clearfix',
   'd-block': '!gl-block',
   'd-inline': '!gl-inline',
-  'd-md-table-cell': '@md/panel:!gl-table-cell',
-  'd-sm-block': '@sm/panel:!gl-block',
-  'd-sm-none': '@sm/panel:!gl-hidden',
-  'd-sm-table-cell': '@sm/panel:!gl-table-cell',
+  'd-md-table-cell': 'md:!gl-table-cell @md/panel:!gl-table-cell',
+  'd-sm-block': 'sm:!gl-block @sm/panel:!gl-block',
+  'd-sm-none': 'sm:!gl-hidden @sm/panel:!gl-hidden',
+  'd-sm-table-cell': 'sm:!gl-table-cell @sm/panel:!gl-table-cell',
   'd-table-cell': '!gl-table-cell',
-  'd-xl-table': '@xl/panel:!gl-table',
+  'd-xl-table': 'xl:!gl-table @xl/panel:!gl-table',
   'fixed-top': null,
   'flex-column': '!gl-flex-col',
   'flex-fill': '!gl-flex-auto',
   'flex-grow-0': '!gl-grow-0',
   'flex-grow-1': '!gl-grow',
-  'flex-lg-row': '@lg/panel:!gl-flex-row',
-  'flex-md-column': '@md/panel:!gl-flex-col',
-  'flex-md-row': '@md/panel:!gl-flex-row',
-  'flex-md-wrap': '@md/panel:!gl-flex-wrap',
+  'flex-lg-row': 'lg:!gl-flex-row @lg/panel:!gl-flex-row',
+  'flex-md-column': 'md:!gl-flex-col @md/panel:!gl-flex-col',
+  'flex-md-row': 'md:!gl-flex-row @md/panel:!gl-flex-row',
+  'flex-md-wrap': 'md:!gl-flex-wrap @md/panel:!gl-flex-wrap',
   'flex-row': '!gl-flex-row',
   'flex-row-reverse': '!gl-flex-row-reverse',
   'flex-shrink-0': '!gl-shrink-0',
   'flex-shrink-1': '!gl-shrink',
-  'flex-sm-row': '@sm/panel:!gl-flex-row',
+  'flex-sm-row': 'sm:!gl-flex-row @sm/panel:!gl-flex-row',
   'flex-wrap': '!gl-flex-wrap',
-  'flex-xl-grow-0': '@xl/panel:!gl-grow-0',
-  'flex-xl-nowrap': '@xl/panel:!gl-flex-nowrap',
+  'flex-xl-grow-0': 'xl:!gl-grow-0 @xl/panel:!gl-grow-0',
+  'flex-xl-nowrap': 'xl:!gl-flex-nowrap @xl/panel:!gl-flex-nowrap',
   'float-left': '!gl-float-left',
   'float-none': '!gl-float-none',
   'font-italic': '!gl-italic',
@@ -74,14 +74,14 @@ export const BOOTSTRAP_MIGRATIONS = {
   'justify-content-between': '!gl-justify-between',
   'justify-content-center': '!gl-justify-center',
   'justify-content-end': '!gl-justify-end',
-  'justify-content-lg-end': '@lg/panel:!gl-justify-end',
-  'justify-content-md-between': '@md/panel:!gl-justify-between',
-  'justify-content-md-start': '@md/panel:!gl-justify-start',
+  'justify-content-lg-end': 'lg:!gl-justify-end @lg/panel:!gl-justify-end',
+  'justify-content-md-between': 'md:!gl-justify-between @md/panel:!gl-justify-between',
+  'justify-content-md-start': 'md:!gl-justify-start @md/panel:!gl-justify-start',
   'm-0': '!gl-m-0',
   'm-1': '!gl-m-2',
   'm-3': '!gl-m-5',
   'm-auto': '!gl-m-auto',
-  'm-md-0': '@md/panel:!gl-m-0',
+  'm-md-0': 'md:!gl-m-0 @md/panel:!gl-m-0',
   'm-n5': '!-gl-m-9',
   'mb-0': '!gl-mb-0',
   'mb-1': '!gl-mb-2',
@@ -89,43 +89,43 @@ export const BOOTSTRAP_MIGRATIONS = {
   'mb-3': '!gl-mb-5',
   'mb-4': '!gl-mb-6',
   'mb-5': '!gl-mb-9',
-  'mb-md-0': '@md/panel:!gl-mb-0',
-  'mb-sm-3': '@sm/panel:!gl-mb-5',
-  'mb-xl-0': '@xl/panel:!gl-mb-0',
+  'mb-md-0': 'md:!gl-mb-0 @md/panel:!gl-mb-0',
+  'mb-sm-3': 'sm:!gl-mb-5 @sm/panel:!gl-mb-5',
+  'mb-xl-0': 'xl:!gl-mb-0 @xl/panel:!gl-mb-0',
   'ml-0': '!gl-ml-0',
   'ml-1': '!gl-ml-2',
   'ml-2': '!gl-ml-3',
   'ml-3': '!gl-ml-5',
   'ml-4': '!gl-ml-6',
   'ml-auto': '!gl-ml-auto',
-  'ml-lg-auto': '@lg/panel:!gl-ml-auto',
-  'ml-md-1': '@md/panel:!gl-ml-2',
-  'ml-md-2': '@md/panel:!gl-ml-3',
-  'ml-md-3': '@md/panel:!gl-ml-5',
-  'ml-sm-2': '@sm/panel:!gl-ml-3',
-  'ml-xl-0': '@xl/panel:!gl-ml-0',
+  'ml-lg-auto': 'lg:!gl-ml-auto @lg/panel:!gl-ml-auto',
+  'ml-md-1': 'md:!gl-ml-2 @md/panel:!gl-ml-2',
+  'ml-md-2': 'md:!gl-ml-3 @md/panel:!gl-ml-3',
+  'ml-md-3': 'md:!gl-ml-5 @md/panel:!gl-ml-5',
+  'ml-sm-2': 'sm:!gl-ml-3 @sm/panel:!gl-ml-3',
+  'ml-xl-0': 'xl:!gl-ml-0 @xl/panel:!gl-ml-0',
   'mr-0': '!gl-mr-0',
   'mr-1': '!gl-mr-2',
   'mr-2': '!gl-mr-3',
   'mr-3': '!gl-mr-5',
   'mr-5': '!gl-mr-9',
   'mr-auto': '!gl-mr-auto',
-  'mr-lg-3': '@lg/panel:!gl-mr-5',
-  'mr-md-0': '@md/panel:!gl-mr-0',
-  'mr-md-2': '@md/panel:!gl-mr-3',
-  'mr-sm-0': '@sm/panel:!gl-mr-0',
+  'mr-lg-3': 'lg:!gl-mr-5 @lg/panel:!gl-mr-5',
+  'mr-md-0': 'md:!gl-mr-0 @md/panel:!gl-mr-0',
+  'mr-md-2': 'md:!gl-mr-3 @md/panel:!gl-mr-3',
+  'mr-sm-0': 'sm:!gl-mr-0 @sm/panel:!gl-mr-0',
   'mt-0': '!gl-mt-0',
   'mt-1': '!gl-mt-2',
   'mt-2': '!gl-mt-3',
   'mt-3': '!gl-mt-5',
   'mt-4': '!gl-mt-6',
   'mt-5': '!gl-mt-9',
-  'mt-md-0': '@md/panel:!gl-mt-0',
-  'mt-md-3': '@md/panel:!gl-mt-5',
-  'mt-md-4': '@md/panel:!gl-mt-6',
-  'mt-sm-0': '@sm/panel:!gl-mt-0',
-  'mt-sm-4': '@sm/panel:!gl-mt-6',
-  'mt-xl-0': '@xl/panel:!gl-mt-0',
+  'mt-md-0': 'md:!gl-mt-0 @md/panel:!gl-mt-0',
+  'mt-md-3': 'md:!gl-mt-5 @md/panel:!gl-mt-5',
+  'mt-md-4': 'md:!gl-mt-6 @md/panel:!gl-mt-6',
+  'mt-sm-0': 'sm:!gl-mt-0 @sm/panel:!gl-mt-0',
+  'mt-sm-4': 'sm:!gl-mt-6 @sm/panel:!gl-mt-6',
+  'mt-xl-0': 'xl:!gl-mt-0 @xl/panel:!gl-mt-0',
   'mx-0': '!gl-mx-0',
   'mx-1': '!gl-mx-2',
   'mx-2': '!gl-mx-3',
@@ -137,7 +137,7 @@ export const BOOTSTRAP_MIGRATIONS = {
   'my-3': '!gl-my-5',
   'my-4': '!gl-my-6',
   'my-5': '!gl-my-9',
-  'my-sm-0': '@sm/panel:!gl-my-0',
+  'my-sm-0': 'sm:!gl-my-0 @sm/panel:!gl-my-0',
   'overflow-auto': '!gl-overflow-auto',
   'overflow-hidden': '!gl-overflow-hidden',
   'p-0': '!gl-p-0',
@@ -146,7 +146,7 @@ export const BOOTSTRAP_MIGRATIONS = {
   'p-3': '!gl-p-5',
   'p-4': '!gl-p-6',
   'p-5': '!gl-p-9',
-  'p-lg-0': '@lg/panel:!gl-p-0',
+  'p-lg-0': 'lg:!gl-p-0 @lg/panel:!gl-p-0',
   'pb-0': '!gl-pb-0',
   'pb-2': '!gl-pb-3',
   'pb-3': '!gl-pb-5',
@@ -154,9 +154,9 @@ export const BOOTSTRAP_MIGRATIONS = {
   'pl-2': '!gl-pl-3',
   'pl-3': '!gl-pl-5',
   'pl-5': '!gl-pl-9',
-  'pl-md-0': '@md/panel:!gl-pl-0',
-  'pl-sm-0': '@sm/panel:!gl-pl-0',
-  'pl-sm-3': '@sm/panel:!gl-pl-5',
+  'pl-md-0': 'md:!gl-pl-0 @md/panel:!gl-pl-0',
+  'pl-sm-0': 'sm:!gl-pl-0 @sm/panel:!gl-pl-0',
+  'pl-sm-3': 'sm:!gl-pl-5 @sm/panel:!gl-pl-5',
   'position-absolute': '!gl-absolute',
   'position-relative': '!gl-relative',
   'position-sticky': '!gl-sticky',
@@ -164,9 +164,9 @@ export const BOOTSTRAP_MIGRATIONS = {
   'pr-2': '!gl-pr-3',
   'pr-3': '!gl-pr-5',
   'pr-4': '!gl-pr-6',
-  'pr-md-0': '@md/panel:!gl-pr-0',
-  'pr-md-3': '@md/panel:!gl-pr-5',
-  'pr-md-5': '@md/panel:!gl-pr-9',
+  'pr-md-0': 'md:!gl-pr-0 @md/panel:!gl-pr-0',
+  'pr-md-3': 'md:!gl-pr-5 @md/panel:!gl-pr-5',
+  'pr-md-5': 'md:!gl-pr-9 @md/panel:!gl-pr-9',
   'pt-0': '!gl-pt-0',
   'pt-1': '!gl-pt-2',
   'pt-2': '!gl-pt-3',
@@ -182,8 +182,8 @@ export const BOOTSTRAP_MIGRATIONS = {
   'py-2': '!gl-py-3',
   'py-3': '!gl-py-5',
   'py-4': '!gl-py-6',
-  'py-md-4': '@md/panel:!gl-py-6',
-  'py-xl-0': '@xl/panel:!gl-py-0',
+  'py-md-4': 'md:!gl-py-6 @md/panel:!gl-py-6',
+  'py-xl-0': 'xl:!gl-py-0 @xl/panel:!gl-py-0',
   // rounded: '!gl-rounded-base', // Disabled as this produces too many false positives
   'rounded-0': '!gl-rounded-none',
   'rounded-bottom': '!gl-rounded-b-base',
@@ -200,15 +200,15 @@ export const BOOTSTRAP_MIGRATIONS = {
   'text-info': null,
   'text-left': '!gl-text-left',
   'text-lowercase': '!gl-lowercase',
-  'text-md-left': '@md/panel:!gl-text-left',
-  'text-md-right': '@md/panel:!gl-text-right',
+  'text-md-left': 'md:!gl-text-left @md/panel:!gl-text-left',
+  'text-md-right': 'md:!gl-text-right @md/panel:!gl-text-right',
   'text-monospace': '!gl-font-monospace',
   'text-muted': null,
   'text-nowrap': '!gl-whitespace-nowrap',
   'text-right': '!gl-text-right',
   'text-secondary': null,
-  'text-sm-left': '@sm/panel:!gl-text-left',
-  'text-sm-right': '@sm/panel:!gl-text-right',
+  'text-sm-left': 'sm:!gl-text-left @sm/panel:!gl-text-left',
+  'text-sm-right': 'sm:!gl-text-right @sm/panel:!gl-text-right',
   'text-truncate': 'gl-truncate',
   'text-uppercase': '!gl-uppercase',
   'text-warning': null,
diff --git a/scripts/frontend/lib/container_queries_migration.mjs b/scripts/frontend/lib/container_queries_migration.mjs
index 55f5b66ffee1ec305aa1288d361a7ebddea34adf..ca8b368e2ad56f066e1d3d83f3803916fe85cea9 100644
--- a/scripts/frontend/lib/container_queries_migration.mjs
+++ b/scripts/frontend/lib/container_queries_migration.mjs
@@ -56,8 +56,8 @@ const UTILS_REPLACEMENTS = [
   },
   (content) => {
     return content.replace(
-      /(?<prefix>[^@])(?<breakpoint>sm|md|lg|xl):gl-/g,
-      '$<prefix>@$<breakpoint>/panel:gl-',
+      /(?<prefix>[^@])(?<breakpoint>sm|md|lg|xl):gl-(?<util>[a-z\d/_[\]()%.,-]+)/g,
+      '$<prefix>@$<breakpoint>/panel:gl-$<util> $<breakpoint>:gl-$<util>',
     );
   },
 ];
diff --git a/spec/frontend/scripts/frontend/lib/container_queries_migration_spec.js b/spec/frontend/scripts/frontend/lib/container_queries_migration_spec.js
index e675a1ee8dad1915a94cec7938f1b26e17d9746b..850819855912a0a3c9dff5602763d188551a04e8 100644
--- a/spec/frontend/scripts/frontend/lib/container_queries_migration_spec.js
+++ b/spec/frontend/scripts/frontend/lib/container_queries_migration_spec.js
@@ -27,16 +27,26 @@ describe('migrateCSSUtils', () => {
     expect(migrateCSSUtils(input)).toBe(output);
   });
 
-  it('replaces Bootstrap utils with their Tailwind equivalent', () => {
+  it('replaces Bootstrap utils with their Tailwind MQ and CQ equivalents', () => {
     const input = 'visible flex-xl-nowrap';
-    const output = 'visible @xl/panel:!gl-flex-nowrap';
+    const output = 'visible xl:!gl-flex-nowrap @xl/panel:!gl-flex-nowrap';
 
     expect(migrateCSSUtils(input)).toBe(output);
   });
 
-  it('replaces Tailwind media query utils with their container query equivalent', () => {
+  it('adds Tailwind CQ utils to MQ utils', () => {
     const input = '<div class="sm:gl-max-w-6/12 lg:gl-hidden">';
-    const output = '<div class="@sm/panel:gl-max-w-6/12 @lg/panel:gl-hidden">';
+    const output =
+      '<div class="@sm/panel:gl-max-w-6/12 sm:gl-max-w-6/12 @lg/panel:gl-hidden lg:gl-hidden">';
+
+    expect(migrateCSSUtils(input)).toBe(output);
+  });
+
+  it('handles arbitrary values in Tailwind utils', () => {
+    const input =
+      '<div class="lg:gl-w-[calc(100%-480px)] sm:gl-min-w-[5.2rem] md:gl-grid-cols-[repeat(2,1fr),200px,150px]">';
+    const output =
+      '<div class="@lg/panel:gl-w-[calc(100%-480px)] lg:gl-w-[calc(100%-480px)] @sm/panel:gl-min-w-[5.2rem] sm:gl-min-w-[5.2rem] @md/panel:gl-grid-cols-[repeat(2,1fr),200px,150px] md:gl-grid-cols-[repeat(2,1fr),200px,150px]">';
 
     expect(migrateCSSUtils(input)).toBe(output);
   });