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 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
/* 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 '../../vendor/nonameweb/livewire-material/resources/css/tailwind.css';
@import './material-scheme.css';
@source '../../vendor/nonameweb/livewire-material/resources/views';
@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 name="viewport" content="width=device-width, initial-scale=1" />
<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>
<body class="bg-surface font-sans text-on-surface antialiased">
{{ $slot }}