Write the installation docs Tailwind-free
Plan step 39 (part 6). README's Requirements, Installation and Stylesheet-and-script sections drop Tailwind CSS 4, the second Vite entry, @source and the Tailwind-replaces-utilities framing; the plain CSS entry keeps the layer statement (matching every package stylesheet), and the Layout example's <body> loses classes foundation/base.css already applies globally (surface, on-surface, the brand typeface) since Tailwind is no longer there to write them. UPGRADE.md §6 gets the same Tailwind-free setup in place of the interim two-entry note step 37 left. The development skill's install snippet was already Tailwind-free; its one stale paragraph describing a second Tailwind entry is deleted (fixed with the build in the "Delete Tailwind's half" commit). DesignGuard's own Tailwind-detection docs stay: applications can still carry leftover Tailwind classes for the guard to catch, which is unrelated to the build. 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
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
7e95b4a91b
commit
513e344912
@@ -1,6 +1,6 @@
|
||||
# Livewire Material
|
||||
|
||||
Material 3 Expressive components for Laravel and Livewire, built on Tailwind CSS 4.
|
||||
Material 3 Expressive components for Laravel and Livewire, in plain CSS.
|
||||
|
||||
- Anonymous Blade components for the current M3 Expressive catalogue: buttons and FABs, menus, chips, text fields, selection controls, sliders, pickers, dialogs and sheets, lists, cards, carousels, progress and loading indicators, snackbars, tabs, app bars, toolbars, navigation bars and rails, an adaptive scaffold, the layout components (panes, list-detail, supporting pane, feed), data tables and pagination.
|
||||
- A colour scheme generated from one seed colour with Google's colour science (`php artisan material:scheme`), light and dark, and a theme that is chosen before the first paint.
|
||||
@@ -12,7 +12,7 @@ No JavaScript libraries beyond the Alpine that ships with Livewire. Browsers: Ch
|
||||
|
||||
## Requirements
|
||||
|
||||
PHP 8.4+, Laravel 13, Livewire 4, Tailwind CSS 4 with Vite, and Node (for `material:scheme`).
|
||||
PHP 8.4+, Laravel 13, Livewire 4, Vite, and Node (for `material:scheme`).
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -27,27 +27,15 @@ 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.
|
||||
The package's stylesheets are plain CSS, no build step of its own and no Tailwind anywhere in the stack. `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 */
|
||||
@layer properties, theme, base, material, components, utilities;
|
||||
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
|
||||
@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';
|
||||
|
||||
@source '../../vendor/nonameweb/livewire-material/resources/views';
|
||||
@source '../../vendor/nonameweb/livewire-material/src';
|
||||
```
|
||||
|
||||
```js
|
||||
// resources/js/app.js
|
||||
import '../../vendor/nonameweb/livewire-material/resources/js/material.js'
|
||||
@@ -55,7 +43,7 @@ import '../../vendor/nonameweb/livewire-material/resources/js/material.js'
|
||||
|
||||
Do not install Alpine separately; Livewire provides it.
|
||||
|
||||
Importing the package's CSS replaces parts of Tailwind's theme with M3's, so some default utilities no longer compile. Breakpoints are the most visible: they are M3's window size classes and only those — `medium:` 600px, `expanded:` 840px, `large:` 1200px and `extra-large:` 1600px, with `max-medium:` and friends for "below", compact being everything under `medium`. Tailwind's `sm:`…`2xl:` are cleared, so an `sm:grid-cols-2` left over from another project compiles to nothing; rewrite it as `medium:grid-cols-2`. The same goes for the default radius, shadow, text-size, weight, leading, tracking and easing scales, which the M3 sets (`rounded-corner-*`, `shadow-elevation-*`, `type-*`, `ease-spatial-*`) replace. Scripts that need a window size class import `from()` / `upTo()` from the package's `resources/js/breakpoints.js` rather than writing their own media query.
|
||||
An application writes no utility layer of its own: layout components (`<x-scaffold>`, `<x-pane>`, `<x-stack>`, `<x-row>`, `<x-grid>`, the canonical layouts) take M3's spacing tokens and breakpoints as props, a small set of `md-type-*` and `md-ink-*` classes covers text on plain elements, and `--md-sys-*` custom properties serve the rest of an application's own stylesheet. Breakpoints are M3's window size classes and only those — compact below `medium` (600px), then `expanded` (840px), `large` (1200px) and `extra-large` (1600px) — written as literal range media queries (`@media (width >= 840px)`) in the package's CSS; a script asks `resources/js/breakpoints.js` (`from()` / `upTo()`) for the same numbers rather than writing its own query.
|
||||
|
||||
### Layout
|
||||
|
||||
@@ -68,9 +56,9 @@ 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/css/utilities.css', 'resources/js/app.js'])
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
</head>
|
||||
<body class="bg-surface font-sans text-on-surface antialiased">
|
||||
<body>
|
||||
{{ $slot }}
|
||||
<x-toast />
|
||||
</body>
|
||||
|
||||
+11
-8
@@ -124,15 +124,18 @@ over a colour, use the role directly.
|
||||
`heights` or `snap` is set; without stops it behaves as before.
|
||||
- A chip set with `scroll` shows a scroll button over each overflowing edge on fine pointers.
|
||||
|
||||
### 6. `material.css` is gone
|
||||
### 6. `material.css` is gone, and so is Tailwind
|
||||
|
||||
The 1.x single-import shortcut no longer exists. The package's CSS is plain now and goes in an
|
||||
entry without Tailwind: `resources/css/all.css` for everything, or `foundation.css` first and then
|
||||
the stylesheet of each component the views render. An application whose views still write Tailwind
|
||||
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`).
|
||||
The 1.x single-import shortcut no longer exists, and Tailwind has left the whole stack — the
|
||||
package, its showcase, error pages and Workbench build carry none, and an application drops it
|
||||
too. The package's CSS is plain, no build step of its own, in one entry:
|
||||
`resources/css/all.css` for everything, or `foundation.css` first and then the stylesheet of each
|
||||
component the views render, opening with the layer statement every package stylesheet does
|
||||
(see Installation in `README.md`). An application's views write no utility layer of their own
|
||||
either: layout components (`<x-scaffold>`, `<x-pane>`, `<x-stack>`, `<x-row>`, `<x-grid>`, the
|
||||
canonical layouts) take M3's spacing tokens and breakpoints as props, a small set of `md-type-*`
|
||||
and `md-ink-*` classes covers text on plain elements, and `--md-sys-*` custom properties serve the
|
||||
rest of an application's own stylesheet.
|
||||
|
||||
### 7. New in 2.0.0
|
||||
|
||||
|
||||
Reference in New Issue
Block a user