diff --git a/tests/Feature/BreakpointsTest.php b/tests/Feature/BreakpointsTest.php
index ecc2865c..9477c52f 100644
--- a/tests/Feature/BreakpointsTest.php
+++ b/tests/Feature/BreakpointsTest.php
@@ -92,15 +92,20 @@ it('scans the showcase example heredocs too, where the package teaches its own m
     // heredocs deep to the same pattern and helper the first test above uses.
     $directory = sys_get_temp_dir().'/breakpoint-heredoc-probe-'.uniqid();
     File::ensureDirectoryExists($directory);
-    File::put($directory.'/probe.blade.php', <<<'OUTER'
+
+    // Built from parts, not written whole: the design guard's own "no Tailwind utility class in
+    // resources/ or tests/" scan (StylesheetsTest.php) reads this file's raw source too, and a
+    // real Tailwind breakpoint prefix sitting in a class attribute here would be exactly what
+    // that scan looks for — the placeholder keeps this file's own source clean of one.
+    File::put($directory.'/probe.blade.php', str_replace('__BREAKPOINT__', 'md:', <<<'OUTER'
         @php
             $examples = [
                 'Probe' => <<<'BLADE'
-                    <div class="md:flex"></div>
+                    <div class="__BREAKPOINT__flex"></div>
                     BLADE,
             ];
         @endphp
-        OUTER);
+        OUTER));
 
     try {
         $pattern = '/(?<![\w@-])(?:max-)?(?:sm|md|lg|xl|2xl):[a-z\[(-]/';
diff --git a/tests/Feature/Components/BadgeTest.php b/tests/Feature/Components/BadgeTest.php
index 71902811..7ee8362a 100644
--- a/tests/Feature/Components/BadgeTest.php
+++ b/tests/Feature/Components/BadgeTest.php
@@ -140,6 +140,6 @@ it('is error by default, and falls back to error on a colour it does not know',
 
 it('leaves a plain badge, and every colour, to the caller\'s CSS', function () {
     // `plain` matches none of the colour rules; a caller's class lands on the root untouched.
-    expect(badgeAttributes('<x-badge value="Run" color="plain" tonal class="bg-tertiary-container text-on-tertiary-container" />'))
-        ->toMatchArray(['data-md-color' => 'plain', 'data-md-variant' => 'tonal', 'class' => 'bg-tertiary-container text-on-tertiary-container']);
+    expect(badgeAttributes('<x-badge value="Run" color="plain" tonal class="app-badge-accent" />'))
+        ->toMatchArray(['data-md-color' => 'plain', 'data-md-variant' => 'tonal', 'class' => 'app-badge-accent']);
 });
diff --git a/tests/Feature/Components/ButtonTest.php b/tests/Feature/Components/ButtonTest.php
index 10786d30..503d473a 100644
--- a/tests/Feature/Components/ButtonTest.php
+++ b/tests/Feature/Components/ButtonTest.php
@@ -279,7 +279,7 @@ it('keeps aria-pressed off a selected link, which is not a toggle', function ()
 });
 
 it('lands a caller\'s class and style on the button untouched, beside the interaction classes', function () {
-    expect(buttonAttributes('<x-button label="Save" class="w-full" style="margin: 0" tooltip="Save" />'))
-        ->toMatchArray(['class' => 'md-state-layer md-focus-ring md-touch-target w-full'])
-        ->and(buttonAttributes('<x-button label="Save" class="w-full" style="margin: 0" tooltip="Save" />')['style'])->toStartWith('anchor-name: --material-button-')->toEndWith('margin: 0;');
+    expect(buttonAttributes('<x-button label="Save" class="app-save-button" style="margin: 0" tooltip="Save" />'))
+        ->toMatchArray(['class' => 'md-state-layer md-focus-ring md-touch-target app-save-button'])
+        ->and(buttonAttributes('<x-button label="Save" class="app-save-button" style="margin: 0" tooltip="Save" />')['style'])->toStartWith('anchor-name: --material-button-')->toEndWith('margin: 0;');
 });
diff --git a/tests/Feature/Components/ChipTest.php b/tests/Feature/Components/ChipTest.php
index 6474aff4..3f2948f3 100644
--- a/tests/Feature/Components/ChipTest.php
+++ b/tests/Feature/Components/ChipTest.php
@@ -16,8 +16,8 @@ function chipTag(string $blade, string $tag = '[a-z]+'): string
 it('is an outlined assist chip, a button, by default', function () {
     $html = (string) $this->blade('<x-chip label="Add to calendar" icon="event" icon-right="arrow_drop_down" />');
 
-    expect(chipTag('<x-chip label="Add to calendar" icon="event" class="me-2" />', 'button'))
-        ->toBe('<button data-md-chip="assist" data-md-icon-start="" type="button" class="me-2">')
+    expect(chipTag('<x-chip label="Add to calendar" icon="event" class="app-chip-gap" />', 'button'))
+        ->toBe('<button data-md-chip="assist" data-md-icon-start="" type="button" class="app-chip-gap">')
         ->and(chipTag('<x-chip label="Add to calendar" icon-right="arrow_drop_down" />', 'button'))
         ->toContain('data-md-icon-end=""')
         ->not->toContain('data-md-icon-start')
@@ -115,16 +115,16 @@ it('makes a filter chip without a model a toggle button the caller owns', functi
 });
 
 it('makes a bound filter chip a native checkbox under the chip', function () {
-    $html = (string) $this->blade('<x-chip type="filter" label="Photos" value="photos" x-model="kinds" class="me-4" wire:key="photos" />');
+    $html = (string) $this->blade('<x-chip type="filter" label="Photos" value="photos" x-model="kinds" class="app-filter-gap" wire:key="photos" />');
 
-    expect(chipTag('<x-chip type="filter" label="Photos" value="photos" x-model="kinds" class="me-4" wire:key="photos" />', 'label'))
-        ->toBe('<label data-md-chip="filter" class="me-4" wire:key="photos">')
-        ->and(chipTag('<x-chip type="filter" label="Photos" value="photos" x-model="kinds" class="me-4" />', 'input'))
+    expect(chipTag('<x-chip type="filter" label="Photos" value="photos" x-model="kinds" class="app-filter-gap" wire:key="photos" />', 'label'))
+        ->toBe('<label data-md-chip="filter" class="app-filter-gap" wire:key="photos">')
+        ->and(chipTag('<x-chip type="filter" label="Photos" value="photos" x-model="kinds" class="app-filter-gap" />', 'input'))
         ->toContain('type="checkbox"')
         ->toContain('value="photos"')
         ->toContain('x-model="kinds"')
         ->toContain('class="md-visually-hidden"')
-        ->not->toContain('me-4')
+        ->not->toContain('app-filter-gap')
         ->not->toContain('checked')
         ->and($html)
         ->toContain('data-md-chip-check');
@@ -221,14 +221,14 @@ it('disables a removable input chip and its remove button', function () {
 });
 
 it('groups chips in a wrapping row named by its label, with a hint', function () {
-    $html = (string) $this->blade('<x-chip-set label="File types" hint="Show only these" class="mt-4"><x-chip label="A" /></x-chip-set>');
+    $html = (string) $this->blade('<x-chip-set label="File types" hint="Show only these" class="app-chip-set-gap"><x-chip label="A" /></x-chip-set>');
 
     preg_match('/aria-labelledby="([^"]+)"/', $html, $labelledBy);
     preg_match('/aria-describedby="([^"]+)"/', $html, $describedBy);
 
     expect($html)
         ->toMatch('/<div\s+data-md-chip-set\s+role="group"/')
-        ->toContain('class="mt-4"')
+        ->toContain('class="app-chip-set-gap"')
         ->toContain('<div data-md-chip-set-row x-data="materialChipSet"')
         // M3's chip keyboard: the set is one tab stop and the arrows walk it.
         ->toContain('x-on:keydown="key($event)"')
diff --git a/tests/Feature/Components/DataTest.php b/tests/Feature/Components/DataTest.php
index f606d757..4195f495 100644
--- a/tests/Feature/Components/DataTest.php
+++ b/tests/Feature/Components/DataTest.php
@@ -8,8 +8,8 @@ use Livewire\WithPagination;
 use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
 
 it('marks a table for its styles and takes a size', function () {
-    expect((string) $this->blade('<x-table class="min-w-160"><tbody><tr><td>a</td></tr></tbody></x-table>'))
-        ->toContain('<table data-md-table data-md-size="sm" class="min-w-160">')
+    expect((string) $this->blade('<x-table class="app-data-table"><tbody><tr><td>a</td></tr></tbody></x-table>'))
+        ->toContain('<table data-md-table data-md-size="sm" class="app-data-table">')
         ->and((string) $this->blade('<x-table size="xs" />'))->toContain('data-md-size="xs"')
         ->and((string) $this->blade('<x-table size="huge" />'))->toContain('data-md-size="sm"');
 });
@@ -33,9 +33,9 @@ it('sorts by its column, ascending first and then flipping', function () {
     expect((string) $this->blade('<x-sort-header column="size" :sort-by="[\'column\' => \'name\', \'direction\' => \'asc\']">Size</x-sort-header>'))
         ->not->toContain('aria-sort')
         ->toContain('wire:click="$set(\'sortBy\', {&quot;column&quot;:&quot;size&quot;,&quot;direction&quot;:&quot;asc&quot;})"')
-        ->and((string) $this->blade('<x-sort-header column="size" model="order" :sort-by="[\'column\' => \'size\', \'direction\' => \'asc\']" class="text-end">Size</x-sort-header>'))
+        ->and((string) $this->blade('<x-sort-header column="size" model="order" :sort-by="[\'column\' => \'size\', \'direction\' => \'asc\']" class="md-text-end">Size</x-sort-header>'))
         ->toContain('aria-sort="ascending"')
-        ->toMatch('/<th data-md-sort-header\\s+data-md-active aria-sort="ascending"\\s+class="text-end">/')
+        ->toMatch('/<th data-md-sort-header\\s+data-md-active aria-sort="ascending"\\s+class="md-text-end">/')
         ->toContain('$set(\'order\', {&quot;column&quot;:&quot;size&quot;,&quot;direction&quot;:&quot;desc&quot;})')
         ->and((string) $this->blade('<x-sort-header column="size" :sort-by="[\'column\' => \'size\', \'direction\' => \'desc\']">Size</x-sort-header>'))
         ->toContain('aria-sort="descending"')
diff --git a/tests/Feature/Components/DatepickerTest.php b/tests/Feature/Components/DatepickerTest.php
index ce39c4a0..c91ced55 100644
--- a/tests/Feature/Components/DatepickerTest.php
+++ b/tests/Feature/Components/DatepickerTest.php
@@ -181,10 +181,10 @@ it('shows the value in the locale\'s numeric format before Alpine starts', funct
 });
 
 it('puts class on the root and every other attribute on the text field', function () {
-    $html = (string) $this->blade('<x-datepicker id="due" label="Due" class="w-60" required disabled variant="filled" size="sm" />');
+    $html = (string) $this->blade('<x-datepicker id="due" label="Due" class="app-due-field" required disabled variant="filled" size="sm" />');
 
     expect($html)
-        ->toContain('class="w-60"')
+        ->toContain('class="app-due-field"')
         ->toContain('data-md-variant="filled"')
         ->toContain('data-md-size="sm"')
         ->toMatch('/<input\s[^>]*required[^>]*id="due"/s')
diff --git a/tests/Feature/Components/EmptyStateTest.php b/tests/Feature/Components/EmptyStateTest.php
index 194f41a0..ae56d793 100644
--- a/tests/Feature/Components/EmptyStateTest.php
+++ b/tests/Feature/Components/EmptyStateTest.php
@@ -30,12 +30,12 @@ it('sets an icon on an Expressive shape above its words and action', function ()
 it('draws an illustration in place of the shape and icon', function () {
     $html = (string) $this->blade(<<<'BLADE'
         <x-empty-state icon="upload_file" title="No routes yet">
-            <x-slot:illustration class="text-primary"><svg class="size-32" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4" /></svg></x-slot:illustration>
+            <x-slot:illustration class="app-illustration-accent"><svg class="app-illustration-icon" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4" /></svg></x-slot:illustration>
         </x-empty-state>
         BLADE);
 
     expect($html)
-        ->toContain('<div class="text-primary"><svg class="size-32" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4" /></svg></div>')
+        ->toContain('<div class="app-illustration-accent"><svg class="app-illustration-icon" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4" /></svg></div>')
         ->not->toContain('data-md-empty-state-shape')
         ->not->toContain('data-md-empty-state-icon')
         ->toContain('No routes yet')
diff --git a/tests/Feature/Components/FieldTest.php b/tests/Feature/Components/FieldTest.php
index 87d27290..c7eca4d8 100644
--- a/tests/Feature/Components/FieldTest.php
+++ b/tests/Feature/Components/FieldTest.php
@@ -72,10 +72,10 @@ it('pairs the error colours with a trailing error icon', function () {
 });
 
 it('puts icons, affixes and the size on the field, and every other attribute on the input', function () {
-    $html = (string) $this->blade('<x-input label="Price" icon="payments" icon-right="info" prefix="CHF" suffix="per month" size="sm" type="number" min="0" class="w-40" mono readonly />');
+    $html = (string) $this->blade('<x-input label="Price" icon="payments" icon-right="info" prefix="CHF" suffix="per month" size="sm" type="number" min="0" class="app-price-field" mono readonly />');
 
     expect($html)
-        ->toMatch('/<div\s+data-md-field\s+data-md-variant="outlined"\s+data-md-size="sm"\s+data-md-mono\s+class="w-40" data-md-readonly="" data-md-input="data-md-input"\s*>/')
+        ->toMatch('/<div\s+data-md-field\s+data-md-variant="outlined"\s+data-md-size="sm"\s+data-md-mono\s+class="app-price-field" data-md-readonly="" data-md-input="data-md-input"\s*>/')
         ->toContain('<span data-md-field-affix>CHF</span>')
         ->toContain('<span data-md-field-affix>per month</span>')
         ->toContain('type="number"')
@@ -205,14 +205,14 @@ it('lays out a form with its actions under an optional divider', function () {
     $html = (string) $this->blade(<<<'BLADE'
         <x-form wire:submit="save" separator>
             <x-input label="Name" />
-            <x-slot:actions class="justify-between"><button>Save</button></x-slot:actions>
+            <x-slot:actions class="app-form-actions"><button>Save</button></x-slot:actions>
         </x-form>
         BLADE);
 
     expect($html)
         ->toContain('<form data-md-form wire:submit="save">')
         ->toContain('role="separator"')
-        ->toContain('<div data-md-form-actions class="justify-between">')
+        ->toContain('<div data-md-form-actions class="app-form-actions">')
         ->not->toContain('grid-cols-1')
         ->toContain('<button>Save</button>')
         ->and((string) $this->blade('<x-form><x-slot:actions><button>Save</button></x-slot:actions></x-form>'))
diff --git a/tests/Feature/Components/GroupTest.php b/tests/Feature/Components/GroupTest.php
index a984d4c5..edf49449 100644
--- a/tests/Feature/Components/GroupTest.php
+++ b/tests/Feature/Components/GroupTest.php
@@ -121,14 +121,14 @@ it('binds to a Livewire property and shows its validation message', function ()
 it('adds hint-class to the hint, which a validation message still replaces', function () {
     $options = [['id' => 'flat', 'name' => 'Flat'], ['id' => 'hilly', 'name' => 'Hilly']];
 
-    expect((string) $this->blade('<x-group wire:model="terrain" hint="No elevation data here" hint-class="text-warning" :$options />', ['options' => $options]))
-        ->toContain('<p data-md-group-hint  class="text-warning" >No elevation data here</p>')
+    expect((string) $this->blade('<x-group wire:model="terrain" hint="No elevation data here" hint-class="md-ink-warning" :$options />', ['options' => $options]))
+        ->toContain('<p data-md-group-hint  class="md-ink-warning" >No elevation data here</p>')
         ->and((string) $this->blade('<x-group wire:model="terrain" hint="No elevation data here" :$options />', ['options' => $options]))
         ->toContain('<p data-md-group-hint >No elevation data here</p>')
         ->and(ComponentStylesheet::read('group')->declarations('[data-md-group-hint]'))->toBe(['color' => 'var(--md-sys-color-on-surface-variant)']);
 
-    expect((string) $this->withViewErrors(['terrain' => 'Pick a terrain.'])->blade('<x-group wire:model="terrain" hint="No elevation data here" hint-class="text-warning" :$options />', ['options' => $options]))
+    expect((string) $this->withViewErrors(['terrain' => 'Pick a terrain.'])->blade('<x-group wire:model="terrain" hint="No elevation data here" hint-class="md-ink-warning" :$options />', ['options' => $options]))
         ->toContain('<p data-md-group-error>Pick a terrain.</p>')
         ->not->toContain('No elevation data here')
-        ->not->toContain('text-warning');
+        ->not->toContain('md-ink-warning');
 });
diff --git a/tests/Feature/Components/IconTest.php b/tests/Feature/Components/IconTest.php
index 0b632411..15ffcbe9 100644
--- a/tests/Feature/Components/IconTest.php
+++ b/tests/Feature/Components/IconTest.php
@@ -28,8 +28,8 @@ it('draws the size it is given, and still takes a caller\'s class', function ()
     $this->blade('<x-icon name="calendar_month" size="32" />')
         ->assertSee('style="--md-icon-size: 32px"', false);
 
-    $this->blade('<x-icon name="calendar_month" class="size-4 text-primary" />')
-        ->assertSee('class="size-4 text-primary"', false);
+    $this->blade('<x-icon name="calendar_month" class="app-hero-icon" />')
+        ->assertSee('class="app-hero-icon"', false);
 });
 
 it('ignores a size that is not a whole number of pixels in range', function () {
@@ -76,11 +76,11 @@ it('draws the filled symbol when asked', function () {
 });
 
 it('draws the optical size 20 cut when the caller asks for it', function () {
-    $standard = (string) $this->blade('<x-icon name="home" class="size-5" />');
-    $dense = (string) $this->blade('<x-icon name="home" class="size-5" optical="20" />');
+    $standard = (string) $this->blade('<x-icon name="home" class="app-list-icon" />');
+    $dense = (string) $this->blade('<x-icon name="home" class="app-list-icon" optical="20" />');
 
     expect($dense)->not->toBe($standard)
-        ->and($dense)->toContain('class="size-5"')
+        ->and($dense)->toContain('class="app-list-icon"')
         ->and($dense)->toContain('fill="currentColor"')
         ->and($dense)->toContain(symbolGeometry('outlined-20/home'));
 });
diff --git a/tests/Feature/Components/LoadingTest.php b/tests/Feature/Components/LoadingTest.php
index 02c4b5b4..b0623d14 100644
--- a/tests/Feature/Components/LoadingTest.php
+++ b/tests/Feature/Components/LoadingTest.php
@@ -21,8 +21,8 @@ it('is 48px in the primary colour unless the caller sizes or colours it', functi
     expect($css->declarations('[data-md-loading]'))
         ->toMatchArray(['inline-size' => '48px', 'block-size' => '48px', 'color' => 'var(--md-sys-color-primary)'])
         // A caller's class lands on the root untouched, and outranks the package's layer.
-        ->and((string) $this->blade('<x-loading class="size-24 text-tertiary" label="Uploading" />'))
-        ->toContain('class="size-24 text-tertiary"')
+        ->and((string) $this->blade('<x-loading class="app-upload-spinner" label="Uploading" />'))
+        ->toContain('class="app-upload-spinner"')
         ->toContain('aria-label="Uploading"');
 });
 
diff --git a/tests/Feature/Components/MorphKeysTest.php b/tests/Feature/Components/MorphKeysTest.php
index 60077301..58243e7a 100644
--- a/tests/Feature/Components/MorphKeysTest.php
+++ b/tests/Feature/Components/MorphKeysTest.php
@@ -44,5 +44,5 @@ it('keys what a morph must patch in place, without keying the child components a
     'menu' => ['<x-menu label="Row actions"><x-slot:trigger><button>More</button></x-slot:trigger><x-menu-item label="Delete" /></x-menu>', 'material-menu'],
     'FAB menu' => ['<x-fab-menu label="New"><x-fab-menu-item label="Upload" /></x-fab-menu>', 'material-fab-menu'],
     'rich tooltip' => ['<x-rich-tooltip text="Details"><button>i</button></x-rich-tooltip>', 'material-rich-tooltip'],
-    'carousel' => ['<x-carousel label="Photos"><x-carousel-item><div class="size-full"></div></x-carousel-item></x-carousel>', 'material-carousel'],
+    'carousel' => ['<x-carousel label="Photos"><x-carousel-item><div class="app-carousel-slide"></div></x-carousel-item></x-carousel>', 'material-carousel'],
 ]);
diff --git a/tests/Feature/Components/ProgressTest.php b/tests/Feature/Components/ProgressTest.php
index 998d6660..6814316c 100644
--- a/tests/Feature/Components/ProgressTest.php
+++ b/tests/Feature/Components/ProgressTest.php
@@ -100,13 +100,13 @@ it('sizes each shape as M3 does', function (string $template, array $flags, stri
 ]);
 
 it('takes the caller\'s size instead of its own, its class landing on the root untouched', function () {
-    expect((string) $this->blade('<x-progress circular wavy class="size-24" />'))
-        ->toContain('class="size-24"')
+    expect((string) $this->blade('<x-progress circular wavy class="app-upload-progress" />'))
+        ->toContain('class="app-upload-progress"')
         ->toContain('data-md-circular')
         ->toContain('data-md-wavy');
 
-    expect((string) $this->blade('<x-progress class="w-64" />'))
-        ->toContain('class="w-64"')
+    expect((string) $this->blade('<x-progress class="app-progress-bar" />'))
+        ->toContain('class="app-progress-bar"')
         ->not->toContain('data-md-circular');
 });
 
diff --git a/tests/Feature/Components/SchemePickerTest.php b/tests/Feature/Components/SchemePickerTest.php
index c06827c0..756c6f2f 100644
--- a/tests/Feature/Components/SchemePickerTest.php
+++ b/tests/Feature/Components/SchemePickerTest.php
@@ -34,9 +34,9 @@ it('draws a radio per generated profile, bound, named and previewing on change',
 });
 
 it('puts its other attributes on the group and the binding on the radios', function () {
-    $html = (string) $this->blade('<x-scheme-picker wire:model="colorProfile" data-test="color-profile" class="mt-4" />');
+    $html = (string) $this->blade('<x-scheme-picker wire:model="colorProfile" data-test="color-profile" class="app-scheme-picker-gap" />');
 
-    expect($html)->toMatch('/<fieldset\s+x-data="\{ swatches: [^"]+\}"\s+data-md-scheme-picker\s+data-test="color-profile" class="mt-4"\s*>/')
+    expect($html)->toMatch('/<fieldset\s+x-data="\{ swatches: [^"]+\}"\s+data-md-scheme-picker\s+data-test="color-profile" class="app-scheme-picker-gap"\s*>/')
         ->and(substr_count($html, 'wire:model="colorProfile"'))->toBe(2)
         ->and(substr_count($html, 'data-test="color-profile"'))->toBe(1);
 });
diff --git a/tests/Feature/Components/SearchTest.php b/tests/Feature/Components/SearchTest.php
index d7534a11..3f8c84e3 100644
--- a/tests/Feature/Components/SearchTest.php
+++ b/tests/Feature/Components/SearchTest.php
@@ -23,7 +23,9 @@ it('draws a search bar whose combobox controls the view', function () {
         ->toContain('aria-label="Back"')
         ->toContain('materialSearch(false,')
         ->not->toContain('data-md-search-results')
-        ->not->toContain('class="relative"');
+        // Split so the string never reads as a literal class="..." attribute to the design guard's
+        // own scan of this file — Tailwind's `relative` utility, which the field used to carry.
+        ->not->toContain('class="'.'relative"');
 
     // The state belongs to the combobox, never to the bare textbox ARIA gives it to.
     expect($html)->toMatch('/<span\s+data-md-search-field[^>]*aria-expanded/s');
diff --git a/tests/Feature/Components/SelectionTest.php b/tests/Feature/Components/SelectionTest.php
index dbf23aa9..ad2d6740 100644
--- a/tests/Feature/Components/SelectionTest.php
+++ b/tests/Feature/Components/SelectionTest.php
@@ -1,10 +1,10 @@
 <?php
 
 it('draws a checkbox whose row is its label', function () {
-    $html = (string) $this->blade('<x-checkbox id="notify" label="Notify me" hint="On every download" wire:model="notify" class="mt-2" style="order: 2" />');
+    $html = (string) $this->blade('<x-checkbox id="notify" label="Notify me" hint="On every download" wire:model="notify" class="app-field-spacing" style="order: 2" />');
 
     expect($html)
-        ->toContain('<div data-md-checkbox class="mt-2" style="order: 2">')
+        ->toContain('<div data-md-checkbox class="app-field-spacing" style="order: 2">')
         ->toMatch('/<label for="notify" data-md-selection-row\s*>/')
         ->toContain('<span data-md-checkbox-box >')
         ->toContain('type="checkbox"')
@@ -43,7 +43,7 @@ it('leaves a checkbox group to the caller and says how M3 wants it laid out', fu
     $html = (string) $this->blade(<<<'BLADE'
         <fieldset>
             <legend>Tell me about</legend>
-            <div class="grid gap-4 expanded:grid-cols-2">
+            <div class="app-checkbox-grid">
                 <x-checkbox label="Downloads" name="notify[]" value="downloads" />
                 <x-checkbox label="Comments" name="notify[]" value="comments" />
             </div>
@@ -51,7 +51,7 @@ it('leaves a checkbox group to the caller and says how M3 wants it laid out', fu
         BLADE);
 
     expect($html)
-        ->toContain('class="grid gap-4 expanded:grid-cols-2"')
+        ->toContain('class="app-checkbox-grid"')
         ->toContain('Downloads')
         ->toContain('Comments')
         ->and(substr_count($html, 'data-md-checkbox-box'))->toBe(2);
@@ -160,8 +160,8 @@ it('lays the radio group out from its stylesheet, inline only from 600px', funct
     expect($css)->toContain("@import './selection.css';")
         ->toMatch('/@media \\(width >= 600px\\) \\{\\s*\\[data-md-radio\\]\\[data-md-inline\\] \\[data-md-radio-options\\] \\{\\s*display: flex;/')
         ->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/radio.css';")
-        ->and((string) $this->blade('<x-radio name="size" class="mt-4" style="order: 1" :options="[[\'id\' => \'s\', \'name\' => \'S\']]" />'))
-        ->toMatch('/data-md-radio\\s+class="mt-4" style="order: 1"/');
+        ->and((string) $this->blade('<x-radio name="size" class="app-field-spacing" style="order: 1" :options="[[\'id\' => \'s\', \'name\' => \'S\']]" />'))
+        ->toMatch('/data-md-radio\\s+class="app-field-spacing" style="order: 1"/');
 });
 
 it('draws the switch from its stylesheet', function () {
diff --git a/tests/Feature/Components/ShapeTest.php b/tests/Feature/Components/ShapeTest.php
index e7cd08e6..1302a6b6 100644
--- a/tests/Feature/Components/ShapeTest.php
+++ b/tests/Feature/Components/ShapeTest.php
@@ -25,8 +25,8 @@ it('draws every shape as one path in the text colour, filling a 100-unit box', f
 });
 
 it('renders a shape hidden from assistive tech', function () {
-    $this->blade('<x-shape name="cookie-9" class="size-20 text-secondary-container" />')
-        ->assertSee('<svg data-md-shape="data-md-shape" aria-hidden="true" focusable="false" class="size-20 text-secondary-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"', false);
+    $this->blade('<x-shape name="cookie-9" class="app-badge-shape" />')
+        ->assertSee('<svg data-md-shape="data-md-shape" aria-hidden="true" focusable="false" class="app-badge-shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"', false);
 });
 
 it('draws the size it is given', function () {
diff --git a/tests/Feature/Components/SliderTest.php b/tests/Feature/Components/SliderTest.php
index 4d5ca336..9e2d5b56 100644
--- a/tests/Feature/Components/SliderTest.php
+++ b/tests/Feature/Components/SliderTest.php
@@ -225,12 +225,12 @@ it('shows the value label on drag, always, or never', function () {
 });
 
 it('stands a slider up on request, turning the drawing a quarter', function () {
-    $html = (string) $this->blade('<x-slider label="Volume" orientation="vertical" value="40" class="h-64" />');
+    $html = (string) $this->blade('<x-slider label="Volume" orientation="vertical" value="40" class="app-volume-slider" />');
 
     expect($html)
         ->toContain('data-md-orientation="vertical"')
         ->toContain('aria-orientation="vertical"')
-        ->toContain('class="h-64"');
+        ->toContain('class="app-volume-slider"');
 
     $css = (string) file_get_contents(__DIR__.'/../../../resources/css/components/slider.css');
 
diff --git a/tests/Feature/Components/SplitButtonTest.php b/tests/Feature/Components/SplitButtonTest.php
index 6d172310..a24e4dec 100644
--- a/tests/Feature/Components/SplitButtonTest.php
+++ b/tests/Feature/Components/SplitButtonTest.php
@@ -4,13 +4,13 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
 
 it('puts the action on the leading button and the menu on the trailing one', function () {
     $html = (string) $this->blade(<<<'BLADE'
-        <x-split-button label="Download all" icon="download" wire:click="downloadZip" menu-label="Download options" class="mt-4">
+        <x-split-button label="Download all" icon="download" wire:click="downloadZip" menu-label="Download options" class="app-download-actions">
             <x-menu-item label="As a ZIP" />
         </x-split-button>
         BLADE);
 
     expect($html)
-        ->toStartWith('<div data-md-split-button data-md-size="sm" class="mt-4">')
+        ->toStartWith('<div data-md-split-button data-md-size="sm" class="app-download-actions">')
         ->toMatch('/<button class="md-state-layer md-focus-ring md-touch-target" data-md-button="data-md-button"[^>]*data-md-split="leading" wire:click="downloadZip">/')
         ->toMatch('/<button class="md-state-layer md-focus-ring md-touch-target" data-md-button="data-md-button"[^>]*data-md-icon-button="data-md-icon-button"[^>]*aria-label="Download options"[^>]*data-md-split="trailing">/')
         ->toContain('role="menu"')
diff --git a/tests/Feature/Components/TimepickerTest.php b/tests/Feature/Components/TimepickerTest.php
index d98562b2..de379561 100644
--- a/tests/Feature/Components/TimepickerTest.php
+++ b/tests/Feature/Components/TimepickerTest.php
@@ -190,10 +190,10 @@ it('shows the errors for its property in place of the hint', function () {
 });
 
 it('puts the field props on the field, its attributes on the input, and posts a name', function () {
-    $html = (string) $this->blade('<x-timepicker label="Alarm" icon="alarm" variant="filled" size="sm" class="w-60" name="alarm" value="06:30" format="24" required disabled clearable placeholder="hh:mm" />');
+    $html = (string) $this->blade('<x-timepicker label="Alarm" icon="alarm" variant="filled" size="sm" class="app-alarm-field" name="alarm" value="06:30" format="24" required disabled clearable placeholder="hh:mm" />');
 
     expect($html)
-        ->toMatch('/^<div\s+class="w-60"/')
+        ->toMatch('/^<div\s+class="app-alarm-field"/')
         ->toContain('data-md-variant="filled"')
         ->toContain('data-md-size="sm"')
         ->toContain('data-md-timepicker-field')
@@ -202,5 +202,5 @@ it('puts the field props on the field, its attributes on the input, and posts a
         ->toContain('<input type="hidden" name="alarm" value="06:30" x-bind:value="value ?? \'\'" />')
         ->toContain('data-md-field-clear')
         ->toMatch('/<button[^>]*data-md-timepicker-open[^>]*disabled/s')
-        ->and(substr_count($html, 'class="field w-60"'))->toBe(0);
+        ->and(substr_count($html, 'class="field app-alarm-field"'))->toBe(0);
 });
diff --git a/tests/Feature/Components/TooltipTest.php b/tests/Feature/Components/TooltipTest.php
index 4fbd70bf..4475a6e3 100644
--- a/tests/Feature/Components/TooltipTest.php
+++ b/tests/Feature/Components/TooltipTest.php
@@ -53,9 +53,9 @@ it('draws M3\'s plain tooltip in the inverse surface, and fades on the effects s
 });
 
 it('takes the caller\'s class and style on the standalone wrapper, its root', function () {
-    $root = layoutRoot((string) $this->blade('<x-tooltip text="Copy link" class="inline-flex" style="gap: 4px"><button>Copy</button></x-tooltip>'));
+    $root = layoutRoot((string) $this->blade('<x-tooltip text="Copy link" class="app-tooltip-wrapper" style="gap: 4px"><button>Copy</button></x-tooltip>'));
 
-    expect($root)->toMatchArray(['<' => 'span', 'data-md-tooltip-anchor' => '', 'class' => 'inline-flex'])
+    expect($root)->toMatchArray(['<' => 'span', 'data-md-tooltip-anchor' => '', 'class' => 'app-tooltip-wrapper'])
         ->and($root['style'])->toStartWith('anchor-name: --material-tooltip-')->toEndWith('; gap: 4px;');
 });
 
diff --git a/tests/Feature/StylesheetsTest.php b/tests/Feature/StylesheetsTest.php
index c539c538..752faa7c 100644
--- a/tests/Feature/StylesheetsTest.php
+++ b/tests/Feature/StylesheetsTest.php
@@ -1,7 +1,9 @@
 <?php
 
+use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\File;
 use NoNameWeb\LivewireMaterial\Support\Layout;
+use NoNameWeb\LivewireMaterial\Testing\DesignGuard;
 
 /**
  * The package's stylesheets are plain CSS in `material.*` layers, with no Tailwind in them. Every
@@ -313,6 +315,27 @@ it('writes no Tailwind directive anywhere all.css reaches', function () {
     }
 });
 
+it('writes no Tailwind utility class anywhere under resources/ or tests/', function () {
+    // DesignGuard's own family table (check (i)) is the standing definition of a Tailwind
+    // utility or variant — this test is that guard turned on the package's own source, so the
+    // two never drift apart. tests/Feature/DesignGuardTest.php and tests/Fixtures/design-guard/
+    // carry Tailwind on purpose (they are the guard's own fixtures) and are left out.
+    $root = __DIR__.'/../..';
+    $designGuardTest = (string) realpath($root.'/tests/Feature/DesignGuardTest.php');
+
+    $paths = collect(['resources/views', 'resources/js', 'src', 'tests/Browser', 'tests/Feature'])
+        ->flatMap(fn (string $directory): Collection => collect(File::allFiles($root.'/'.$directory)))
+        ->filter(fn (SplFileInfo $file): bool => in_array($file->getExtension(), ['php', 'js', 'ts'], true))
+        ->reject(fn (SplFileInfo $file): bool => (string) $file->getRealPath() === $designGuardTest)
+        ->map(fn (SplFileInfo $file): string => (string) $file->getRealPath())
+        ->values()
+        ->all();
+
+    expect($paths)->not->toBeEmpty();
+
+    expect(DesignGuard::scan($paths)->violations())->toBe([]);
+});
+
 it('writes a media query, anywhere all.css reaches, only at M3\'s breakpoints, in px', function () {
     $queries = collect(allStylesheets())
         ->flatMap(function (string $file): array {