Install

npm i spaper papiercss tailwindcss

Import papiercss

@source is relative to the CSS file. This scans the installed package so Tailwind generates the utility classes used inside the components.

@import "papiercss/fonts.css"; /* optional */
@import "tailwindcss";
@import "papiercss";
@source "../node_modules/spaper";

Usage

<script>
  import { Button } from 'spaper';
</script>

<Button>Click me</Button>

Override CSS variables

PapierCSS tokens can be set per component with CSS custom properties as attributes. Values apply to that instance (and its children).

The full list of variables per component can be found in the PapierCSS docs.

<Spinner --paper-spinner-duration="2s" />
<Hero --paper-hero-margin-bottom="0" />

For regular theming, see Theming.