Rank the material layers above Tailwind's preflight in the Workbench

A rewritten component's padding, margin and border sit in
material.components, which the Workbench declared below all of
Tailwind's layers, so preflight's universal reset beat them. The entry's
layer statement now puts material between base and components (plan
step 36): the material reset already carries preflight, and every
utility still outranks the package.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

tests/Feature/StylesheetsTest.php

@@ -412,9 +412,13 @@ 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 between Tailwind\'s preflight and its utilities', function () {
     $app = stylesheetWithoutComments(File::get(__DIR__.'/../../workbench/resources/css/app.css'));
 
+    // The first statement orders the layers: above preflight, whose `* { padding: 0 }` would
+    // otherwise beat a rewritten component's padding, and below the utilities.
+    expect(trim($app))->toStartWith('@layer theme, base, material, components, utilities;');
+
     $foundation = strpos($app, "@import '../../../resources/css/foundation.css';");
     $tailwind = strpos($app, "@import 'tailwindcss'");
     $components = strpos($app, "@import '../../../resources/css/tailwind.css';");

workbench/resources/css/app.css

@@ -1,7 +1,10 @@
 /* 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
+   in docs/ are not scanned for class names. The layer statement puts the `material` layers above
-   `material` layers are declared first and sit below Tailwind's; tailwind.css brings the
+   Tailwind's preflight (`base`) and below its `components` and `utilities`: a rewritten component's
-   components still written for Tailwind, without declaring the tokens a second time. */
+   padding, margin and border would otherwise lose to preflight's `* { padding: 0 }`, which the
+   material reset already carries, while every utility still outranks the package. tailwind.css
+   brings the components still written for Tailwind, without declaring the tokens a second time. */
+@layer theme, base, material, components, utilities;
 @import '../../../resources/css/foundation.css';
 @import '../../../resources/css/layout.css';
 @import '../../../resources/css/components.css';