Stop loading Tailwind on the showcase page

Plan step 38 (last batch): every showcase view is now rewritten
without Tailwind, so the showcase's layout keeps only the JavaScript
entries of the application's configured Vite list (Livewire, Alpine)
before its own bundle link, instead of the whole array — its own CSS
already comes solely from ShowcaseAssetController's bundle
(Stylesheets::bundle() of all.css, showcase.css and the scheme), and
linking the application's build too meant the package's own CSS
(all.css) loaded twice on every showcase page (once through the
Workbench's package.css entry, once through the showcase's own
bundle), besides pulling in Tailwind's CSS for nothing. ErrorPage::
assets() keeps passing the whole configured list: the error pages have
no bundle of their own to fall back on, and step 40 is where their
fallback is redesigned. The config's own comment says so.

The frame's temporary visually-hidden <h2> rule goes too — it existed
only because the first batch could not reach into the still-Tailwind
sections/*.blade.php partials it @include's; every section now
carries its own real `class="md-type-headline-md"` heading, so the
structural rule that quietly hid all of them is dead weight.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 05:33:33 +02:00
co-authored by Claude Sonnet 5
parent ab2fcdb0d3
commit 42009f3b0c
3 changed files with 17 additions and 30 deletions
+10 -7
View File
@@ -192,13 +192,16 @@ return [
|
| Every component in every variant, rendered in the application's own
| scheme. Off unless the application runs locally. 'vite' names the
| application's own entry points, for its JavaScript (Livewire, Alpine);
| the error pages load them too, showcase or not. A CSS entry here is
| temporary — the showcase's own chrome no longer needs one (it serves
| its own bundle, ShowcaseAssetController), but the section views
| (resources/views/showcase/sections/*) are still Tailwind until step
| 38's last batch removes it, and an application without Tailwind of
| its own may still want one here for the error pages' build.
| application's own entry points: its JavaScript (Livewire, Alpine) and,
| for an application that still builds one of its own, a CSS entry. The
| showcase page draws its CSS only from its own bundle
| (ShowcaseAssetController serves Stylesheets::bundle() of all.css,
| showcase.css and the scheme) — nothing on it needs the application's
| build, Tailwind included — so the showcase's layout keeps only the
| entries here that are not a stylesheet before passing the rest to
| @vite(), and links its own bundle after them. The error pages have no
| bundle of their own to fall back on, so ErrorPage::assets() still
| passes this whole list, CSS included, to @vite().
|
*/
-16
View File
@@ -105,22 +105,6 @@
color: var(--md-sys-color-on-secondary-container);
}
/* Each `<section>`'s own `<h2>`, inside a still-Tailwind sections/*.blade.php partial this
batch does not rewrite: the page's own `<h1>` already names the section, so the heading
inside it is for assistive technology only — the same declarations as `md-visually-hidden`
(text.css), applied by structure because a class cannot reach into an @include'd partial. */
[data-md-showcase-sections] > section > h2 {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
}
/* An example: scroll-margin so a hash link (the search result, the "next section" nav) lands
clear of the sticky app bar above it. */
[data-md-showcase-example] {
+7 -7
View File
@@ -38,13 +38,13 @@
<x-livewire-material::theme-script />
{{-- Kept only for the section views (resources/views/showcase/sections/*), still Tailwind
until the next batches of step 38, and for the Livewire/Alpine runtime; its CSS entry
goes with them. It opens the document's first @layer statement (Workbench package.css's
header explains the trick), which the link below must follow, not precede — first would
re-anchor `material` ahead of Tailwind's own layers and let its preflight's `padding: 0`
beat the search view's padding-top. --}}
@vite(config('livewire-material.showcase.vite'))
{{-- The application's own entries, JavaScript only (Livewire, Alpine): no showcase view
needs anything Tailwind builds any more, and linking its CSS here would open the
document's first @layer statement (Workbench package.css's header explains the trick)
ahead of the showcase's own bundle below, re-anchoring `material` before Tailwind's
own layers instead of after. config('livewire-material.showcase.vite')'s own comment
says why ErrorPage::assets() still passes the whole array. --}}
@vite(array_filter(config('livewire-material.showcase.vite'), fn (string $entry): bool => ! str_ends_with($entry, '.css')))
@livewireStyles
{{-- The showcase's own chrome: does not depend on the build above. --}}