From 50431181a705f86805d24880024af41eef6e3fdc Mon Sep 17 00:00:00 2001
From: Andreas Reinhold / reini <reini@kadenpartner.ch>
Date: Mon, 14 Sep 2026 13:56:44 +0200
Subject: [PATCH] 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 | 6 +++++-
 workbench/resources/css/app.css   | 9 ++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/tests/Feature/StylesheetsTest.php b/tests/Feature/StylesheetsTest.php
index 2d6df214..81cefd1a 100644
--- a/tests/Feature/StylesheetsTest.php
+++ b/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';");
diff --git a/workbench/resources/css/app.css b/workbench/resources/css/app.css
index b0d5c678..9e7d115d 100644
--- a/workbench/resources/css/app.css
+++ b/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
-   `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. The layer statement puts the `material` layers above
+   Tailwind's preflight (`base`) and below its `components` and `utilities`: a rewritten component's
+   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';