Module: twind

DocumentationGithubModule SizeTypescript

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

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:224


CSSAtMedia

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

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


CSSAtSupports

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

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


CSSRuleValue

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

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


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:213


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:79


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:

NameType
Sectionkeyof Theme

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:

NameType
valuestring

Returns: string

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


Interpolate

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

Type parameters:

NameType
KindInterpolateKind

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:

NameTypeDefault
Prefixstring | never-
Suffixstring | never-
Separatorstring-

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:

NameTypeDefault
T--
Separatorstring-

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


MaybeArray

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

Type parameters:

Name
T

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


MaybeThunk

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

Type parameters:

Name
T

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


Negatable

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

Type parameters:

NameType
Valuestring

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:151


Prefixer

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

Type declaration:

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

Parameters:

NameType
propertystring
valuestring
important?boolean

Returns: string

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


Range

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

Type parameters:

NameTypeDefault
Fromnumber-
Tonumber-
Stepnumber1

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:126


SheetInitCallback

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

Type parameters:

NameDefault
Tunknown

Type declaration:

▸ (value?: T): T

Parameters:

NameType
value?T

Returns: T

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


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:

NameDefault
Tstring

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


ThemeSectionRecord

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

Type parameters:

NameDefault
Tstring

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


ThemeSectionResolver

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

Type parameters:

NameDefault
Tstring

Type declaration:

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

Parameters:

NameType
themeThemeResolver
contextThemeSectionResolverContext

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:

Name
T

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


ToString

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

Type parameters:

Name
T

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


Token

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

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


TypescriptCompat

Ƭ TypescriptCompat: boolean | number

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


Unwrap

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

Type parameters:

Name
T

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:

NameType
stringsTemplateStringsArray
...interpolationsToken[]

Returns: Directive<CSSRules>

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

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

Parameters:

NameType
...tokensToken[]

Returns: Directive<CSSRules>

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


autoprefix

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

Parameters:

NameType
propertystring
valuestring
important?boolean

Returns: string

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


create

Constcreate(config?: Configuration): Instance

Parameters:

NameType
config?Configuration

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:

NameTypeDefault value
optionsSheetConfig<CSSStyleSheet>{}

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:

Name
Data
T

Parameters:

NameTypeDescription
factory(data: Data, context: Context) => MaybeThunk<T>to use when the directive is invoked
dataDatato use

Returns: Directive<T>

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


hash

Consthash(value: string): string

Parameters:

NameType
valuestring

Returns: string

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


mode

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

Parameters:

NameType
report(message: string) => void

Returns: Mode

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


noprefix

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

Parameters:

NameType
propertystring
valuestring
important?boolean

Returns: string

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


setup

setup(options?: Configuration): void

Parameters:

NameType
options?Configuration

Returns: void

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


theme

Consttheme<Section>(section: Section): function

Type parameters:

NameType
Sectioncolors | spacing | durations | screens | animation | backdropBlur | backdropBrightness | backdropContrast | backdropGrayscale | backdropHueRotate | backdropInvert | backdropOpacity | backdropSaturate | backdropSepia | backgroundColor | backgroundImage | backgroundOpacity | backgroundPosition | backgroundSize | blur | borderColor | borderOpacity | borderRadius | borderWidth | boxShadow | brightness | container | contrast | cursor | divideColor | divideOpacity | divideWidth | dropShadow | fill | flex | flexGrow | flexShrink | fontFamily | fontSize | fontWeight | gap | gradientColorStops | grayscale | gridAutoColumns | gridAutoRows | gridColumn | gridColumnEnd | gridColumnStart | gridRow | gridRowEnd | gridRowStart | gridTemplateColumns | gridTemplateRows | height | hueRotate | inset | invert | keyframes | letterSpacing | lineHeight | listStyleType | margin | maxHeight | maxWidth | minHeight | minWidth | objectPosition | opacity | order | outline | padding | placeholderColor | placeholderOpacity | ringColor | ringOffsetColor | ringOffsetWidth | ringOpacity | ringWidth | rotate | saturate | scale | sepia | skew | space | stroke | strokeWidth | textColor | textOpacity | transformOrigin | transitionDelay | transitionDuration | transitionProperty | transitionTimingFunction | translate | width | zIndex

Parameters:

NameType
sectionSection

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

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

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

Type parameters:

NameType
Sectioncolors | spacing | durations | screens | animation | backdropBlur | backdropBrightness | backdropContrast | backdropGrayscale | backdropHueRotate | backdropInvert | backdropOpacity | backdropSaturate | backdropSepia | backgroundColor | backgroundImage | backgroundOpacity | backgroundPosition | backgroundSize | blur | borderColor | borderOpacity | borderRadius | borderWidth | boxShadow | brightness | container | contrast | cursor | divideColor | divideOpacity | divideWidth | dropShadow | fill | flex | flexGrow | flexShrink | fontFamily | fontSize | fontWeight | gap | gradientColorStops | grayscale | gridAutoColumns | gridAutoRows | gridColumn | gridColumnEnd | gridColumnStart | gridRow | gridRowEnd | gridRowStart | gridTemplateColumns | gridTemplateRows | height | hueRotate | inset | invert | keyframes | letterSpacing | lineHeight | listStyleType | margin | maxHeight | maxWidth | minHeight | minWidth | objectPosition | opacity | order | outline | padding | placeholderColor | placeholderOpacity | ringColor | ringOffsetColor | ringOffsetWidth | ringOpacity | ringWidth | rotate | saturate | scale | sepia | skew | space | stroke | strokeWidth | textColor | textOpacity | transformOrigin | transitionDelay | transitionDuration | transitionProperty | transitionTimingFunction | translate | width | zIndex

Parameters:

NameType
keypath`${Section}.${string}`

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:

NameType
Sectioncolors | spacing | durations | screens | animation | backdropBlur | backdropBrightness | backdropContrast | backdropGrayscale | backdropHueRotate | backdropInvert | backdropOpacity | backdropSaturate | backdropSepia | backgroundColor | backgroundImage | backgroundOpacity | backgroundPosition | backgroundSize | blur | borderColor | borderOpacity | borderRadius | borderWidth | boxShadow | brightness | container | contrast | cursor | divideColor | divideOpacity | divideWidth | dropShadow | fill | flex | flexGrow | flexShrink | fontFamily | fontSize | fontWeight | gap | gradientColorStops | grayscale | gridAutoColumns | gridAutoRows | gridColumn | gridColumnEnd | gridColumnStart | gridRow | gridRowEnd | gridRowStart | gridTemplateColumns | gridTemplateRows | height | hueRotate | inset | invert | keyframes | letterSpacing | lineHeight | listStyleType | margin | maxHeight | maxWidth | minHeight | minWidth | objectPosition | opacity | order | outline | padding | placeholderColor | placeholderOpacity | ringColor | ringOffsetColor | ringOffsetWidth | ringOpacity | ringWidth | rotate | saturate | scale | sepia | skew | space | stroke | strokeWidth | textColor | textOpacity | transformOrigin | transitionDelay | transitionDuration | transitionProperty | transitionTimingFunction | translate | width | zIndex

Parameters:

NameType
keypath`${Section}.${string}`
defaultValueNonNullable<ThemeSectionType<Theme[Section]>>

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

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

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

Type parameters:

NameType
Sectioncolors | spacing | durations | screens | animation | backdropBlur | backdropBrightness | backdropContrast | backdropGrayscale | backdropHueRotate | backdropInvert | backdropOpacity | backdropSaturate | backdropSepia | backgroundColor | backgroundImage | backgroundOpacity | backgroundPosition | backgroundSize | blur | borderColor | borderOpacity | borderRadius | borderWidth | boxShadow | brightness | container | contrast | cursor | divideColor | divideOpacity | divideWidth | dropShadow | fill | flex | flexGrow | flexShrink | fontFamily | fontSize | fontWeight | gap | gradientColorStops | grayscale | gridAutoColumns | gridAutoRows | gridColumn | gridColumnEnd | gridColumnStart | gridRow | gridRowEnd | gridRowStart | gridTemplateColumns | gridTemplateRows | height | hueRotate | inset | invert | keyframes | letterSpacing | lineHeight | listStyleType | margin | maxHeight | maxWidth | minHeight | minWidth | objectPosition | opacity | order | outline | padding | placeholderColor | placeholderOpacity | ringColor | ringOffsetColor | ringOffsetWidth | ringOpacity | ringWidth | rotate | saturate | scale | sepia | skew | space | stroke | strokeWidth | textColor | textOpacity | transformOrigin | transitionDelay | transitionDuration | transitionProperty | transitionTimingFunction | translate | width | zIndex

Parameters:

NameType
sectionSection
keystring | string[]

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:

NameType
Sectioncolors | spacing | durations | screens | animation | backdropBlur | backdropBrightness | backdropContrast | backdropGrayscale | backdropHueRotate | backdropInvert | backdropOpacity | backdropSaturate | backdropSepia | backgroundColor | backgroundImage | backgroundOpacity | backgroundPosition | backgroundSize | blur | borderColor | borderOpacity | borderRadius | borderWidth | boxShadow | brightness | container | contrast | cursor | divideColor | divideOpacity | divideWidth | dropShadow | fill | flex | flexGrow | flexShrink | fontFamily | fontSize | fontWeight | gap | gradientColorStops | grayscale | gridAutoColumns | gridAutoRows | gridColumn | gridColumnEnd | gridColumnStart | gridRow | gridRowEnd | gridRowStart | gridTemplateColumns | gridTemplateRows | height | hueRotate | inset | invert | keyframes | letterSpacing | lineHeight | listStyleType | margin | maxHeight | maxWidth | minHeight | minWidth | objectPosition | opacity | order | outline | padding | placeholderColor | placeholderOpacity | ringColor | ringOffsetColor | ringOffsetWidth | ringOpacity | ringWidth | rotate | saturate | scale | sepia | skew | space | stroke | strokeWidth | textColor | textOpacity | transformOrigin | transitionDelay | transitionDuration | transitionProperty | transitionTimingFunction | translate | width | zIndex

Parameters:

NameType
sectionSection
keystring | string[]
defaultValueNonNullable<ThemeSectionType<Theme[Section]>>

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