diff --git a/tests/Feature/StylesheetsTest.php b/tests/Feature/StylesheetsTest.php
index 2d6df214..9e7e4d12 100644
--- a/tests/Feature/StylesheetsTest.php
+++ b/tests/Feature/StylesheetsTest.php
@@ -412,14 +412,18 @@ it('draws the interaction classes as the utilities the Tailwind components still
         ->and(stylesheetBlock($interaction, '.md-touch-target'))->toContain('min-width: var(--md-sys-measurement-space600);');
 });
 
-it('declares the material layers in the Workbench before Tailwind\'s', function () {
+it('declares the material layers in the Workbench above Tailwind\'s preflight and below its utilities', function () {
     $app = stylesheetWithoutComments(File::get(__DIR__.'/../../workbench/resources/css/app.css'));
 
     $foundation = strpos($app, "@import '../../../resources/css/foundation.css';");
     $tailwind = strpos($app, "@import 'tailwindcss'");
     $components = strpos($app, "@import '../../../resources/css/tailwind.css';");
 
-    expect($foundation)->toBeInt()
+    // Tailwind's theme and preflight are named before the material layers, below them: the
+    // preflight is the foundation's own reset, and above `material` it would zero every
+    // component's padding. Its components and utilities come after, above the package.
+    expect(stylesheetItems($app)[0]['statement'] ?? null)->toBe('@layer theme, base;')
+        ->and($foundation)->toBeInt()
         ->and($tailwind)->toBeGreaterThan($foundation)
         ->and($components)->toBeGreaterThan($tailwind)
         // material.css would declare the tokens a second time.
diff --git a/workbench/resources/css/app.css b/workbench/resources/css/app.css
index b0d5c678..08204aee 100644
--- a/workbench/resources/css/app.css
+++ b/workbench/resources/css/app.css
@@ -1,7 +1,14 @@
 /* The Workbench builds the package as an application would, with explicit sources so the plans
-   in docs/ are not scanned for class names. The foundation comes before Tailwind, so the
-   `material` layers are declared first and sit below Tailwind's; tailwind.css brings the
-   components still written for Tailwind, without declaring the tokens a second time. */
+   in docs/ are not scanned for class names.
+
+   Tailwind's theme and base layers are named first, then the foundation's `material` layers, then
+   Tailwind's components and utilities: a caller's utility still outranks every package rule, and
+   Tailwind's preflight sits below the package. Its preflight is the reset the foundation already
+   carries rule for rule (foundation/reset.css), and above `material` its `* { padding: 0 }` would
+   undo the padding and margins of every component rewritten without Tailwind. tailwind.css brings
+   the components still written for Tailwind, without declaring the tokens a second time. */
+@layer theme, base;
+
 @import '../../../resources/css/foundation.css';
 @import '../../../resources/css/layout.css';
 @import '../../../resources/css/components.css';