consume

Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps)

Note: Consider using inline or extract instead.

1. parse the markup and process element classes with the provided Twind instance
2. update the class attributes if necessary
3. return the HTML string with the final element classes

import { consume, stringify, tw } from '@twind/core'

function render() {
  const html = renderApp()

  // remember global classes
  const restore = tw.snapshot()

  // generated markup
  const markup = consume(html)

  // create CSS
  const css = stringify(tw.target)

  // restore global classes
  restore()

  // inject as last element into the head
  return markup.replace('</head>', `<style data-twind>${css}</style></head>`)
}

You can provide your own Twind instance:

import { consume, stringify } from '@twind/core'
import { tw } from './custom/twind/instance'

function render() {
  const html = renderApp()

  // remember global classes
  const restore = snapshot(tw.target)

  // generated markup
  const markup = consume(html)

  // restore global classes
  restore()

  // create CSS
  const css = stringify(tw.target)

  // inject as last element into the head
  return markup.replace('</head>', `<style data-twind>${css}</style></head>`)
}