@twind/with-react/inline

Static Extraction

default

▸ default(markup, options?): string

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

1. parse the markup and process element classes with the provided Twind instance
2. update the class attributes if necessary
3. inject a style element with the CSS as last element into the head
4. return the HTML string with the final element classes

import { inline } from '@twind/core'

function render() {
  return inline(renderApp())
}

Minify CSS with @parcel/css:

import { inline } from '@twind/core'
import { transform } from '@parcel/css'

function render() {
  return inline(renderApp(), { minify: (css) => transform({ filename: 'twind.css', code: Buffer.from(css), minify: true }) })
}

You can provide your own Twind instance:

import { inline } from '@twind/core'
import { tw } from './custom/twind/instance'

function render() {
  return inline(renderApp(), { tw })
}

Parameters

Returns

string

the resulting HTML

Defined in

packages/core/src/ssr.ts:76

Interfaces

• InlineMinify
• InlineOptions