Put Tailwind's preflight below the material layers in the Workbench
Plan step 36. A component rewritten without Tailwind keeps its padding,
margins and borders in material.components, and Tailwind's preflight
(* { padding: 0; margin: 0; border: 0 solid }) in its base layer, named
after material, undid every one of them. The Workbench now names theme and
base before importing the foundation, so the preflight — the same reset
foundation/reset.css carries — sits below the package, while Tailwind's
components and utilities stay above it and a caller's utility still wins.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Opus 5
parent
6be9f35c98
commit
d7653aa6d0
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user