The plain-CSS layer: the reset, the tokens, the Ledger and Harbor presets, every component's styles and two utilities, in cascade layers. Tailwind is not required.
npm install @artisanpack-ui/css
@import '@artisanpack-ui/css';
Exports
| Import | What it is |
|---|---|
@artisanpack-ui/css |
Everything |
@artisanpack-ui/css/headless |
Everything except the component styles. See Headless |
@artisanpack-ui/css/tailwind |
Optional Tailwind v4 utilities from the tokens. See Tailwind Utilities |
@artisanpack-ui/css/assets.php |
The entry points as a PHP array, used by Livewire UI Components |
Layers
@layer apui.reset, apui.tokens, apui.components, apui.utilities;
Unlayered CSS you write wins over all four without !important. If your CSS is in a layer of its own, order that layer after apui. See Cascade Layers.
Utilities
| Class | Does |
|---|---|
apui-sr-only |
Visually hidden, still read by screen readers |
apui-focus-ring |
The design system's focus ring on :focus-visible |
Livewire without a bundler
Livewire UI Components ships this package's compiled CSS and loads it with @artisanpackStyles. See Without a Bundler.