# Module: twind/shim

twind/shim detects Tailwind class names used inside of class attributes. If Tailwind utility classes are detected, the corresponding CSS rule is created and injected into the stylesheet dynamically. twind/shim is intended for client-side usage and, without configuration, utilizes the default/global tw instance. There is no need for tw, but it can be used on the same elements as well. All Twind syntax features like grouping are supported within class attributes.

📚 View Handbook Guide

# Exports

# The disconnect function

📓 View API Reference

# The setup function

📓 View API Reference

# Table of contents

# Interfaces

• ShimConfiguration

# References

# Apply

Re-exports: Apply

# BlendMode

Re-exports: BlendMode

# BorderStyle

Re-exports: BorderStyle

# CSSAtKeyframes

Re-exports: CSSAtKeyframes

# CSSAtMedia

Re-exports: CSSAtMedia

# CSSAtSupports

Re-exports: CSSAtSupports

# CSSCustomProperties

Re-exports: CSSCustomProperties

# CSSProperties

Re-exports: CSSProperties

# 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

# 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

# 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

# apply

Re-exports: apply

# autoprefix

Re-exports: autoprefix

# create

Re-exports: create

# cssomSheet

Re-exports: cssomSheet

# directive

Re-exports: directive

# expandGroups

Re-exports: expandGroups

# hash

Re-exports: hash

# mode

Re-exports: mode

# noprefix

Re-exports: noprefix

# silent

Re-exports: silent

# strict

Re-exports: strict

# theme

Re-exports: theme

# tw

Re-exports: tw

# voidSheet

Re-exports: voidSheet

# warn

Re-exports: warn

# Functions

# disconnect

▸ Constdisconnect(): void

Stop shimming/observing all nodes.

Returns: void

Defined in: src/shim/index.ts:48

# setup

▸ Constsetup(options?: ShimConfiguration): void

Configure the default tw and starts observing the target element (default: document.documentElement).

You do not need to call this method. As an alternativ you can provide a <script type="twind-config">...</script> element within the document. The content must be valid JSON and all twind setup options (including hash) are supported.

# Parameters:

Returns: void

Defined in: src/shim/index.ts:68