Integrations
Set up Master CSS in Lit
Guide to setting up Master CSS in your Lit project.
Create a Lit project
If you don't have a Lit project, create one first.
npm create vite@latest my-app -- --template lit-tscd my-appAdd Master CSS
Run the installer from the Lit project root. Lit uses the default Vite runtime mode so classes can be generated as components render.
npm create @master/css@rc -- --framework lit --yesUse the runtime decorator
Master CSS styles inside a Lit shadow root need a runtime attached to that root. The installer adds this to the standard src/my-element.ts file when it exists.
import { LitElement, html } from 'lit'import { customElement } from 'lit/decorators.js'import { cssRuntime } from '@master/css-runtime'import type CSSRuntime from '@master/css-runtime'import manifest from 'virtual:master-css-manifest'import emittedGlobals from 'virtual:master-css-emitted-globals'@customElement('my-element')@cssRuntime({ manifest, emittedGlobals })export class MyElement extends LitElement { cssRuntime?: CSSRuntime render() { return html` <button class="inline-flex items-center gap:xs px:md py:xs r:lg bg:blue fg:white"> Hello Lit </button> ` }}Start dev server
Run the command to start the Vite dev server.
npm run devStart using Master CSS
Now style elements inside your Lit templates using Master CSS syntax.
localhost:5173