noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Import the components in the documented installation

Browse Source 
Plan step 37 review. Removing material.css left README.md, the
development skill, UPGRADE.md and the tailwind.css and foundation.css
headers telling an application to import foundation.css, tailwindcss and
tailwind.css in its place. material.css was also what brought layout.css
and components.css, so that install rendered every component unstyled,
and without a layer statement Tailwind's preflight would have outranked
the package's layers.

The skill's snippet is now the Tailwind-free one 2.0.0 ends with: the
foundation, then the stylesheet of each component the views render, or
all.css. README.md, whose layout and prose still assume Tailwind, shows
all.css in its own entry and Tailwind in a second, both opening with the
layer statement, the shape the Workbench now builds; the skill and
UPGRADE.md describe that interim in a sentence.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 03:15:05 +02:00
co-authored by Claude Opus 5
parent 5e7c8b2b58
commit 3365730610
5 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/foundation.css
Vendored
+3 -2
View File
@@ -24,8 +24,9 @@
* (`button { … }`) restyles the components too. foundation/hidden.css keeps its two `!important`
* rules outside the layers, so `hidden` and `x-cloak` hide an element whatever sets its display.
*
* Until the components leave Tailwind, an application still building it imports this file before
* `@import 'tailwindcss'`, so the `material` layers are declared first and sit below Tailwind's.
* An application still building Tailwind keeps it in a separate entry and opens both entries with
* `@layer properties, theme, base, material, components, utilities;`, so the `material` layers sit
* above Tailwind's preflight and below its utilities (resources/css/tailwind.css's header).
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
resources/css/tailwind.css
+7 -5
View File
@@ -5,15 +5,17 @@
* until it drops Tailwind. Every component stylesheet is plain CSS (plan step 36) and needs
* nothing from here. This file goes when the last Tailwind class leaves (step 39).
*
* It carries no tokens, so it can sit behind the foundation without declaring them twice — the
* Workbench imports it that way, after Tailwind:
* It carries no tokens, so it builds beside the package's CSS without declaring them twice, in an
* entry of its own — `@tailwindcss/vite` inlines the imports of an entry that uses Tailwind without
* deduplicating them, so the package's stylesheets stay in another (the Workbench's package.css).
* The Workbench's Tailwind entry, like an application's:
*
* @import '../../../resources/css/foundation.css';
* @layer properties, theme, base, material, components, utilities;
* @import 'tailwindcss' source(none);
* @import '../../../resources/css/tailwind.css';
*
* An application still building Tailwind imports the same way, `foundation.css` then `tailwindcss`
* then this file, in place of the 1.x `material.css` shortcut, which is gone.
* with the same layer statement at the top of the package's entry. It replaces nothing of the 1.x
* `material.css` shortcut, which is gone: the components come from `all.css` or their own files.
*/
@import './tokens/theme.css';