Twind.style
  1. Advanced
  2. Library Mode

Advanced

Library Mode

Instead of the default shim mode, twind can be used in library mode.

This mode may be useful for component libraries that do not want to expose the twind API to their users. Instead a own twind instance is created and used to generate the styles.

twind.js
js
import {
  twind,
  virtual,
  cssom,
  tx as tx$,
  injectGlobal as injectGlobal$,
  keyframes as keyframes$,
} from '@twind/core'

import config from './twind.config'

export const tw = /* #__PURE__ */ twind(
  config,
  // support SSR and use a different selector to not get the twind default style sheet
  typeof document === 'undefined' ? virtual() : cssom('style[data-library]'),
)
export const tx = /* #__PURE__ */ tx$.bind(tw)
export const injectGlobal = /* #__PURE__ */ injectGlobal$.bind(tw)
export const keyframes = /* #__PURE__ */ keyframes$.bind(tw)

It is then recommended to use the tw instance to generate the styles. It is only advised to use observe if used within a Shadow DOM. Otherwise different twind instances may interfere with each other.

TODO: example using a shared stylesheet for several custom element instances