Andreas Reinhold / reiniandClaude Opus 5
1075305a9c
Plan step 33. The Workbench imports foundation.css ahead of @import 'tailwindcss', so the material layers are declared first and sit below Tailwind's, then tailwind.css: the theme, the token utilities and the component stylesheets still written for Tailwind, with no tokens, so nothing is declared twice. material.css keeps working for 1.x-style imports after Tailwind by bringing the tokens, the hiding rules and tailwind.css, and never the reset, which would outrank Tailwind's utilities from there. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
35 lines
1.3 KiB
CSS
35 lines
1.3 KiB
CSS
/*
|
|
* Livewire Material's Tailwind half: the theme that turns the tokens into utilities, the token
|
|
* utilities, and the component stylesheets still written for Tailwind (`@utility`, `@variant`,
|
|
* `@layer components`). It goes when the last component leaves Tailwind.
|
|
*
|
|
* It carries no tokens, so it can sit behind the foundation without declaring them twice — the
|
|
* Workbench imports it that way, after Tailwind:
|
|
*
|
|
* @import '../../../resources/css/foundation.css';
|
|
* @import 'tailwindcss' source(none);
|
|
* @import '../../../resources/css/tailwind.css';
|
|
*
|
|
* An application on 1.x-style imports keeps importing material.css, which brings the tokens and
|
|
* this file together.
|
|
*/
|
|
|
|
@import './tokens/theme.css';
|
|
@import './tokens/utilities.css';
|
|
@import './components/actions.css';
|
|
@import './components/groups.css';
|
|
@import './components/list.css';
|
|
@import './components/collapse.css';
|
|
@import './components/dialog.css';
|
|
@import './components/field.css';
|
|
@import './components/menu.css';
|
|
@import './components/selection.css';
|
|
@import './components/search.css';
|
|
@import './components/datepicker.css';
|
|
@import './components/timepicker.css';
|
|
@import './components/tabs.css';
|
|
@import './components/app-bar.css';
|
|
@import './components/navigation.css';
|
|
@import './components/toolbar.css';
|
|
@import './components/table.css';
|