server

For static HTML processing (usually to provide SSR support for your javascript-powered web apps), twind/shim/server exports a dedicated shim function that accepts HTML string as input and will:

parse the markup and process element classes with either the default/global tw instance or a custom instance
populate the provided sheet with the generated rules
output the HTML string with the final element classes

All Twind syntax features like {@page Thinking in Groups | grouping} are supported within class attributes.

The shim function also accepts an optional 2nd argument that can be a custom tw instance or an options object (including tw instance).

import { create } from 'twind'
import { shim, virtualSheet, getStyleTag } from 'twind/shim/server'

const sheet = virtualSheet()

const { tw } = create({ ...sharedOptions, sheet })

sheet.reset()

const markup = shim(htmlString, {
  tw, // defaults to default `tw` instance
})

const styleTag = getStyleTag(sheet)

Asynchronous SSR

❗ This is an experimental feature. Use with care and please report any issue you find. Consider using the synchronous API when ever possible due to the relatively expensive nature of the promise introspection API provided by V8. Async server side rendering is implemented using async_hooks. Callback-based APIs and event emitters may not work or need special handling.

import { setup } from 'twind'
import { asyncVirtualSheet, getStyleTagProperties, shim } from 'twind/server'

const sheet = asyncVirtualSheet()

setup({ ...sharedOptions, sheet })

async function ssr() {
  // 1. Reset the sheet for a new rendering
  sheet.reset()

  // 2. Render the app to an html string and handle class attributes
  const body = shim(await renderTheApp())

  // 3. Create the style tag with all generated CSS rules
  const styleTag = getStyleTag(sheet)

  // 4. Generate the response html
  return `<!DOCTYPE html>
    <html lang="en">
      <head>${styleTag}</head>
      <body>${body}</body>
    </html>
  `
}

Interfaces

ShimOptions

References

Apply

Re-exports: Apply

BlendMode

Re-exports: BlendMode

BorderStyle

Re-exports: BorderStyle

CSSAtKeyframes

Re-exports: CSSAtKeyframes

CSSAtMedia

Re-exports: CSSAtMedia

CSSPseudos

Re-exports: CSSPseudos

CSSRuleValue

Re-exports: CSSRuleValue

CSSRules

Re-exports: CSSRules

CSSRulesThunk

Re-exports: CSSRulesThunk

CSSSimplePseudos

Re-exports: CSSSimplePseudos

CompletionTokens

Re-exports: CompletionTokens

Configuration

Re-exports: Configuration

Context

Re-exports: Context

CoreCompletionTokens

Re-exports: CoreCompletionTokens

CorePlugins

Re-exports: CorePlugins

CoreVariants

Re-exports: CoreVariants

Corners

Re-exports: Corners

CounterStyle

Re-exports: CounterStyle

DarkMode

Re-exports: DarkMode

Directive

Re-exports: Directive

DirectiveHandler

Re-exports: DirectiveHandler

Edges

Re-exports: Edges

Empty

Re-exports: Empty

Falsy

Re-exports: Falsy

FontFace

Re-exports: FontFace

FromTheme

Re-exports: FromTheme

GlobalValue

Re-exports: GlobalValue

HasTarget

Re-exports: HasTarget

Hasher

Re-exports: Hasher

InlineDirective

Re-exports: InlineDirective

Instance

Re-exports: Instance

Interpolate

Re-exports: Interpolate

InterpolateKind

Re-exports: InterpolateKind

Join

Re-exports: Join

JoinFromObject

Re-exports: JoinFromObject

MaybeArray

Re-exports: MaybeArray

MaybeObjInterpolationGeneric

Re-exports: MaybeObjInterpolationGeneric

MaybeThunk

Re-exports: MaybeThunk

MaybeTokenInterpolation

Re-exports: MaybeTokenInterpolation

Mode

Re-exports: Mode

Negatable

Re-exports: Negatable

NonEmptyString

Re-exports: NonEmptyString

Plugin

Re-exports: Plugin

Plugins

Re-exports: Plugins

Prefixer

Re-exports: Prefixer

Preflight

Re-exports: Preflight

Range

Re-exports: Range

ReportInfo

Re-exports: ReportInfo

Rule

Re-exports: Rule

Sheet

Re-exports: Sheet

SheetConfig

Re-exports: SheetConfig

SheetInit

Re-exports: SheetInit

SheetInitCallback

Re-exports: SheetInitCallback

SimplePseudoClasses

Re-exports: SimplePseudoClasses

SimplePseudoElements

Re-exports: SimplePseudoElements

Storage

Re-exports: Storage

StyleTagProperties

Re-exports: StyleTagProperties

StyleTagSheet

Re-exports: StyleTagSheet

TW

Re-exports: TW

TWCallable

Re-exports: TWCallable

Theme

Re-exports: Theme

ThemeColor

Re-exports: ThemeColor

ThemeColorObject

Re-exports: ThemeColorObject

ThemeConfiguration

Re-exports: ThemeConfiguration

ThemeContainer

Re-exports: ThemeContainer

ThemeFontSize

Re-exports: ThemeFontSize

ThemeHelper

Re-exports: ThemeHelper

ThemeOutline

Re-exports: ThemeOutline

ThemeResolver

Re-exports: ThemeResolver

ThemeScreen

Re-exports: ThemeScreen

ThemeScreenValue

Re-exports: ThemeScreenValue

ThemeSection

Re-exports: ThemeSection

ThemeSectionRecord

Re-exports: ThemeSectionRecord

ThemeSectionResolver

Re-exports: ThemeSectionResolver

ThemeSectionResolverContext

Re-exports: ThemeSectionResolverContext

ThemeSectionType

Re-exports: ThemeSectionType

ToString

Re-exports: ToString

Token

Re-exports: Token

TokenGrouping

Re-exports: TokenGrouping

TypescriptCompat

Re-exports: TypescriptCompat

Unwrap

Re-exports: Unwrap

UserCompletionTokens

Re-exports: UserCompletionTokens

Variants

Re-exports: Variants

VirtualSheet

Re-exports: VirtualSheet

apply

Re-exports: apply

autoprefix

Re-exports: autoprefix

create

Re-exports: create

cssomSheet

Re-exports: cssomSheet

directive

Re-exports: directive

domSheet

Re-exports: domSheet

expandGroups

Re-exports: expandGroups

getStyleTag

Re-exports: getStyleTag

getStyleTagProperties

Re-exports: getStyleTagProperties

hash

Re-exports: hash

mode

Re-exports: mode

noprefix

Re-exports: noprefix

setup

Re-exports: setup

silent

Re-exports: silent

strict

Re-exports: strict

theme

Re-exports: theme

tw

Re-exports: tw

virtualSheet

Re-exports: virtualSheet

voidSheet

Re-exports: voidSheet

warn

Re-exports: warn

Functions

shim

▸ Constshim(markup: string, options?: TW | ShimOptions): string

Shim the passed html.

tokenize the markup and process element classes with either the default/global tw instance or a custom instance
populate the provided sheet with the generated rules
output the HTML markup with the final element classes

Parameters:

Name	Type	Default value	Description
`markup`	string	-	the html to shim
`options`	TW \| ShimOptions	{}	to use

Returns: string

the HTML markup with the final element classes

Defined in: src/shim/server/index.ts:49

twind/shim

twind/style

# Module: twind/shim/server

# Table of contents

# Interfaces

# References

# Apply

# BlendMode

# BorderStyle

# CSSAtKeyframes

# CSSAtMedia

# CSSAtSupports

# CSSCustomProperties

# CSSProperties

# CSSPseudos

# CSSRuleValue

# CSSRules

# CSSRulesThunk

# CSSSimplePseudos

# CompletionTokens

# Configuration

# Context

# CoreCompletionTokens

# CorePlugins

# CoreVariants

# Corners

# CounterStyle

# DarkMode

# Directive

# DirectiveHandler

# Edges

# Empty

# Falsy

# FontFace

# FromTheme

# GlobalValue

# HasTarget

# Hasher

# InlineDirective

# Instance

# Interpolate

# InterpolateKind

# Join

# JoinFromObject

# MaybeArray

# MaybeObjInterpolationGeneric

# MaybeThunk

# MaybeTokenInterpolation

# Mode

# Negatable

# NonEmptyString

# Plugin

# Plugins

# Prefixer

# Preflight

# Range

# ReportInfo

# Rule

# Sheet

# SheetConfig

# SheetInit

# SheetInitCallback

# SimplePseudoClasses

# SimplePseudoElements

# Storage

# StyleTagProperties

# StyleTagSheet

# TW

# TWCallable

# Theme

# ThemeColor

# ThemeColorObject

# ThemeConfiguration

# ThemeContainer

# ThemeFontSize

# ThemeHelper

# ThemeOutline

# ThemeResolver

# ThemeScreen

# ThemeScreenValue

# ThemeSection

# ThemeSectionRecord