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
README.md
+13 -3
View File
@@ -27,12 +27,22 @@ composer require nonameweb/livewire-material
The application's build imports from `vendor/`, so Composer packages must be installed before `npm run build` — in a Dockerfile, copy `composer.json`, run `composer install`, then build the assets. The application's build imports from `vendor/`, so Composer packages must be installed before `npm run build` — in a Dockerfile, copy `composer.json`, run `composer install`, then build the assets.
The package's stylesheets are plain CSS. `all.css` brings the foundation and every component; an application can instead import `foundation.css` first and then the stylesheet of each component its views render (`resources/css/components/button.css`, `resources/css/layout/scaffold.css`, …), since each imports the stylesheets of the components it draws and Vite keeps a file several of them import once.
```css ```css
/* resources/css/app.css */ /* resources/css/app.css */
@import '../../vendor/nonameweb/livewire-material/resources/css/foundation.css'; @layer properties, theme, base, material, components, utilities;
@import '../../vendor/nonameweb/livewire-material/resources/css/all.css';
@import './material-scheme.css';
```
Tailwind, for the classes in the application's own views, goes in an entry of its own — `@tailwindcss/vite` inlines the imports of an entry that uses Tailwind without that deduplication — with the same layer statement at the top, which keeps the package's layers above Tailwind's preflight and below its utilities. Add it to the `laravel()` plugin's `input` in `vite.config.js`:
```css
/* resources/css/utilities.css */
@layer properties, theme, base, material, components, utilities;
@import 'tailwindcss'; @import 'tailwindcss';
@import '../../vendor/nonameweb/livewire-material/resources/css/tailwind.css'; @import '../../vendor/nonameweb/livewire-material/resources/css/tailwind.css';
@import './material-scheme.css';
@source '../../vendor/nonameweb/livewire-material/resources/views'; @source '../../vendor/nonameweb/livewire-material/resources/views';
@source '../../vendor/nonameweb/livewire-material/src'; @source '../../vendor/nonameweb/livewire-material/src';
@@ -58,7 +68,7 @@ The theme script goes in `<head>`, before `@vite`, so the page paints in the vis
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<x-theme-script /> <x-theme-script />
@vite(['resources/css/app.css', 'resources/js/app.js']) @vite(['resources/css/app.css', 'resources/css/utilities.css', 'resources/js/app.js'])
</head> </head>
<body class="bg-surface font-sans text-on-surface antialiased"> <body class="bg-surface font-sans text-on-surface antialiased">
{{ $slot }} {{ $slot }}
UPGRADE.md
+7 -4
View File
@@ -126,10 +126,13 @@ over a colour, use the role directly.
### 6. `material.css` is gone ### 6. `material.css` is gone
The 1.x single-import shortcut no longer exists. An application still building Tailwind imports The 1.x single-import shortcut no longer exists. The package's CSS is plain now and goes in an
`foundation.css`, then `tailwindcss`, then `tailwind.css` in its place (see Installation in entry without Tailwind: `resources/css/all.css` for everything, or `foundation.css` first and then
`README.md`); one that has already left Tailwind imports `foundation.css` plus the stylesheet of the stylesheet of each component the views render. An application whose views still write Tailwind
each component its views render, or `resources/css/all.css` for everything at once. classes builds Tailwind and `tailwind.css` in a second entry, never beside the package's imports,
since `@tailwindcss/vite` would repeat every shared stylesheet; both entries open with
`@layer properties, theme, base, material, components, utilities;` (see Installation in
`README.md`).
### 7. New in 2.0.0 ### 7. New in 2.0.0
resources/boost/skills/livewire-material-development/SKILL.md
+8 -5
View File
@@ -16,13 +16,16 @@ Composer packages must be installed before the Vite build (in Dockerfiles and CI
```css ```css
/* resources/css/app.css */ /* resources/css/app.css */
@import '../../vendor/nonameweb/livewire-material/resources/css/foundation.css'; @import '../../vendor/nonameweb/livewire-material/resources/css/foundation.css';
@import 'tailwindcss'; @import '../../vendor/nonameweb/livewire-material/resources/css/layout/scaffold.css';
@import '../../vendor/nonameweb/livewire-material/resources/css/tailwind.css'; @import '../../vendor/nonameweb/livewire-material/resources/css/components/button.css';
@import '../../vendor/nonameweb/livewire-material/resources/css/components/input.css';
@import './material-scheme.css'; @import './material-scheme.css';
@source '../../vendor/nonameweb/livewire-material/resources/views';
@source '../../vendor/nonameweb/livewire-material/src';
``` ```
`foundation.css` is required and first; then one stylesheet per component the views render, under `resources/css/components/` or `resources/css/layout/`, named like the component (`<x-tab>` is drawn by `tabs.css`, and `<x-theme-script>` needs none). Each imports the stylesheets of the components it draws (a split button's button and menu), and Vite keeps a file several of them import once. `resources/css/all.css` stands for the foundation and every component at once. A component rendered without its stylesheet is unstyled, so add the import with the tag.
While the application's own views still write Tailwind classes, Tailwind goes in a second entry, never beside these imports (`@tailwindcss/vite` would repeat every shared stylesheet): `@import 'tailwindcss'`, `resources/css/tailwind.css` and the two `@source` lines for `resources/views` and `src`, with `@layer properties, theme, base, material, components, utilities;` at the top of both entries.
```js ```js
// resources/js/app.js // resources/js/app.js
import '../../vendor/nonameweb/livewire-material/resources/js/material.js' import '../../vendor/nonameweb/livewire-material/resources/js/material.js'
@@ -89,7 +92,7 @@ Scheme::resolveProfileUsing(fn (): ?string => Setting::get('color_profile'));
## Tokens ## Tokens
2.0.0's vocabulary is plain CSS, without Tailwind. `resources/css/foundation.css` is the one required import, first in the entry (while an application still builds Tailwind: before `@import 'tailwindcss'`, with `resources/css/tailwind.css` after it — 1.x's `material.css` shortcut is gone). It declares the layer order `material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility`, so an application's unlayered CSS beats every package rule, and `hidden` or `x-cloak` hides any element. It brings the reset, every `--md-sys-*` token (spacing included: `--md-sys-measurement-space25` … `space900`, 2–72px), and `md-state-layer`, `md-focus-ring`, `md-touch-target`, `md-link`. Text on plain elements takes the fixed text classes of `resources/css/text.css` and nothing else: `md-type-{display|headline|title|body|label}-{lg|md|sm}` and `md-type-emphasized-…`; `md-ink` (on-surface), `md-ink-variant`, `md-ink-quiet`, `md-ink-primary`, `md-ink-error`, `md-ink-success`, `md-ink-warning`, `md-ink-info`, `md-ink-inverse`; `md-text-start|center|end`, `md-truncate`, `md-line-clamp-2|3`, `md-nowrap`, `md-tabular`, `md-visually-hidden`. Every component is plain CSS now; the Tailwind names below stay for the showcase and an application's own views, until Tailwind itself leaves the package. 2.0.0's vocabulary is plain CSS, without Tailwind. `resources/css/foundation.css` is the one required import, first in the entry, followed by the stylesheets of the components the views render (see Setup; 1.x's `material.css` shortcut is gone). It declares the layer order `material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility`, so an application's unlayered CSS beats every package rule, and `hidden` or `x-cloak` hides any element. It brings the reset, every `--md-sys-*` token (spacing included: `--md-sys-measurement-space25` … `space900`, 2–72px), and `md-state-layer`, `md-focus-ring`, `md-touch-target`, `md-link`. Text on plain elements takes the fixed text classes of `resources/css/text.css` and nothing else: `md-type-{display|headline|title|body|label}-{lg|md|sm}` and `md-type-emphasized-…`; `md-ink` (on-surface), `md-ink-variant`, `md-ink-quiet`, `md-ink-primary`, `md-ink-error`, `md-ink-success`, `md-ink-warning`, `md-ink-info`, `md-ink-inverse`; `md-text-start|center|end`, `md-truncate`, `md-line-clamp-2|3`, `md-nowrap`, `md-tabular`, `md-visually-hidden`. Every component is plain CSS now; the Tailwind names below stay for the showcase and an application's own views, until Tailwind itself leaves the package.
Tailwind's default palette is cleared: every colour class names an M3 role. `text-red-600`, `bg-base-200` or `text-gray-500` compile to nothing. The rules behind the names below — which role, surface container, corner, type style, elevation level, motion spring, state and window size class to use, and M3's don'ts — are the `material-3` guideline (always on) and the `material-3-design` skill (the tables and Google's source pages); activate that skill before designing a screen. Tailwind's default palette is cleared: every colour class names an M3 role. `text-red-600`, `bg-base-200` or `text-gray-500` compile to nothing. The rules behind the names below — which role, surface container, corner, type style, elevation level, motion spring, state and window size class to use, and M3's don'ts — are the `material-3` guideline (always on) and the `material-3-design` skill (the tables and Google's source pages); activate that skill before designing a screen.
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` * (`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. * 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 * An application still building Tailwind keeps it in a separate entry and opens both entries with
* `@import 'tailwindcss'`, so the `material` layers are declared first and sit below Tailwind's. * `@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; @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 * 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). * 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 * It carries no tokens, so it builds beside the package's CSS without declaring them twice, in an
* Workbench imports it that way, after Tailwind: * 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 'tailwindcss' source(none);
* @import '../../../resources/css/tailwind.css'; * @import '../../../resources/css/tailwind.css';
* *
* An application still building Tailwind imports the same way, `foundation.css` then `tailwindcss` * with the same layer statement at the top of the package's entry. It replaces nothing of the 1.x
* then this file, in place of the 1.x `material.css` shortcut, which is gone. * `material.css` shortcut, which is gone: the components come from `all.css` or their own files.
*/ */
@import './tokens/theme.css'; @import './tokens/theme.css';