From 660cb015821be3ae5a67a4a7127741aacecfde40 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 28 Aug 2026 16:50:41 -0400
Subject: [PATCH 1/4] Resolve field widths to column spans

Move the width table out of publish.css into its own stylesheet, and let it
accept spans of 1-12 alongside the existing percentages and size keywords.
Every value maps to a span of the same twelve column grid the publish form
already uses. The percentages were always exact twelfths, so nothing that
renders today changes.

The rules are now unconditional, with the container query that collapses
everything to a single column moved onto the grid itself. That leaves each grid
free to pick its own collapse point while sharing one width vocabulary.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 resources/css/components/publish.css | 23 ++++++-------
 resources/css/components/widths.css  | 50 ++++++++++++++++++++++++++++
 resources/css/cp.css                 |  1 +
 3 files changed, 62 insertions(+), 12 deletions(-)
 create mode 100644 resources/css/components/widths.css

diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index ef43cf59ad9..8d192521a4f 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -12,7 +12,12 @@
     }
 
     .form-group {
-        grid-column: span var(--col-span, var(--grid-columns));
+        /* Stacked, until the panel is wide enough for the configured widths to make sense. */
+        grid-column: span var(--grid-columns);
+
+        @variant @lg/panel {
+            grid-column: span var(--col-span, var(--grid-columns));
+        }
     }
 
     .spacer-fieldtype {
@@ -26,21 +31,15 @@
     }
 }
 
-@variant @lg/panel {
-    .field-w-25  { --col-span: calc(var(--grid-columns) * 0.25); }
-    .field-w-33  { --col-span: calc(var(--grid-columns) * 0.333); }
-    .field-w-50  { --col-span: calc(var(--grid-columns) * 0.5); }
-    .field-w-66  { --col-span: calc(var(--grid-columns) * 0.666); }
-    .field-w-75  { --col-span: calc(var(--grid-columns) * 0.75); }
-    .field-w-undefined, .field-w-100 { --col-span: calc(var(--grid-columns) * 1); }
-}
-
-
 /* GROUP PUBLISH COMPONENT / FIELD GRID (e.g. BLUEPRINT)
 =================================================== */
 .field-grid {
     > * {
-        grid-column: span var(--col-span, var(--grid-columns));
+        grid-column: span var(--grid-columns);
+
+        @variant @lg/panel {
+            grid-column: span var(--col-span, var(--grid-columns));
+        }
     }
 }
 
diff --git a/resources/css/components/widths.css b/resources/css/components/widths.css
new file mode 100644
index 00000000000..e1e579c804b
--- /dev/null
+++ b/resources/css/components/widths.css
@@ -0,0 +1,50 @@
+/* GROUP WIDTHS
+=================================================== */
+
+/*
+ * A configured width resolves to a span of a twelve column grid.
+ *
+ * Consumed by the publish form grid (publish.css) and the dashboard widget grid
+ * (widgets.css). Each of those decides for itself at what container width it
+ * stops honouring the span and stacks everything instead, so these rules are
+ * unconditional.
+ *
+ * Spans and percentages are shared. The size keywords are widgets only, and are
+ * deliberately not given .field-w- equivalents.
+ *
+ * Spans are written as a fraction of --grid-columns rather than as plain numbers
+ * so that a grid redefining it continues to opt out of column spanning entirely.
+ * The asset editor does this by setting it to `none`.
+ */
+
+.field-w-1,    .widget-w-1    { --col-span: calc(var(--grid-columns) *  1 / 12); }
+.field-w-2,    .widget-w-2    { --col-span: calc(var(--grid-columns) *  2 / 12); }
+.field-w-3,    .widget-w-3    { --col-span: calc(var(--grid-columns) *  3 / 12); }
+.field-w-4,    .widget-w-4    { --col-span: calc(var(--grid-columns) *  4 / 12); }
+.field-w-5,    .widget-w-5    { --col-span: calc(var(--grid-columns) *  5 / 12); }
+.field-w-6,    .widget-w-6    { --col-span: calc(var(--grid-columns) *  6 / 12); }
+.field-w-7,    .widget-w-7    { --col-span: calc(var(--grid-columns) *  7 / 12); }
+.field-w-8,    .widget-w-8    { --col-span: calc(var(--grid-columns) *  8 / 12); }
+.field-w-9,    .widget-w-9    { --col-span: calc(var(--grid-columns) *  9 / 12); }
+.field-w-10,   .widget-w-10   { --col-span: calc(var(--grid-columns) * 10 / 12); }
+.field-w-11,   .widget-w-11   { --col-span: calc(var(--grid-columns) * 11 / 12); }
+.field-w-12,   .widget-w-12   { --col-span: calc(var(--grid-columns) * 12 / 12); }
+
+/* Percentages. The widths available before spans, and still what the width
+   selector writes. They were always exact twelfths. */
+.field-w-25,   .widget-w-25   { --col-span: calc(var(--grid-columns) *  3 / 12); }
+.field-w-33,   .widget-w-33   { --col-span: calc(var(--grid-columns) *  4 / 12); }
+.field-w-50,   .widget-w-50   { --col-span: calc(var(--grid-columns) *  6 / 12); }
+.field-w-66,   .widget-w-66   { --col-span: calc(var(--grid-columns) *  8 / 12); }
+.field-w-75,   .widget-w-75   { --col-span: calc(var(--grid-columns) *  9 / 12); }
+.field-w-100,  .widget-w-100  { --col-span: calc(var(--grid-columns) * 12 / 12); }
+
+/* Size keywords. Widgets only. Fields have never accepted these. */
+.widget-w-sm   { --col-span: calc(var(--grid-columns) *  4 / 12); }
+.widget-w-md   { --col-span: calc(var(--grid-columns) *  6 / 12); }
+.widget-w-lg   { --col-span: calc(var(--grid-columns) *  9 / 12); }
+.widget-w-full { --col-span: calc(var(--grid-columns) * 12 / 12); }
+
+/* No width configured. Needs a rule of its own rather than relying on the
+   var() fallback, because --col-span inherits. */
+.field-w-undefined, .widget-w-undefined { --col-span: calc(var(--grid-columns) * 12 / 12); }
diff --git a/resources/css/cp.css b/resources/css/cp.css
index dd8ab0f1172..3a612b9d78c 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -26,6 +26,7 @@
 @import './components/stacks.css';
 @import './components/tabs.css';
 @import './components/tooltips.css';
+@import './components/widths.css';
 @import './components/wizard.css';
 
 /* Fieldtypes */

From 45be763aa2e52eed48ca15f11baadaf3d24f8e73 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 28 Aug 2026 16:51:03 -0400
Subject: [PATCH 2/4] Lay dashboard widgets out on the shared column grid

Widgets each had their own four step responsive ramp, so two widgets set to 50
rendered a third wide at large viewports and never sat side by side. Replace the
ramp with the same twelve column grid the publish form uses, and one container
query for the whole dashboard.

The threshold stays at 672px, where widgets already went from full to half
width, so the point at which they first pair up is unchanged.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 resources/css/components/widgets.css | 22 +++++++++++++++++++++
 resources/css/cp.css                 |  1 +
 resources/js/pages/Dashboard.vue     | 29 +++-------------------------
 3 files changed, 26 insertions(+), 26 deletions(-)
 create mode 100644 resources/css/components/widgets.css

diff --git a/resources/css/components/widgets.css b/resources/css/components/widgets.css
new file mode 100644
index 00000000000..1705d3b61b6
--- /dev/null
+++ b/resources/css/components/widgets.css
@@ -0,0 +1,22 @@
+/* GROUP DASHBOARD WIDGETS
+=================================================== */
+
+.widgets {
+    display: grid;
+    --grid-columns: 12;
+    grid-template-columns: repeat(var(--grid-columns), 1fr);
+    @apply gap-6;
+
+    > * {
+        /*
+         * Stacked, until the dashboard is wide enough for the arrangement to
+         * hold up. One threshold for every widget, so there are only ever two
+         * layouts: the one that was configured, or everything in order.
+         */
+        grid-column: span var(--grid-columns);
+
+        @variant @2xl/widgets {
+            grid-column: span var(--col-span, var(--grid-columns));
+        }
+    }
+}
diff --git a/resources/css/cp.css b/resources/css/cp.css
index 3a612b9d78c..16a1d333059 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -26,6 +26,7 @@
 @import './components/stacks.css';
 @import './components/tabs.css';
 @import './components/tooltips.css';
+@import './components/widgets.css';
 @import './components/widths.css';
 @import './components/wizard.css';
 
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index 57d1d9cb1ab..fba3bc200f7 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -15,30 +15,7 @@ const props = defineProps({
 if (props.widgets.length === 0) useArchitecturalBackground();
 
 function classes(widget) {
-    return `${widget.classes} ${tailwindWidthClass(widget.width)}`;
-}
-
-function tailwindWidthClass(width) {
-    const sizes = {
-        sm: 'w-full @2xl:w-1/2 @4xl:w-1/3 @7xl:w-1/4',
-        md: 'w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3',
-        lg: 'w-full @2xl:w-full @4xl:w-2/3 @7xl:w-3/4',
-        full: 'w-full',
-    };
-
-    // For backward compatibility, map old numeric widths to new sizes
-    const legacyMap = {
-        25: 'sm',
-        33: 'sm',
-        50: 'md',
-        66: 'md',
-        75: 'lg',
-        100: 'full'
-    };
-
-    const size = typeof width === 'number' ? (legacyMap[width] ?? 'full') : width;
-
-    return sizes[size] ?? sizes.md;
+    return `${widget.classes} widget-w-${widget.width}`;
 }
 </script>
 
@@ -48,10 +25,10 @@ function tailwindWidthClass(width) {
     <template v-if="widgets.length">
         <ui-header :title="__('Dashboard')" icon="dashboard" />
 
-        <div class="widgets @container/widgets flex flex-wrap gap-y-6 -mx-2 sm:-mx-3">
+        <div class="widgets @container/widgets">
             <div
                 v-for="widget in widgets"
-                class="px-3 starting-style-transition"
+                class="starting-style-transition"
                 :class="classes(widget)"
             >
                 <component v-if="widget.component" :is="widget.component.name" v-bind="widget.component.props" />

From 2a515897bc81bc1b1e5db824be73e310750ba301 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 28 Aug 2026 16:52:43 -0400
Subject: [PATCH 3/4] Let field widths be column spans too

Emit the configured width as a class and let the stylesheet resolve it, matching
what ui/Publish/Fields.vue already does. Without this a width of 6 would mean
half a dashboard but a full width field, silently, because .field-w-6 didn't
exist and the grid fell back to a full row.

The width selector compares on resolved spans, so a hand written span still
fills the right number of stops and reads back as a percentage rather than as
itself. Clicking a stop still writes the stop's own value.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../js/components/blueprints/RegularField.vue |  2 +-
 .../js/components/fields/WidthSelector.vue    | 24 +++++--
 .../js/tests/components/WidthSelector.test.js | 45 ++++++++++++
 resources/js/tests/width.test.js              | 72 +++++++++++++++++++
 resources/js/util/width.js                    | 37 ++++++++++
 5 files changed, 172 insertions(+), 8 deletions(-)
 create mode 100644 resources/js/tests/components/WidthSelector.test.js
 create mode 100644 resources/js/tests/width.test.js
 create mode 100644 resources/js/util/width.js

diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index fa3e0201fdb..885b0daa636 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -128,7 +128,7 @@ export default {
         },
 
         widthClass() {
-            return `${field_width_class(this.width)}`;
+            return `field-w-${this.width}`;
         },
 
         localizable: {
diff --git a/resources/js/components/fields/WidthSelector.vue b/resources/js/components/fields/WidthSelector.vue
index da07abae1af..2eab1c8d149 100644
--- a/resources/js/components/fields/WidthSelector.vue
+++ b/resources/js/components/fields/WidthSelector.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { cva } from 'cva'
+import { GRID_COLUMNS, widthToColumnSpan, widthToPercentage } from '@/util/width.js'
 
 const props = defineProps({
     modelValue: Number,
@@ -13,7 +14,14 @@ const emit = defineEmits(['update:model-value'])
 
 const isHovering = ref(false)
 const hoveringOver = ref(null)
-const widths = ref(props.initialWidths ?? [25, 33, 50, 66, 75, 100])
+// Compared on resolved spans rather than raw values, so a width the stops don't
+// offer (a hand written span of 6, say) still fills the selector to the right place.
+const widths = computed(() =>
+    (props.initialWidths ?? [25, 33, 50, 66, 75, 100]).map((value) => ({
+        value,
+        span: widthToColumnSpan(value),
+    })),
+)
 
 const selected = computed(() => {
     if (isHovering.value) {
@@ -22,6 +30,8 @@ const selected = computed(() => {
     return props.modelValue
 })
 
+const selectedSpan = computed(() => widthToColumnSpan(selected.value))
+
 const wrapperClasses = cva({
     base: 'relative text-gray-600 dark:text-gray-400 font-mono antialiased bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 with-contrast:border-gray-500 overflow-hidden flex cursor-pointer',
     variants: {
@@ -58,14 +68,14 @@ const sizerClasses = cva({
         <div class="flex w-full">
             <div
                 v-for="width in widths"
-                :key="width"
-                @mouseenter.stop="hoveringOver = width"
-                @click="$emit('update:model-value', width)"
+                :key="width.value"
+                @mouseenter.stop="hoveringOver = width.value"
+                @click="$emit('update:model-value', width.value)"
                 :class="sizerClasses"
-                :data-state="selected >= width ? 'selected' : 'unselected'"
-                :data-last="selected === width && width !== 100"
+                :data-state="selectedSpan >= width.span ? 'selected' : 'unselected'"
+                :data-last="selectedSpan === width.span && width.span !== GRID_COLUMNS"
             />
         </div>
-        <div class="pointer-events-none absolute inset-0 z-10 flex w-full items-center justify-center text-center font-medium text-gray-900 dark:text-gray-300">{{ selected }}%</div>
+        <div class="pointer-events-none absolute inset-0 z-10 flex w-full items-center justify-center text-center font-medium text-gray-900 dark:text-gray-300">{{ widthToPercentage(selected) }}%</div>
     </div>
 </template>
diff --git a/resources/js/tests/components/WidthSelector.test.js b/resources/js/tests/components/WidthSelector.test.js
new file mode 100644
index 00000000000..574df529de2
--- /dev/null
+++ b/resources/js/tests/components/WidthSelector.test.js
@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import WidthSelector from '@/components/fields/WidthSelector.vue';
+
+function states(wrapper) {
+    return wrapper.findAll('[data-state]').map((el) => el.attributes('data-state'));
+}
+
+function label(wrapper) {
+    return wrapper.find('.pointer-events-none').text();
+}
+
+test('it fills the stops up to the selected percentage', () => {
+    const wrapper = mount(WidthSelector, { props: { modelValue: 50 } });
+
+    expect(states(wrapper)).toEqual(['selected', 'selected', 'selected', 'unselected', 'unselected', 'unselected']);
+    expect(label(wrapper)).toBe('50%');
+});
+
+test('it fills the stops for a width the stops do not offer', () => {
+    const wrapper = mount(WidthSelector, { props: { modelValue: 6 } });
+
+    expect(states(wrapper)).toEqual(['selected', 'selected', 'selected', 'unselected', 'unselected', 'unselected']);
+    expect(label(wrapper)).toBe('50%');
+});
+
+test('it fills every stop at full width', () => {
+    const wrapper = mount(WidthSelector, { props: { modelValue: 12 } });
+
+    expect(states(wrapper)).toEqual(Array(6).fill('selected'));
+    expect(label(wrapper)).toBe('100%');
+});
+
+test('it marks the last filled stop unless it is full width', () => {
+    expect(mount(WidthSelector, { props: { modelValue: 6 } }).findAll('[data-last="true"]')).toHaveLength(1);
+    expect(mount(WidthSelector, { props: { modelValue: 12 } }).findAll('[data-last="true"]')).toHaveLength(0);
+});
+
+test('it emits the raw stop value when clicked', async () => {
+    const wrapper = mount(WidthSelector, { props: { modelValue: 6 } });
+
+    await wrapper.findAll('[data-state]')[2].trigger('click');
+
+    expect(wrapper.emitted('update:model-value')).toEqual([[50]]);
+});
diff --git a/resources/js/tests/width.test.js b/resources/js/tests/width.test.js
new file mode 100644
index 00000000000..bf26060dbb2
--- /dev/null
+++ b/resources/js/tests/width.test.js
@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest';
+import { widthToColumnSpan, widthToPercentage } from '../util/width.js';
+
+describe('widthToColumnSpan', () => {
+    it('passes spans through', () => {
+        for (let span = 1; span <= 12; span++) {
+            expect(widthToColumnSpan(span)).toBe(span);
+        }
+    });
+
+    it('resolves the percentages that shipped before spans', () => {
+        expect(widthToColumnSpan(25)).toBe(3);
+        expect(widthToColumnSpan(33)).toBe(4);
+        expect(widthToColumnSpan(50)).toBe(6);
+        expect(widthToColumnSpan(66)).toBe(8);
+        expect(widthToColumnSpan(75)).toBe(9);
+        expect(widthToColumnSpan(100)).toBe(12);
+    });
+
+    it('does not resolve the widgets-only size keywords', () => {
+        expect(widthToColumnSpan('sm')).toBe(12);
+        expect(widthToColumnSpan('md')).toBe(12);
+        expect(widthToColumnSpan('lg')).toBe(12);
+        expect(widthToColumnSpan('full')).toBe(12);
+    });
+
+    it('treats numbers above twelve as percentages', () => {
+        expect(widthToColumnSpan(13)).toBe(2);
+        expect(widthToColumnSpan(40)).toBe(5);
+        expect(widthToColumnSpan(90)).toBe(11);
+    });
+
+    it('clamps percentages beyond a full row', () => {
+        expect(widthToColumnSpan(200)).toBe(12);
+    });
+
+    it('handles numeric strings', () => {
+        expect(widthToColumnSpan('50')).toBe(6);
+        expect(widthToColumnSpan('6')).toBe(6);
+    });
+
+    it('falls back to full width for anything it does not recognise', () => {
+        expect(widthToColumnSpan(undefined)).toBe(12);
+        expect(widthToColumnSpan(null)).toBe(12);
+        expect(widthToColumnSpan('')).toBe(12);
+        expect(widthToColumnSpan('huge')).toBe(12);
+        expect(widthToColumnSpan(0)).toBe(12);
+        expect(widthToColumnSpan(-5)).toBe(12);
+        expect(widthToColumnSpan(7.5)).toBe(12);
+    });
+});
+
+describe('widthToPercentage', () => {
+    it('leaves percentages alone', () => {
+        expect(widthToPercentage(25)).toBe(25);
+        expect(widthToPercentage(33)).toBe(33);
+        expect(widthToPercentage(66)).toBe(66);
+        expect(widthToPercentage(100)).toBe(100);
+    });
+
+    it('derives a percentage from a span', () => {
+        expect(widthToPercentage(3)).toBe(25);
+        expect(widthToPercentage(4)).toBe(33);
+        expect(widthToPercentage(6)).toBe(50);
+        expect(widthToPercentage(9)).toBe(75);
+        expect(widthToPercentage(12)).toBe(100);
+    });
+
+    it('reports an unrecognised width as full width', () => {
+        expect(widthToPercentage(undefined)).toBe(100);
+    });
+});
diff --git a/resources/js/util/width.js b/resources/js/util/width.js
new file mode 100644
index 00000000000..8ee1eb6e3e3
--- /dev/null
+++ b/resources/js/util/width.js
@@ -0,0 +1,37 @@
+export const GRID_COLUMNS = 12;
+
+/*
+ * Resolve a field width to a span of the twelve column grid. Mirrors the
+ * .field-w- rules in resources/css/components/widths.css, which is what actually
+ * renders. Widgets don't come through here; their widths are resolved entirely by
+ * the stylesheet, which is also the only place the widgets-only size keywords are
+ * understood.
+ *
+ * Note the discontinuity: 12 is a span, and so full width, while 13 is read as a
+ * percentage and comes out at a sixth. Nothing meaningful lived in 13-24.
+ */
+export function widthToColumnSpan(width) {
+    const number = Number(width);
+
+    if (!Number.isFinite(number)) return GRID_COLUMNS;
+
+    if (Number.isInteger(number) && number >= 1 && number <= GRID_COLUMNS) return number;
+
+    if (number > GRID_COLUMNS) {
+        return Math.min(GRID_COLUMNS, Math.max(1, Math.round((number / 100) * GRID_COLUMNS)));
+    }
+
+    return GRID_COLUMNS;
+}
+
+/*
+ * The width as a percentage, for display. Values that are already percentages
+ * are left alone so that 66 doesn't read back as 67.
+ */
+export function widthToPercentage(width) {
+    const number = Number(width);
+
+    if (Number.isFinite(number) && number > GRID_COLUMNS) return Math.min(100, number);
+
+    return Math.round((widthToColumnSpan(width) / GRID_COLUMNS) * 100);
+}

From 8d74fc3075041b164b462fa958196b5bcc62d6ac Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 28 Aug 2026 16:53:06 -0400
Subject: [PATCH 4/4] Deprecate the width class helpers

field_width_class(), tailwind_width_class() and Str::tailwindWidthClass() are
all uncalled by core now that the stylesheet resolves widths. The two JS ones
are public API regardless of who imports them, because index.js spreads every
named export of globals.js onto window, so freeze all three as they are rather
than teaching them about spans.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 resources/js/bootstrap/globals.js | 9 +++++++++
 src/Support/Str.php               | 5 +++++
 2 files changed, 14 insertions(+)

diff --git a/resources/js/bootstrap/globals.js b/resources/js/bootstrap/globals.js
index 3310ec80d83..0e015762eb9 100644
--- a/resources/js/bootstrap/globals.js
+++ b/resources/js/bootstrap/globals.js
@@ -49,6 +49,10 @@ export function clone(value) {
     return JSON.parse(JSON.stringify(value));
 }
 
+/**
+ * @deprecated Widths are resolved by the stylesheet now. Emit `field-w-${width}`
+ * or `widget-w-${width}` instead. Will be removed in a future major version.
+ */
 export function tailwind_width_class(width) {
     const widths = {
         25: 'w-full @lg:w-1/4',
@@ -62,6 +66,11 @@ export function tailwind_width_class(width) {
     return `${widths[width] || 'w-full'}`;
 }
 
+/**
+ * @deprecated Widths are resolved by the stylesheet now, which understands column
+ * spans as well as these six percentages. Emit `field-w-${width}` instead.
+ * Will be removed in a future major version.
+ */
 export function field_width_class(width) {
     const widths = {
         25: 'field-w-25',
diff --git a/src/Support/Str.php b/src/Support/Str.php
index 41cada193cf..0904015f2af 100644
--- a/src/Support/Str.php
+++ b/src/Support/Str.php
@@ -258,6 +258,11 @@ public static function modifyMultiple($string, $modifications)
         return $string;
     }
 
+    /**
+     * @deprecated Widths are resolved by the control panel stylesheet now. Render
+     * `field-w-{$width}` or `widget-w-{$width}` instead. Will be removed in a
+     * future major version.
+     */
     public static function tailwindWidthClass($width)
     {
         $sizes = [