# Module: twind

# Exports

# The tw function

This function is responsible for interpreting Twind rules and injecting CSS in the document.

📚 View Handbook Guide

📓 View API Reference

# The apply function

This function generates one style object, combining all Tailwind rules by deep merging rules in order of declaration.

📚 View Handbook Guide

📓 View API Reference

# The setup function

This optional function accepts a configuration object that allows you to change behaviors, themes, and more.

📚 View Handbook Guide

📓 View API Reference

# Table of contents

# Interfaces

• Apply
• CSSCustomProperties
• CSSProperties
• CSSPseudos
• CSSRules
• CSSRulesThunk
• Configuration
• Context
• CorePlugins
• CounterStyle
• Directive
• DirectiveHandler
• FontFace
• InlineDirective
• Instance
• Mode
• Plugins
• Preflight
• Rule
• Sheet
• SheetConfig
• SheetInit
• TW
• TWCallable
• Theme
• ThemeColorObject
• ThemeConfiguration
• ThemeContainer
• ThemeHelper
• ThemeResolver
• ThemeSectionResolverContext
• TokenGrouping
• Variants

# Type aliases

# BlendMode

Ƭ BlendMode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

Defined in: src/types/completion.ts:130

# BorderStyle

Ƭ BorderStyle: solid | dashed | dotted | double | none

Defined in: src/types/completion.ts:126

# CSSAtKeyframes

Ƭ CSSAtKeyframes: Record<string, CSSProperties | (context: Context) => CSSProperties>

Defined in: src/types/twind.ts:227

# CSSAtMedia

Ƭ CSSAtMedia: Record<string, MaybeArray<CSSRules>>

Defined in: src/types/twind.ts:225

# CSSAtSupports

Ƭ CSSAtSupports: Record<string, MaybeArray<CSSRules>>

Defined in: src/types/twind.ts:226

# CSSRuleValue

Ƭ CSSRuleValue: CSSAtMedia | CSSAtSupports | CSSAtKeyframes | CSSRulesThunk | MaybeArray<CSSProperties | CSSRules | FontFace | string | Falsy | TypescriptCompat>

Defined in: src/types/twind.ts:275

# CSSSimplePseudos

Ƭ CSSSimplePseudos: { [K in CSS.SimplePseudos as `&${string & K}`]?: CSSRulesThunk | MaybeArray<CSSRules>}

Pseudo class watch out for ':root' - that could use '*' instead

Defined in: src/types/twind.ts:216

# CompletionTokens

Ƭ CompletionTokens: CoreCompletionTokens | UserCompletionTokens

Defined in: src/types/completion.ts:555

# CoreCompletionTokens

Ƭ CoreCompletionTokens: `${FromTheme<"screens">}:` | `${"" | "not-"}${SimplePseudoClasses}:` | `${Join<"group", "" | Interpolate<"string">>}-${SimplePseudoClasses}:` | `${SimplePseudoElements}::` | `${CoreVariants}:` | JoinFromObject<CorePlugins>

Defined in: src/types/completion.ts:543

# CoreVariants

Ƭ CoreVariants: dark | sticky | motion-reduce | motion-safe | first | last | even | odd | children | siblings | sibling | override

Defined in: src/types/completion.ts:92

# Corners

Ƭ Corners: t | r | b | l | tl | tr | bl | br

Defined in: src/types/completion.ts:124

# DarkMode

Ƭ DarkMode: media | class | false

Defined in: src/types/twind.ts:82

# Edges

Ƭ Edges: x | y | t | r | b | l | tl | tr | tb | bl | br | lr

Defined in: src/types/completion.ts:125

# Empty

Ƭ Empty: never | ** | DEFAULT

Defined in: src/types/completion.ts:106

# Falsy

Ƭ Falsy: ** | 0 | 0 | false | null | undefined | void

Defined in: src/types/util.ts:1

# FromTheme

Ƭ FromTheme<Section>: Interpolate<`theme(${Section})`>

# Type parameters:

Defined in: src/types/completion.ts:29

# GlobalValue

Ƭ GlobalValue: inherit | initial | unset

Defined in: src/types/completion.ts:128

# Hasher

Ƭ Hasher: (value: string) => string

# Type declaration:

▸ (value: string): string

# Parameters:

Returns: string

Defined in: src/types/twind.ts:80

# Interpolate

Ƭ Interpolate<Kind>: `{​{${Kind}​}}`

# Type parameters:

Defined in: src/types/completion.ts:27

# InterpolateKind

Ƭ InterpolateKind: `theme(${keyof Theme})` | `range(${number},${number},${number})` | string | number | nonzero

Defined in: src/types/completion.ts:18

# Join

Ƭ Join<Prefix, Suffix, Separator>: Suffix extends Empty ? Prefix extends Empty ? never : Prefix : Prefix extends Empty ? Suffix : Prefix extends Suffix ? never : Suffix extends `-${infer S}` ? `-${Prefix}${Separator}${S}` : `${Prefix}${Separator}${Suffix}`

# Type parameters:

Defined in: src/types/completion.ts:108

# JoinFromObject

Ƭ JoinFromObject<T, Separator>: { [P in keyof T]: Join<ToString<P>, ToString<T[P]>, Separator>}[keyof T]

# Type parameters:

Defined in: src/types/completion.ts:529

# MaybeArray

Ƭ MaybeArray<T>: T | readonly T[]

# Type parameters:

Defined in: src/types/util.ts:3

# MaybeObjInterpolationGeneric

Ƭ MaybeObjInterpolationGeneric<T>: T[] | [TemplateStringsArray, ...T[]]

# Type parameters:

Defined in: src/types/twind.ts:7

# MaybeThunk

Ƭ MaybeThunk<T>: T | (context: Context) => T

# Type parameters:

Defined in: src/types/twind.ts:39

# MaybeTokenInterpolation

Ƭ MaybeTokenInterpolation: MaybeObjInterpolationGeneric<Token>

Defined in: src/types/twind.ts:8

# Negatable

Ƭ Negatable<Value>: Value | `-${Value}`

# Type parameters:

Defined in: src/types/completion.ts:37

# NonEmptyString

Ƭ NonEmptyString: Interpolate<string>

Defined in: src/types/completion.ts:30

# Plugin

Ƭ Plugin: string | CSSRules | DirectiveHandler

Defined in: src/types/twind.ts:154

# Prefixer

Ƭ Prefixer: (property: string, value: string, important?: boolean) => string

# Type declaration:

▸ (property: string, value: string, important?: boolean): string

# Parameters:

Returns: string

Defined in: src/types/twind.ts:78

# Range

Ƭ Range<From, To, Step>: Interpolate<`range(${From},${To},${Step})`>

# Type parameters:

Defined in: src/types/completion.ts:31

# ReportInfo

Ƭ ReportInfo: { id: LATE_SETUP_CALL } | { id: UNKNOWN_DIRECTIVE ; rule: string } | { id: UNKNOWN_THEME_VALUE ; key: string | undefined } | { css: string ; error: Error ; id: INJECT_CSS_ERROR }

Defined in: src/types/twind.ts:129

# SheetInitCallback

Ƭ SheetInitCallback<T>: (value?: T) => T

# Type parameters:

# Type declaration:

▸ (value?: T): T

# Parameters:

Returns: T

Defined in: src/types/twind.ts:69

# SimplePseudoClasses

Ƭ SimplePseudoClasses: active | any-link | autofill | checked | default | disabled | empty | enabled | first-child | first-of-type | focus | focus-visible | focus-within | future | hover | in-range | indeterminate | invalid | last-child | last-of-type | link | local-link | only-child | only-of-type | optional | out-of-range | past | paused | placeholder-shown | playing | read-only | read-write | required | target | target-within | user-invalid | valid | visited

Defined in: src/types/completion.ts:39

# SimplePseudoElements

Ƭ SimplePseudoElements: after | before | cue | cue-region | file-selector-button | first-letter | first-line | marker | placeholder | selection | target-text

Defined in: src/types/completion.ts:79

# ThemeColor

Ƭ ThemeColor: string | ThemeColorObject

Defined in: src/types/theme.ts:100

# ThemeFontSize

Ƭ ThemeFontSize: string | [size: string, lineHeight: string] | [size: string, options: object]

Defined in: src/types/theme.ts:102

# ThemeOutline

Ƭ ThemeOutline: [outline: string, offset: string] | string[]

Defined in: src/types/theme.ts:107

# ThemeScreen

Ƭ ThemeScreen: MaybeArray<ThemeScreenValue>

Defined in: src/types/theme.ts:93

# ThemeScreenValue

Ƭ ThemeScreenValue: string | { raw: string } | { max?: string ; min: string } | { max: string ; min?: string }

Defined in: src/types/theme.ts:87

# ThemeSection

Ƭ ThemeSection<T>: ThemeSectionRecord<T> | ThemeSectionResolver<T>

# Type parameters:

Defined in: src/types/theme.ts:79

# ThemeSectionRecord

Ƭ ThemeSectionRecord<T>: Record<string, T | undefined>

# Type parameters:

Defined in: src/types/theme.ts:72

# ThemeSectionResolver

Ƭ ThemeSectionResolver<T>: (theme: ThemeResolver, context: ThemeSectionResolverContext) => ThemeSectionRecord<T>

# Type parameters:

# Type declaration:

▸ (theme: ThemeResolver, context: ThemeSectionResolverContext): ThemeSectionRecord<T>

# Parameters:

Returns: ThemeSectionRecord<T>

Defined in: src/types/theme.ts:74

# ThemeSectionType

Ƭ ThemeSectionType<T>: T extends ThemeSection<infer R> ? Unwrap<R> : Exclude<T, ThemeSectionResolver<T>>

# Type parameters:

Defined in: src/types/theme.ts:55

# ToString

Ƭ ToString<T>: T extends string ? T : T extends number ? `${T}` : never

# Type parameters:

Defined in: src/types/completion.ts:527

# Token

Ƭ Token: Token[] | TokenGrouping | InlineDirective | string | Falsy | TypescriptCompat

Defined in: src/types/twind.ts:209

# TypescriptCompat

Ƭ TypescriptCompat: boolean | number

Defined in: src/types/twind.ts:207

# Unwrap

Ƭ Unwrap<T>: T extends string[] ? string : T extends Record<string, infer R> ? R : T

# Type parameters:

Defined in: src/types/theme.ts:53

# UserCompletionTokens

Ƭ UserCompletionTokens: { [K in keyof Variants]: `${ToString<K>}:`}[keyof Variants] | JoinFromObject<Plugins>

Defined in: src/types/completion.ts:551

# Variables

# silent

• Const silent: Mode

Defined in: src/twind/modes.ts:24

# strict

• Const strict: Mode

Defined in: src/twind/modes.ts:20

# tw

• tw: TW

# warn

• Const warn: Mode

Defined in: src/twind/modes.ts:18

# Functions

# apply

▸ Constapply(strings: TemplateStringsArray, ...interpolations: Token[]): Directive<CSSRules>

# Parameters:

Returns: Directive<CSSRules>

Defined in: src/twind/apply.ts:15

▸ Constapply(...tokens: Token[]): Directive<CSSRules>

# Parameters:

Returns: Directive<CSSRules>

Defined in: src/twind/apply.ts:15

# autoprefix

▸ Constautoprefix(property: string, value: string, important?: boolean): string

# Parameters:

Returns: string

Defined in: src/twind/prefix.ts:8

# create

▸ Constcreate(config?: Configuration): Instance

# Parameters:

Returns: Instance

Defined in: src/twind/instance.ts:5

# cssomSheet

▸ ConstcssomSheet(options?: SheetConfig<CSSStyleSheet>): Sheet<CSSStyleSheet>

Creates an sheet which inserts style rules through the CSS Object Model.

# Parameters:

Returns: Sheet<CSSStyleSheet>

Defined in: src/twind/sheets.ts:10

# directive

▸ Constdirective<Data, T>(factory: (data: Data, context: Context) => MaybeThunk<T>, data: Data): Directive<T>

Returns an optimized and cached function for use with tw.

tw caches rules based on the function identity. This helper caches the function based on the data.

# Type parameters:

# Parameters:

Returns: Directive<T>

Defined in: src/twind/directive.ts:38

# expandGroups

▸ ConstexpandGroups(classNames: string): string

# Parameters:

Returns: string

Defined in: src/twind/expand.ts:4

# hash

▸ Consthash(value: string): string

# Parameters:

Returns: string

Defined in: src/internal/util.ts:120

# mode

▸ Constmode(report: (message: string) => void): Mode

# Parameters:

Returns: Mode

Defined in: src/twind/modes.ts:5

# noprefix

▸ Constnoprefix(property: string, value: string, important?: boolean): string

# Parameters:

Returns: string

Defined in: src/twind/prefix.ts:5

# setup

▸ setup(options?: Configuration): void

# Parameters:

Returns: void

Defined in: src/types/twind.ts:36

# theme

▸ Consttheme<Section>(section: Section): function

# Type parameters:

# Parameters:

Returns: (context: Context) => Record<string, ThemeSectionType<Theme[Section]>>

Defined in: src/twind/theme.ts:90

▸ Consttheme<Section>(keypath: `${Section}.${string}`): function

# Type parameters:

# Parameters:

Returns: (context: Context) => undefined | ThemeSectionType<Theme[Section]>

Defined in: src/twind/theme.ts:90

▸ Consttheme<Section>(keypath: `${Section}.${string}`, defaultValue: NonNullable<ThemeSectionType<Theme[Section]>>): function

# Type parameters:

# Parameters:

Returns: (context: Context) => NonNullable<ThemeSectionType<Theme[Section]>>

Defined in: src/twind/theme.ts:90

▸ Consttheme<Section>(section: Section, key: string | string[]): function

# Type parameters:

# Parameters:

Returns: (context: Context) => undefined | ThemeSectionType<Theme[Section]>

Defined in: src/twind/theme.ts:90

▸ Consttheme<Section>(section: Section, key: string | string[], defaultValue: NonNullable<ThemeSectionType<Theme[Section]>>): function

# Type parameters:

# Parameters:

Returns: (context: Context) => NonNullable<ThemeSectionType<Theme[Section]>>

Defined in: src/twind/theme.ts:90

# voidSheet

▸ ConstvoidSheet(): Sheet<null>

An sheet placeholder which performs no operations. Useful for avoiding errors in a non-browser environment.

Returns: Sheet<null>

Defined in: src/twind/sheets.ts:25