|
| 1 | +--- |
| 2 | +section: Use With |
| 3 | +title: Lit |
| 4 | +example: with-lit |
| 5 | +excerpt: | |
| 6 | + Using Twind with [Lit](https://lit.dev) |
| 7 | +next: ./with-next.md |
| 8 | +--- |
| 9 | + |
| 10 | +This guide shows how to use [Lit](https://lit.dev) with Twind. |
| 11 | + |
| 12 | +> **Caution** |
| 13 | +> This example is using [Constructable Stylesheet Objects](https://wicg.github.io/construct-stylesheets/) and `DocumentOrShadowRoot.adoptedStyleSheets` which have [limited browser support](https://caniuse.com/mdn-api_document_adoptedstylesheets) at the moment (December 2022). The [Constructible style sheets polyfill](https://github.com/calebdwilliams/construct-style-sheets) offers a solution for all modern browsers and IE 11. |
| 14 | +
|
| 15 | +```js |
| 16 | +import { LitElement, html } from 'lit' |
| 17 | + |
| 18 | +import { twind, cssom, observe } from '@twind/core' |
| 19 | +import config from './twind.config' |
| 20 | + |
| 21 | +// 1. Create separate CSSStyleSheet |
| 22 | +const sheet = cssom(new CSSStyleSheet()) |
| 23 | + |
| 24 | +// 2. Use that to create an own twind instance |
| 25 | +const tw = twind(config, sheet) |
| 26 | + |
| 27 | +export class TwindElement extends LitElement { |
| 28 | + // 3. Apply the same style to each instance of this element |
| 29 | + static override styles = [sheet.target] |
| 30 | + |
| 31 | + // 4a. Observe using "own" tw function |
| 32 | + override firstUpdated(): void { |
| 33 | + observe(tw, this.renderRoot) |
| 34 | + } |
| 35 | + |
| 36 | + override render() { |
| 37 | + return html` |
| 38 | + <main class="h-screen bg-purple-400 flex items-center justify-center"> |
| 39 | + <h1 class="font-bold text(center 5xl white sm:gray-800 md:pink-700)">This is Twind!</h1> |
| 40 | + </main> |
| 41 | + ` |
| 42 | + |
| 43 | + // 4b. Use "own" tw function directly |
| 44 | + // return html` |
| 45 | + // <main class="${tw('h-screen bg-purple-400 flex items-center justify-center')}"> |
| 46 | + // <h1 class="${tw('font-bold text(center 5xl white sm:gray-800 md:pink-700')}"> |
| 47 | + // This is Twind! |
| 48 | + // </h1> |
| 49 | + // </main> |
| 50 | + // ` |
| 51 | + } |
| 52 | +} |
| 53 | + |
| 54 | +customElements.define('twind-element', TwindElement); |
| 55 | +``` |
| 56 | + |
| 57 | +> **Tip** |
| 58 | +> The [Library Mode guide](./library-mode) might be helpful for advanced use cases like creating a dedicated `twind` module. |
| 59 | +
|
| 60 | +```js title="twind.js" |
| 61 | +import { |
| 62 | + twind, |
| 63 | + cssom, |
| 64 | + tx as tx$, |
| 65 | + injectGlobal as injectGlobal$, |
| 66 | + keyframes as keyframes$, |
| 67 | +} from '@twind/core' |
| 68 | + |
| 69 | +import config from './twind.config' |
| 70 | + |
| 71 | +// 1. Create separate CSSStyleSheet |
| 72 | +export const sheet = /* #__PURE__ */ cssom(new CSSStyleSheet()) |
| 73 | + |
| 74 | +// 2. Use that to create an own twind instance |
| 75 | +export const tw = /* #__PURE__ */ twind(config, sheet) |
| 76 | + |
| 77 | +// tx allow tagged template usage like: tx`text(center 5xl white sm:gray-800 md:pink-700)` |
| 78 | +export const tx = /* #__PURE__ */ tx$.bind(tw) |
| 79 | + |
| 80 | +// bind some helper function |
| 81 | +export const injectGlobal = /* #__PURE__ */ injectGlobal$.bind(tw) |
| 82 | +export const keyframes = /* #__PURE__ */ keyframes$.bind(tw) |
| 83 | + |
| 84 | +// export additional useful functions |
| 85 | +export { observe, cx } from from '@twind/core' |
| 86 | +``` |
0 commit comments