Packages
@twind/core
The core engine without any presets.
- 🧭 Explore the examples
- 📜 Read the changelog
Class Name Generators
animation
▸ animation(animation, waypoints): StringLike
Parameters
| Name | Type |
|---|---|
animation | string | CSSProperties |
waypoints | StringLike |
Returns
Defined in
packages/core/src/animation.ts:6
apply
▸ apply(strings, ...interpolations): string
Parameters
| Name | Type |
|---|---|
strings | TemplateStringsArray | Class |
...interpolations | Class[] |
Returns
string
Defined in
packages/core/src/types.ts:521
css
▸ css(strings, ...interpolations): string
Parameters
| Name | Type |
|---|---|
strings | TemplateStringsArray |
...interpolations | readonly CSSValue[] |
Returns
string
Defined in
▸ css(style): string
Parameters
| Name | Type |
|---|---|
style | string | CSSObject |
Returns
string
Defined in
cx
▸ cx(strings, ...interpolations): string
Constructs class strings conditionally.
Twinds version of popular libraries like classnames or clsx.
The key advantage of cx is that it supports twinds enhanced class name syntax like grouping and aliases.
Parameters
| Name | Type |
|---|---|
strings | TemplateStringsArray |
...interpolations | Class[] |
Returns
string
Defined in
▸ cx(...input): string
Constructs class strings conditionally.
Twinds version of popular libraries like classnames or clsx.
The key advantage of cx is that it supports twinds enhanced class name syntax like grouping and aliases.
Parameters
| Name | Type |
|---|---|
...input | Class[] |
Returns
string
Defined in
shortcut
▸ shortcut(strings, ...interpolations): string
Parameters
| Name | Type |
|---|---|
strings | TemplateStringsArray | Class |
...interpolations | Class[] |
Returns
string
Defined in
packages/core/src/types.ts:521
style
▸ style<Variants>(config?): Style<Variants>
Type parameters
| Name |
|---|
Variants |
Parameters
| Name | Type |
|---|---|
config? | StyleConfig<Variants, {}> |
Returns
Style<Variants>
Defined in
▸ style<Variants, BaseVariants>(base, config?): Style<Variants & BaseVariants>
Type parameters
| Name |
|---|
Variants |
BaseVariants |
Parameters
| Name | Type |
|---|---|
base | Style<BaseVariants> |
config? | StyleConfig<Variants, BaseVariants> |
Returns
Style<Variants & BaseVariants>
Defined in
Runtime
auto
▸ auto(install): () => void
Parameters
| Name | Type |
|---|---|
install | () => void |
Returns
fn
▸ (): void
Returns
void
Defined in
packages/core/src/runtime.ts:22
install
▸ install<Theme>(config, isProduction?): Twind<Theme & BaseTheme>
Type parameters
| Name | Type |
|---|---|
Theme | extends BaseTheme = BaseTheme |
Parameters
| Name | Type |
|---|---|
config | TwindConfig<Theme> |
isProduction? | boolean |
Returns
Defined in
packages/core/src/install.ts:14
▸ install<Theme, Presets>(config, isProduction?): Twind<BaseTheme & ExtractThemes<Theme, Presets>>
Type parameters
| Name | Type |
|---|---|
Theme | BaseTheme |
Presets | extends Preset<any>[] = Preset<BaseTheme>[] |
Parameters
| Name | Type |
|---|---|
config | TwindUserConfig<Theme, Presets> |
isProduction? | boolean |
Returns
Twind<BaseTheme & ExtractThemes<Theme, Presets>>
Defined in
packages/core/src/install.ts:19
observe
▸ observe<Theme, Target>(tw?, target?): Twind<Theme, Target>
Type parameters
| Name | Type |
|---|---|
Theme | extends BaseTheme = BaseTheme |
Target | unknown |
Parameters
| Name | Type |
|---|---|
tw | Twind<Theme, Target> |
target | false | Node |
Returns
Twind<Theme, Target>
Defined in
packages/core/src/observe.ts:83
setup
▸ setup<Theme, SheetTarget>(config?, sheet?, target?): Twind<Theme, SheetTarget>
Manages a single Twind instance — works in browser, Node.js, Deno, workers...
Type parameters
| Name | Type |
|---|---|
Theme | extends BaseTheme = BaseTheme |
SheetTarget | unknown |
Parameters
| Name | Type |
|---|---|
config? | TwindConfig<Theme> |
sheet? | Sheet<SheetTarget> | SheetFactory<SheetTarget> |
target? | HTMLElement |
Returns
Twind<Theme, SheetTarget>
Defined in
packages/core/src/runtime.ts:114
▸ setup<Theme, Presets, SheetTarget>(config?, sheet?, target?): Twind<BaseTheme & ExtractThemes<Theme, Presets>, SheetTarget>
Type parameters
| Name | Type |
|---|---|
Theme | BaseTheme |
Presets | extends Preset<any>[] = Preset<BaseTheme>[] |
SheetTarget | unknown |
Parameters
| Name | Type |
|---|---|
config? | TwindUserConfig<Theme, Presets> |
sheet? | Sheet<SheetTarget> | SheetFactory<SheetTarget> |
target? | HTMLElement |
Returns
Twind<BaseTheme & ExtractThemes<Theme, Presets>, SheetTarget>
Defined in
packages/core/src/runtime.ts:120
twind
▸ twind<Theme, Target>(config, sheet): Twind<Theme, Target>
Type parameters
| Name | Type |
|---|---|
Theme | extends BaseTheme = BaseTheme |
Target | unknown |
Parameters
| Name | Type |
|---|---|
config | TwindConfig<Theme> |
sheet | Sheet<Target> |
Returns
Twind<Theme, Target>
Defined in
▸ twind<Theme, Presets, Target>(config, sheet): Twind<BaseTheme & ExtractThemes<Theme, Presets>, Target>
Type parameters
| Name | Type |
|---|---|
Theme | BaseTheme |
Presets | extends Preset<any>[] = Preset<BaseTheme>[] |
Target | unknown |
Parameters
| Name | Type |
|---|---|
config | TwindUserConfig<Theme, Presets> |
sheet | Sheet<Target> |
Returns
Twind<BaseTheme & ExtractThemes<Theme, Presets>, Target>
Defined in
Configuration
autoDarkColor
▸ autoDarkColor(section, key, context): ColorValue | Falsey
Looks for a matching dark color within a tailwind color palette (50, 100, 200, ..., 800, 900).
js
defineConfig({
darkColor: autoDarkColor,
})Note: Does not work for arbitrary values like [theme(colors.gray.500)] or [theme(colors.gray.500, #ccc)].
Parameters
| Name | Type | Description |
|---|---|---|
section | string | within theme to use |
key | string | of the light color or an arbitrary value |
context | Context<any> | to use |
Returns
the dark color if found
Defined in
packages/core/src/colors.ts:62
defineConfig
▸ defineConfig<Theme, Presets>(param0): TwindConfig<BaseTheme & ExtractThemes<Theme, Presets>>
Type parameters
| Name | Type |
|---|---|
Theme | BaseTheme |
Presets | extends Preset<any>[] = Preset<BaseTheme>[] |
Parameters
| Name | Type |
|---|---|
param0 | TwindUserConfig<Theme, Presets> |
Returns
TwindConfig<BaseTheme & ExtractThemes<Theme, Presets>>
Defined in
packages/core/src/define-config.ts:17
hash
▸ hash(value): string
Parameters
| Name | Type |
|---|---|
value | string |
Returns
string
Defined in
match
▸ match<Theme>(pattern): Rule<Theme>
Type parameters
| Name | Type |
|---|---|
Theme | extends BaseTheme = BaseTheme |
Parameters
| Name | Type |
|---|---|
pattern | MaybeArray<string | RegExp> |
Returns
Rule<Theme>
Defined in
▸ match<Theme>(pattern, resolver): Rule<Theme>
Type parameters
| Name | Type |
|---|---|
Theme | extends BaseTheme = BaseTheme |
Parameters
| Name | Type |
|---|---|
pattern | MaybeArray<string | RegExp> |
resolver | RuleResolver<Theme, MatchResult> |
Returns
Rule<Theme>
Defined in
▸ match<Theme>(pattern, resolve): Rule<Theme>
Type parameters
| Name | Type |
|---|---|
Theme | extends BaseTheme = BaseTheme |
Parameters
| Name | Type |
|---|---|
pattern | MaybeArray<string | RegExp> |
resolve | string & {} | CSSObject |
Returns
Rule<Theme>
Defined in
▸ match<Theme>(pattern, resolve, convert?): Rule<Theme>
Type parameters
| Name | Type |
|---|---|
Theme | extends BaseTheme = BaseTheme |
Parameters
| Name | Type |
|---|---|
pattern | MaybeArray<string | RegExp> |
resolve | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "clipPath" | "color" | "colorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "placeContent" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMargin" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "all" | "animation" | "background" | "backgroundPosition" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "columnRule" | "columns" | "flex" | "flexFlow" | "font" | "gap" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "lineClamp" | "listStyle" | "margin" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "overscrollBehavior" | "padding" | "placeItems" | "placeSelf" | "textDecoration" | "textEmphasis" | "transition" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnCount" | "MozColumnFill" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozImageRegion" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransformOrigin" | "MozTransformStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "azimuth" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundInlinePolicy" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBinding" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineRadius" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "WebkitScrollSnapPointsX" | "WebkitScrollSnapPointsY" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "accent-color" | "align-content" | "align-items" | "align-self" | "align-tracks" | "animation-composition" | "animation-delay" | "animation-direction" | "animation-duration" | "animation-fill-mode" | "animation-iteration-count" | "animation-name" | "animation-play-state" | "animation-timeline" | "animation-timing-function" | "aspect-ratio" | "backdrop-filter" | "backface-visibility" | "background-attachment" | "background-blend-mode" | "background-clip" | "background-color" | "background-image" | "background-origin" | "background-position-x" | "background-position-y" | "background-repeat" | "background-size" | "block-overflow" | "block-size" | "border-block-color" | "border-block-end-color" | "border-block-end-style" | "border-block-end-width" | "border-block-start-color" | "border-block-start-style" | "border-block-start-width" | "border-block-style" | "border-block-width" | "border-bottom-color" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-bottom-style" | "border-bottom-width" | "border-collapse" | "border-end-end-radius" | "border-end-start-radius" | "border-image-outset" | "border-image-repeat" | "border-image-slice" | "border-image-source" | "border-image-width" | "border-inline-color" | "border-inline-end-color" | "border-inline-end-style" | "border-inline-end-width" | "border-inline-start-color" | "border-inline-start-style" | "border-inline-start-width" | "border-inline-style" | "border-inline-width" | "border-left-color" | "border-left-style" | "border-left-width" | "border-right-color" | "border-right-style" | "border-right-width" | "border-spacing" | "border-start-end-radius" | "border-start-start-radius" | "border-top-color" | "border-top-left-radius" | "border-top-right-radius" | "border-top-style" | "border-top-width" | "box-decoration-break" | "box-shadow" | "box-sizing" | "break-after" | "break-before" | "break-inside" | "caption-side" | "caret-color" | "clip-path" | "color-adjust" | "color-scheme" | "column-count" | "column-fill" | "column-gap" | "column-rule-color" | "column-rule-style" | "column-rule-width" | "column-span" | "column-width" | "content-visibility" | "counter-increment" | "counter-reset" | "counter-set" | "empty-cells" | "flex-basis" | "flex-direction" | "flex-grow" | "flex-shrink" | "flex-wrap" | "font-family" | "font-feature-settings" | "font-kerning" | "font-language-override" | "font-optical-sizing" | "font-size" | "font-size-adjust" | "font-smooth" | "font-stretch" | "font-style" | "font-synthesis" | "font-variant" | "font-variant-alternates" | "font-variant-caps" | "font-variant-east-asian" | "font-variant-ligatures" | "font-variant-numeric" | "font-variant-position" | "font-variation-settings" | "font-weight" | "forced-color-adjust" | "grid-auto-columns" | "grid-auto-flow" | "grid-auto-rows" | "grid-column-end" | "grid-column-start" | "grid-row-end" | "grid-row-start" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "hanging-punctuation" | "hyphenate-character" | "image-orientation" | "image-rendering" | "image-resolution" | "initial-letter" | "inline-size" | "input-security" | "inset-block" | "inset-block-end" | "inset-block-start" | "inset-inline" | "inset-inline-end" | "inset-inline-start" | "justify-content" | "justify-items" | "justify-self" | "justify-tracks" | "letter-spacing" | "line-break" | "line-height" | "line-height-step" | "list-style-image" | "list-style-position" | "list-style-type" | "margin-block" | "margin-block-end" | "margin-block-start" | "margin-bottom" | "margin-inline" | "margin-inline-end" | "margin-inline-start" | "margin-left" | "margin-right" | "margin-top" | "mask-border-mode" | "mask-border-outset" | "mask-border-repeat" | "mask-border-slice" | "mask-border-source" | "mask-border-width" | "mask-clip" | "mask-composite" | "mask-image" | "mask-mode" | "mask-origin" | "mask-position" | "mask-repeat" | "mask-size" | "mask-type" | "math-depth" | "math-shift" | "math-style" | "max-block-size" | "max-height" | "max-inline-size" | "max-lines" | "max-width" | "min-block-size" | "min-height" | "min-inline-size" | "min-width" | "mix-blend-mode" | "motion-distance" | "motion-path" | "motion-rotation" | "object-fit" | "object-position" | "offset-anchor" | "offset-distance" | "offset-path" | "offset-rotate" | "offset-rotation" | "outline-color" | "outline-offset" | "outline-style" | "outline-width" | "overflow-anchor" | "overflow-block" | "overflow-clip-box" | "overflow-clip-margin" | "overflow-inline" | "overflow-wrap" | "overflow-x" | "overflow-y" | "overscroll-behavior-block" | "overscroll-behavior-inline" | "overscroll-behavior-x" | "overscroll-behavior-y" | "padding-block" | "padding-block-end" | "padding-block-start" | "padding-bottom" | "padding-inline" | "padding-inline-end" | "padding-inline-start" | "padding-left" | "padding-right" | "padding-top" | "page-break-after" | "page-break-before" | "page-break-inside" | "paint-order" | "perspective-origin" | "place-content" | "pointer-events" | "print-color-adjust" | "row-gap" | "ruby-align" | "ruby-merge" | "ruby-position" | "scroll-behavior" | "scroll-margin" | "scroll-margin-block" | "scroll-margin-block-end" | "scroll-margin-block-start" | "scroll-margin-bottom" | "scroll-margin-inline" | "scroll-margin-inline-end" | "scroll-margin-inline-start" | "scroll-margin-left" | "scroll-margin-right" | "scroll-margin-top" | "scroll-padding" | "scroll-padding-block" | "scroll-padding-block-end" | "scroll-padding-block-start" | "scroll-padding-bottom" | "scroll-padding-inline" | "scroll-padding-inline-end" | "scroll-padding-inline-start" | "scroll-padding-left" | "scroll-padding-right" | "scroll-padding-top" | "scroll-snap-align" | "scroll-snap-margin" | "scroll-snap-margin-bottom" | "scroll-snap-margin-left" | "scroll-snap-margin-right" | "scroll-snap-margin-top" | "scroll-snap-stop" | "scroll-snap-type" | "scrollbar-color" | "scrollbar-gutter" | "scrollbar-width" | "shape-image-threshold" | "shape-margin" | "shape-outside" | "tab-size" | "table-layout" | "text-align" | "text-align-last" | "text-combine-upright" | "text-decoration-color" | "text-decoration-line" | "text-decoration-skip" | "text-decoration-skip-ink" | "text-decoration-style" | "text-decoration-thickness" | "text-emphasis-color" | "text-emphasis-position" | "text-emphasis-style" | "text-indent" | "text-justify" | "text-orientation" | "text-overflow" | "text-rendering" | "text-shadow" | "text-size-adjust" | "text-transform" | "text-underline-offset" | "text-underline-position" | "touch-action" | "transform-box" | "transform-origin" | "transform-style" | "transition-delay" | "transition-duration" | "transition-property" | "transition-timing-function" | "unicode-bidi" | "user-select" | "vertical-align" | "white-space" | "will-change" | "word-break" | "word-spacing" | "word-wrap" | "writing-mode" | "z-index" | "background-position" | "border-block" | "border-block-end" | "border-block-start" | "border-bottom" | "border-color" | "border-image" | "border-inline" | "border-inline-end" | "border-inline-start" | "border-left" | "border-radius" | "border-right" | "border-style" | "border-top" | "border-width" | "column-rule" | "flex-flow" | "grid-area" | "grid-column" | "grid-row" | "grid-template" | "line-clamp" | "list-style" | "mask-border" | "overscroll-behavior" | "place-items" | "place-self" | "text-decoration" | "text-emphasis" | "-moz-animation-delay" | "-moz-animation-direction" | "-moz-animation-duration" | "-moz-animation-fill-mode" | "-moz-animation-iteration-count" | "-moz-animation-name" | "-moz-animation-play-state" | "-moz-animation-timing-function" | "-moz-appearance" | "-moz-backface-visibility" | "-moz-border-bottom-colors" | "-moz-border-end-color" | "-moz-border-end-style" | "-moz-border-end-width" | "-moz-border-left-colors" | "-moz-border-right-colors" | "-moz-border-start-color" | "-moz-border-start-style" | "-moz-border-top-colors" | "-moz-box-sizing" | "-moz-column-count" | "-moz-column-fill" | "-moz-column-rule-color" | "-moz-column-rule-style" | "-moz-column-rule-width" | "-moz-column-width" | "-moz-context-properties" | "-moz-font-feature-settings" | "-moz-font-language-override" | "-moz-hyphens" | "-moz-image-region" | "-moz-margin-end" | "-moz-margin-start" | "-moz-orient" | "-moz-osx-font-smoothing" | "-moz-padding-end" | "-moz-padding-start" | "-moz-perspective" | "-moz-perspective-origin" | "-moz-stack-sizing" | "-moz-tab-size" | "-moz-text-blink" | "-moz-text-size-adjust" | "-moz-transform-origin" | "-moz-transform-style" | "-moz-transition-delay" | "-moz-transition-duration" | "-moz-transition-property" | "-moz-transition-timing-function" | "-moz-user-focus" | "-moz-user-modify" | "-moz-user-select" | "-moz-window-dragging" | "-moz-window-shadow" | "-ms-accelerator" | "-ms-block-progression" | "-ms-content-zoom-chaining" | "-ms-content-zoom-limit-max" | "-ms-content-zoom-limit-min" | "-ms-content-zoom-snap-points" | "-ms-content-zoom-snap-type" | "-ms-content-zooming" | "-ms-filter" | "-ms-flex-direction" | "-ms-flex-positive" | "-ms-flow-from" | "-ms-flow-into" | "-ms-grid-columns" | "-ms-grid-rows" | "-ms-high-contrast-adjust" | "-ms-hyphenate-limit-chars" | "-ms-hyphenate-limit-lines" | "-ms-hyphenate-limit-zone" | "-ms-hyphens" | "-ms-ime-align" | "-ms-line-break" | "-ms-order" | "-ms-overflow-style" | "-ms-overflow-x" | "-ms-overflow-y" | "-ms-scroll-chaining" | "-ms-scroll-limit-x-max" | "-ms-scroll-limit-x-min" | "-ms-scroll-limit-y-max" | "-ms-scroll-limit-y-min" | "-ms-scroll-rails" | "-ms-scroll-snap-points-x" | "-ms-scroll-snap-points-y" | "-ms-scroll-snap-type" | "-ms-scroll-translation" | "-ms-scrollbar-3dlight-color" | "-ms-scrollbar-arrow-color" | "-ms-scrollbar-base-color" | "-ms-scrollbar-darkshadow-color" | "-ms-scrollbar-face-color" | "-ms-scrollbar-highlight-color" | "-ms-scrollbar-shadow-color" | "-ms-scrollbar-track-color" | "-ms-text-autospace" | "-ms-text-combine-horizontal" | "-ms-text-overflow" | "-ms-touch-action" | "-ms-touch-select" | "-ms-transform" | "-ms-transform-origin" | "-ms-transition-delay" | "-ms-transition-duration" | "-ms-transition-property" | "-ms-transition-timing-function" | "-ms-user-select" | "-ms-word-break" | "-ms-wrap-flow" | "-ms-wrap-margin" | "-ms-wrap-through" | "-ms-writing-mode" | "-webkit-align-content" | "-webkit-align-items" | "-webkit-align-self" | "-webkit-animation-delay" | "-webkit-animation-direction" | "-webkit-animation-duration" | "-webkit-animation-fill-mode" | "-webkit-animation-iteration-count" | "-webkit-animation-name" | "-webkit-animation-play-state" | "-webkit-animation-timing-function" | "-webkit-appearance" | "-webkit-backdrop-filter" | "-webkit-backface-visibility" | "-webkit-background-clip" | "-webkit-background-origin" | "-webkit-background-size" | "-webkit-border-before-color" | "-webkit-border-before-style" | "-webkit-border-before-width" | "-webkit-border-bottom-left-radius" | "-webkit-border-bottom-right-radius" | "-webkit-border-image-slice" | "-webkit-border-top-left-radius" | "-webkit-border-top-right-radius" | "-webkit-box-decoration-break" | "-webkit-box-reflect" | "-webkit-box-shadow" | "-webkit-box-sizing" | "-webkit-clip-path" | "-webkit-column-count" | "-webkit-column-fill" | "-webkit-column-rule-color" | "-webkit-column-rule-style" | "-webkit-column-rule-width" | "-webkit-column-span" | "-webkit-column-width" | "-webkit-filter" | "-webkit-flex-basis" | "-webkit-flex-direction" | "-webkit-flex-grow" | "-webkit-flex-shrink" | "-webkit-flex-wrap" | "-webkit-font-feature-settings" | "-webkit-font-kerning" | "-webkit-font-smoothing" | "-webkit-font-variant-ligatures" | "-webkit-hyphenate-character" | "-webkit-hyphens" | "-webkit-initial-letter" | "-webkit-justify-content" | "-webkit-line-break" | "-webkit-line-clamp" | "-webkit-margin-end" | "-webkit-margin-start" | "-webkit-mask-attachment" | "-webkit-mask-box-image-outset" | "-webkit-mask-box-image-repeat" | "-webkit-mask-box-image-slice" | "-webkit-mask-box-image-source" | "-webkit-mask-box-image-width" | "-webkit-mask-clip" | "-webkit-mask-composite" | "-webkit-mask-image" | "-webkit-mask-origin" | "-webkit-mask-position" | "-webkit-mask-position-x" | "-webkit-mask-position-y" | "-webkit-mask-repeat" | "-webkit-mask-repeat-x" | "-webkit-mask-repeat-y" | "-webkit-mask-size" | "-webkit-max-inline-size" | "-webkit-order" | "-webkit-overflow-scrolling" | "-webkit-padding-end" | "-webkit-padding-start" | "-webkit-perspective" | "-webkit-perspective-origin" | "-webkit-print-color-adjust" | "-webkit-ruby-position" | "-webkit-scroll-snap-type" | "-webkit-shape-margin" | "-webkit-tap-highlight-color" | "-webkit-text-combine" | "-webkit-text-decoration-color" | "-webkit-text-decoration-line" | "-webkit-text-decoration-skip" | "-webkit-text-decoration-style" | "-webkit-text-emphasis-color" | "-webkit-text-emphasis-position" | "-webkit-text-emphasis-style" | "-webkit-text-fill-color" | "-webkit-text-orientation" | "-webkit-text-size-adjust" | "-webkit-text-stroke-color" | "-webkit-text-stroke-width" | "-webkit-text-underline-position" | "-webkit-touch-callout" | "-webkit-transform" | "-webkit-transform-origin" | "-webkit-transform-style" | "-webkit-transition-delay" | "-webkit-transition-duration" | "-webkit-transition-property" | "-webkit-transition-timing-function" | "-webkit-user-modify" | "-webkit-user-select" | "-webkit-writing-mode" | "-moz-animation" | "-moz-border-image" | "-moz-column-rule" | "-moz-columns" | "-moz-transition" | "-ms-content-zoom-limit" | "-ms-content-zoom-snap" | "-ms-flex" | "-ms-scroll-limit" | "-ms-scroll-snap-x" | "-ms-scroll-snap-y" | "-ms-transition" | "-webkit-animation" | "-webkit-border-before" | "-webkit-border-image" | "-webkit-border-radius" | "-webkit-column-rule" | "-webkit-columns" | "-webkit-flex" | "-webkit-flex-flow" | "-webkit-mask" | "-webkit-mask-box-image" | "-webkit-text-emphasis" | "-webkit-text-stroke" | "-webkit-transition" | "box-align" | "box-direction" | "box-flex" | "box-flex-group" | "box-lines" | "box-ordinal-group" | "box-orient" | "box-pack" | "grid-column-gap" | "grid-gap" | "grid-row-gap" | "ime-mode" | "offset-block" | "offset-block-end" | "offset-block-start" | "offset-inline" | "offset-inline-end" | "offset-inline-start" | "scroll-snap-coordinate" | "scroll-snap-destination" | "scroll-snap-points-x" | "scroll-snap-points-y" | "scroll-snap-type-x" | "scroll-snap-type-y" | "-khtml-box-align" | "-khtml-box-direction" | "-khtml-box-flex" | "-khtml-box-flex-group" | "-khtml-box-lines" | "-khtml-box-ordinal-group" | "-khtml-box-orient" | "-khtml-box-pack" | "-khtml-line-break" | "-khtml-opacity" | "-khtml-user-select" | "-moz-background-clip" | "-moz-background-inline-policy" | "-moz-background-origin" | "-moz-background-size" | "-moz-binding" | "-moz-border-radius" | "-moz-border-radius-bottomleft" | "-moz-border-radius-bottomright" | "-moz-border-radius-topleft" | "-moz-border-radius-topright" | "-moz-box-align" | "-moz-box-direction" | "-moz-box-flex" | "-moz-box-ordinal-group" | "-moz-box-orient" | "-moz-box-pack" | "-moz-box-shadow" | "-moz-float-edge" | "-moz-force-broken-image-icon" | "-moz-opacity" | "-moz-outline" | "-moz-outline-color" | "-moz-outline-radius" | "-moz-outline-radius-bottomleft" | "-moz-outline-radius-bottomright" | "-moz-outline-radius-topleft" | "-moz-outline-radius-topright" | "-moz-outline-style" | "-moz-outline-width" | "-moz-text-align-last" | "-moz-text-decoration-color" | "-moz-text-decoration-line" | "-moz-text-decoration-style" | "-moz-user-input" | "-ms-ime-mode" | "-o-animation" | "-o-animation-delay" | "-o-animation-direction" | "-o-animation-duration" | "-o-animation-fill-mode" | "-o-animation-iteration-count" | "-o-animation-name" | "-o-animation-play-state" | "-o-animation-timing-function" | "-o-background-size" | "-o-border-image" | "-o-object-fit" | "-o-object-position" | "-o-tab-size" | "-o-text-overflow" | "-o-transform" | "-o-transform-origin" | "-o-transition" | "-o-transition-delay" | "-o-transition-duration" | "-o-transition-property" | "-o-transition-timing-function" | "-webkit-box-align" | "-webkit-box-direction" | "-webkit-box-flex" | "-webkit-box-flex-group" | "-webkit-box-lines" | "-webkit-box-ordinal-group" | "-webkit-box-orient" | "-webkit-box-pack" | "-webkit-scroll-snap-points-x" | "-webkit-scroll-snap-points-y" | "alignment-baseline" | "baseline-shift" | "clip-rule" | "color-interpolation" | "color-rendering" | "dominant-baseline" | "fill-opacity" | "fill-rule" | "flood-color" | "flood-opacity" | "glyph-orientation-vertical" | "lighting-color" | "marker-end" | "marker-mid" | "marker-start" | "shape-rendering" | "stop-color" | "stop-opacity" | "stroke-dasharray" | "stroke-dashoffset" | "stroke-linecap" | "stroke-linejoin" | "stroke-miterlimit" | "stroke-opacity" | "stroke-width" | "text-anchor" | "vector-effect" | "label" | "@apply" | "--tw-backdrop-blur" | "--tw-backdrop-brightness" | "--tw-backdrop-contrast" | "--tw-backdrop-grayscale" | "--tw-backdrop-hue-rotate" | "--tw-backdrop-invert" | "--tw-backdrop-opacity" | "--tw-backdrop-saturate" | "--tw-backdrop-sepia" | "--tw-bg-opacity" | "--tw-blur" | "--tw-border-opacity" | "--tw-border-spacing-x" | "--tw-border-spacing-y" | "--tw-brightness" | "--tw-contrast" | "--tw-divide-opacity" | "--tw-divide-x-reverse" | "--tw-divide-y-reverse" | "--tw-drop-shadow" | "--tw-gradient-from" | "--tw-gradient-stops" | "--tw-gradient-to" | "--tw-gradient-via" | "--tw-grayscale" | "--tw-hue-rotate" | "--tw-invert" | "--tw-numeric-figure" | "--tw-numeric-fraction" | "--tw-numeric-spacing" | "--tw-opacity" | "--tw-ordinal" | "--tw-placeholder-opacity" | "--tw-ring-color" | "--tw-ring-inset" | "--tw-ring-offset-color" | "--tw-ring-offset-shadow" | "--tw-ring-offset-width" | "--tw-ring-opacity" | "--tw-ring-shadow" | "--tw-rotate" | "--tw-saturate" | "--tw-scale-x" | "--tw-scale-y" | "--tw-sepia" | "--tw-shadow" | "--tw-shadow-color" | "--tw-shadow-colored" | "--tw-skew-x" | "--tw-skew-y" | "--tw-slashed-zero" | "--tw-scroll-snap-strictness" | "--tw-text-opacity" | "--tw-pan-x" | "--tw-pan-y" | "--tw-pinch-zoom" | "--tw-touch-action" | "--tw-transform" | "--tw-translate-x" | "--tw-translate-y" |
convert? | MatchConverter<Theme, MatchResult> |
Returns
Rule<Theme>
Defined in
matchColor
▸ matchColor<Theme, Section, OpacitySection>(pattern, options?, resolve?): Rule<Theme>
Type parameters
| Name | Type |
|---|---|
Theme | extends BaseTheme = BaseTheme |
Section | extends string = keyof Theme & string |
OpacitySection | extends string = keyof Theme & string |
Parameters
| Name | Type |
|---|---|
pattern | MaybeArray<string | RegExp> |
options | ColorFromThemeOptions<Theme, Section, OpacitySection> |
resolve? | ThemeRuleResolver<ColorFromThemeValue, Theme> |
Returns
Rule<Theme>
Defined in
packages/core/src/rules.ts:328
matchTheme
▸ matchTheme<Theme, Section>(pattern, section?, resolve?, convert?): Rule<Theme>
Type parameters
| Name | Type |
|---|---|
Theme | extends BaseTheme = BaseTheme |
Section | extends string = keyof Theme & string |
Parameters
| Name | Type |
|---|---|
pattern | MaybeArray<string | RegExp> |
section? | "" | Section | KebabCase<Section> |
resolve? | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "clipPath" | "color" | "colorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "filter" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "height" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "left" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "placeContent" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "right" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMargin" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "top" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "all" | "animation" | "background" | "backgroundPosition" | "border" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "columnRule" | "columns" | "flex" | "flexFlow" | "font" | "gap" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "lineClamp" | "listStyle" | "margin" | "mask" | "maskBorder" | "motion" | "offset" | "outline" | "overflow" | "overscrollBehavior" | "padding" | "placeItems" | "placeSelf" | "textDecoration" | "textEmphasis" | "transition" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnCount" | "MozColumnFill" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozImageRegion" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransformOrigin" | "MozTransformStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "azimuth" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundInlinePolicy" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBinding" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineRadius" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "WebkitScrollSnapPointsX" | "WebkitScrollSnapPointsY" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "accent-color" | "align-content" | "align-items" | "align-self" | "align-tracks" | "animation-composition" | "animation-delay" | "animation-direction" | "animation-duration" | "animation-fill-mode" | "animation-iteration-count" | "animation-name" | "animation-play-state" | "animation-timeline" | "animation-timing-function" | "aspect-ratio" | "backdrop-filter" | "backface-visibility" | "background-attachment" | "background-blend-mode" | "background-clip" | "background-color" | "background-image" | "background-origin" | "background-position-x" | "background-position-y" | "background-repeat" | "background-size" | "block-overflow" | "block-size" | "border-block-color" | "border-block-end-color" | "border-block-end-style" | "border-block-end-width" | "border-block-start-color" | "border-block-start-style" | "border-block-start-width" | "border-block-style" | "border-block-width" | "border-bottom-color" | "border-bottom-left-radius" | "border-bottom-right-radius" | "border-bottom-style" | "border-bottom-width" | "border-collapse" | "border-end-end-radius" | "border-end-start-radius" | "border-image-outset" | "border-image-repeat" | "border-image-slice" | "border-image-source" | "border-image-width" | "border-inline-color" | "border-inline-end-color" | "border-inline-end-style" | "border-inline-end-width" | "border-inline-start-color" | "border-inline-start-style" | "border-inline-start-width" | "border-inline-style" | "border-inline-width" | "border-left-color" | "border-left-style" | "border-left-width" | "border-right-color" | "border-right-style" | "border-right-width" | "border-spacing" | "border-start-end-radius" | "border-start-start-radius" | "border-top-color" | "border-top-left-radius" | "border-top-right-radius" | "border-top-style" | "border-top-width" | "box-decoration-break" | "box-shadow" | "box-sizing" | "break-after" | "break-before" | "break-inside" | "caption-side" | "caret-color" | "clip-path" | "color-adjust" | "color-scheme" | "column-count" | "column-fill" | "column-gap" | "column-rule-color" | "column-rule-style" | "column-rule-width" | "column-span" | "column-width" | "content-visibility" | "counter-increment" | "counter-reset" | "counter-set" | "empty-cells" | "flex-basis" | "flex-direction" | "flex-grow" | "flex-shrink" | "flex-wrap" | "font-family" | "font-feature-settings" | "font-kerning" | "font-language-override" | "font-optical-sizing" | "font-size" | "font-size-adjust" | "font-smooth" | "font-stretch" | "font-style" | "font-synthesis" | "font-variant" | "font-variant-alternates" | "font-variant-caps" | "font-variant-east-asian" | "font-variant-ligatures" | "font-variant-numeric" | "font-variant-position" | "font-variation-settings" | "font-weight" | "forced-color-adjust" | "grid-auto-columns" | "grid-auto-flow" | "grid-auto-rows" | "grid-column-end" | "grid-column-start" | "grid-row-end" | "grid-row-start" | "grid-template-areas" | "grid-template-columns" | "grid-template-rows" | "hanging-punctuation" | "hyphenate-character" | "image-orientation" | "image-rendering" | "image-resolution" | "initial-letter" | "inline-size" | "input-security" | "inset-block" | "inset-block-end" | "inset-block-start" | "inset-inline" | "inset-inline-end" | "inset-inline-start" | "justify-content" | "justify-items" | "justify-self" | "justify-tracks" | "letter-spacing" | "line-break" | "line-height" | "line-height-step" | "list-style-image" | "list-style-position" | "list-style-type" | "margin-block" | "margin-block-end" | "margin-block-start" | "margin-bottom" | "margin-inline" | "margin-inline-end" | "margin-inline-start" | "margin-left" | "margin-right" | "margin-top" | "mask-border-mode" | "mask-border-outset" | "mask-border-repeat" | "mask-border-slice" | "mask-border-source" | "mask-border-width" | "mask-clip" | "mask-composite" | "mask-image" | "mask-mode" | "mask-origin" | "mask-position" | "mask-repeat" | "mask-size" | "mask-type" | "math-depth" | "math-shift" | "math-style" | "max-block-size" | "max-height" | "max-inline-size" | "max-lines" | "max-width" | "min-block-size" | "min-height" | "min-inline-size" | "min-width" | "mix-blend-mode" | "motion-distance" | "motion-path" | "motion-rotation" | "object-fit" | "object-position" | "offset-anchor" | "offset-distance" | "offset-path" | "offset-rotate" | "offset-rotation" | "outline-color" | "outline-offset" | "outline-style" | "outline-width" | "overflow-anchor" | "overflow-block" | "overflow-clip-box" | "overflow-clip-margin" | "overflow-inline" | "overflow-wrap" | "overflow-x" | "overflow-y" | "overscroll-behavior-block" | "overscroll-behavior-inline" | "overscroll-behavior-x" | "overscroll-behavior-y" | "padding-block" | "padding-block-end" | "padding-block-start" | "padding-bottom" | "padding-inline" | "padding-inline-end" | "padding-inline-start" | "padding-left" | "padding-right" | "padding-top" | "page-break-after" | "page-break-before" | "page-break-inside" | "paint-order" | "perspective-origin" | "place-content" | "pointer-events" | "print-color-adjust" | "row-gap" | "ruby-align" | "ruby-merge" | "ruby-position" | "scroll-behavior" | "scroll-margin" | "scroll-margin-block" | "scroll-margin-block-end" | "scroll-margin-block-start" | "scroll-margin-bottom" | "scroll-margin-inline" | "scroll-margin-inline-end" | "scroll-margin-inline-start" | "scroll-margin-left" | "scroll-margin-right" | "scroll-margin-top" | "scroll-padding" | "scroll-padding-block" | "scroll-padding-block-end" | "scroll-padding-block-start" | "scroll-padding-bottom" | "scroll-padding-inline" | "scroll-padding-inline-end" | "scroll-padding-inline-start" | "scroll-padding-left" | "scroll-padding-right" | "scroll-padding-top" | "scroll-snap-align" | "scroll-snap-margin" | "scroll-snap-margin-bottom" | "scroll-snap-margin-left" | "scroll-snap-margin-right" | "scroll-snap-margin-top" | "scroll-snap-stop" | "scroll-snap-type" | "scrollbar-color" | "scrollbar-gutter" | "scrollbar-width" | "shape-image-threshold" | "shape-margin" | "shape-outside" | "tab-size" | "table-layout" | "text-align" | "text-align-last" | "text-combine-upright" | "text-decoration-color" | "text-decoration-line" | "text-decoration-skip" | "text-decoration-skip-ink" | "text-decoration-style" | "text-decoration-thickness" | "text-emphasis-color" | "text-emphasis-position" | "text-emphasis-style" | "text-indent" | "text-justify" | "text-orientation" | "text-overflow" | "text-rendering" | "text-shadow" | "text-size-adjust" | "text-transform" | "text-underline-offset" | "text-underline-position" | "touch-action" | "transform-box" | "transform-origin" | "transform-style" | "transition-delay" | "transition-duration" | "transition-property" | "transition-timing-function" | "unicode-bidi" | "user-select" | "vertical-align" | "white-space" | "will-change" | "word-break" | "word-spacing" | "word-wrap" | "writing-mode" | "z-index" | "background-position" | "border-block" | "border-block-end" | "border-block-start" | "border-bottom" | "border-color" | "border-image" | "border-inline" | "border-inline-end" | "border-inline-start" | "border-left" | "border-radius" | "border-right" | "border-style" | "border-top" | "border-width" | "column-rule" | "flex-flow" | "grid-area" | "grid-column" | "grid-row" | "grid-template" | "line-clamp" | "list-style" | "mask-border" | "overscroll-behavior" | "place-items" | "place-self" | "text-decoration" | "text-emphasis" | "-moz-animation-delay" | "-moz-animation-direction" | "-moz-animation-duration" | "-moz-animation-fill-mode" | "-moz-animation-iteration-count" | "-moz-animation-name" | "-moz-animation-play-state" | "-moz-animation-timing-function" | "-moz-appearance" | "-moz-backface-visibility" | "-moz-border-bottom-colors" | "-moz-border-end-color" | "-moz-border-end-style" | "-moz-border-end-width" | "-moz-border-left-colors" | "-moz-border-right-colors" | "-moz-border-start-color" | "-moz-border-start-style" | "-moz-border-top-colors" | "-moz-box-sizing" | "-moz-column-count" | "-moz-column-fill" | "-moz-column-rule-color" | "-moz-column-rule-style" | "-moz-column-rule-width" | "-moz-column-width" | "-moz-context-properties" | "-moz-font-feature-settings" | "-moz-font-language-override" | "-moz-hyphens" | "-moz-image-region" | "-moz-margin-end" | "-moz-margin-start" | "-moz-orient" | "-moz-osx-font-smoothing" | "-moz-padding-end" | "-moz-padding-start" | "-moz-perspective" | "-moz-perspective-origin" | "-moz-stack-sizing" | "-moz-tab-size" | "-moz-text-blink" | "-moz-text-size-adjust" | "-moz-transform-origin" | "-moz-transform-style" | "-moz-transition-delay" | "-moz-transition-duration" | "-moz-transition-property" | "-moz-transition-timing-function" | "-moz-user-focus" | "-moz-user-modify" | "-moz-user-select" | "-moz-window-dragging" | "-moz-window-shadow" | "-ms-accelerator" | "-ms-block-progression" | "-ms-content-zoom-chaining" | "-ms-content-zoom-limit-max" | "-ms-content-zoom-limit-min" | "-ms-content-zoom-snap-points" | "-ms-content-zoom-snap-type" | "-ms-content-zooming" | "-ms-filter" | "-ms-flex-direction" | "-ms-flex-positive" | "-ms-flow-from" | "-ms-flow-into" | "-ms-grid-columns" | "-ms-grid-rows" | "-ms-high-contrast-adjust" | "-ms-hyphenate-limit-chars" | "-ms-hyphenate-limit-lines" | "-ms-hyphenate-limit-zone" | "-ms-hyphens" | "-ms-ime-align" | "-ms-line-break" | "-ms-order" | "-ms-overflow-style" | "-ms-overflow-x" | "-ms-overflow-y" | "-ms-scroll-chaining" | "-ms-scroll-limit-x-max" | "-ms-scroll-limit-x-min" | "-ms-scroll-limit-y-max" | "-ms-scroll-limit-y-min" | "-ms-scroll-rails" | "-ms-scroll-snap-points-x" | "-ms-scroll-snap-points-y" | "-ms-scroll-snap-type" | "-ms-scroll-translation" | "-ms-scrollbar-3dlight-color" | "-ms-scrollbar-arrow-color" | "-ms-scrollbar-base-color" | "-ms-scrollbar-darkshadow-color" | "-ms-scrollbar-face-color" | "-ms-scrollbar-highlight-color" | "-ms-scrollbar-shadow-color" | "-ms-scrollbar-track-color" | "-ms-text-autospace" | "-ms-text-combine-horizontal" | "-ms-text-overflow" | "-ms-touch-action" | "-ms-touch-select" | "-ms-transform" | "-ms-transform-origin" | "-ms-transition-delay" | "-ms-transition-duration" | "-ms-transition-property" | "-ms-transition-timing-function" | "-ms-user-select" | "-ms-word-break" | "-ms-wrap-flow" | "-ms-wrap-margin" | "-ms-wrap-through" | "-ms-writing-mode" | "-webkit-align-content" | "-webkit-align-items" | "-webkit-align-self" | "-webkit-animation-delay" | "-webkit-animation-direction" | "-webkit-animation-duration" | "-webkit-animation-fill-mode" | "-webkit-animation-iteration-count" | "-webkit-animation-name" | "-webkit-animation-play-state" | "-webkit-animation-timing-function" | "-webkit-appearance" | "-webkit-backdrop-filter" | "-webkit-backface-visibility" | "-webkit-background-clip" | "-webkit-background-origin" | "-webkit-background-size" | "-webkit-border-before-color" | "-webkit-border-before-style" | "-webkit-border-before-width" | "-webkit-border-bottom-left-radius" | "-webkit-border-bottom-right-radius" | "-webkit-border-image-slice" | "-webkit-border-top-left-radius" | "-webkit-border-top-right-radius" | "-webkit-box-decoration-break" | "-webkit-box-reflect" | "-webkit-box-shadow" | "-webkit-box-sizing" | "-webkit-clip-path" | "-webkit-column-count" | "-webkit-column-fill" | "-webkit-column-rule-color" | "-webkit-column-rule-style" | "-webkit-column-rule-width" | "-webkit-column-span" | "-webkit-column-width" | "-webkit-filter" | "-webkit-flex-basis" | "-webkit-flex-direction" | "-webkit-flex-grow" | "-webkit-flex-shrink" | "-webkit-flex-wrap" | "-webkit-font-feature-settings" | "-webkit-font-kerning" | "-webkit-font-smoothing" | "-webkit-font-variant-ligatures" | "-webkit-hyphenate-character" | "-webkit-hyphens" | "-webkit-initial-letter" | "-webkit-justify-content" | "-webkit-line-break" | "-webkit-line-clamp" | "-webkit-margin-end" | "-webkit-margin-start" | "-webkit-mask-attachment" | "-webkit-mask-box-image-outset" | "-webkit-mask-box-image-repeat" | "-webkit-mask-box-image-slice" | "-webkit-mask-box-image-source" | "-webkit-mask-box-image-width" | "-webkit-mask-clip" | "-webkit-mask-composite" | "-webkit-mask-image" | "-webkit-mask-origin" | "-webkit-mask-position" | "-webkit-mask-position-x" | "-webkit-mask-position-y" | "-webkit-mask-repeat" | "-webkit-mask-repeat-x" | "-webkit-mask-repeat-y" | "-webkit-mask-size" | "-webkit-max-inline-size" | "-webkit-order" | "-webkit-overflow-scrolling" | "-webkit-padding-end" | "-webkit-padding-start" | "-webkit-perspective" | "-webkit-perspective-origin" | "-webkit-print-color-adjust" | "-webkit-ruby-position" | "-webkit-scroll-snap-type" | "-webkit-shape-margin" | "-webkit-tap-highlight-color" | "-webkit-text-combine" | "-webkit-text-decoration-color" | "-webkit-text-decoration-line" | "-webkit-text-decoration-skip" | "-webkit-text-decoration-style" | "-webkit-text-emphasis-color" | "-webkit-text-emphasis-position" | "-webkit-text-emphasis-style" | "-webkit-text-fill-color" | "-webkit-text-orientation" | "-webkit-text-size-adjust" | "-webkit-text-stroke-color" | "-webkit-text-stroke-width" | "-webkit-text-underline-position" | "-webkit-touch-callout" | "-webkit-transform" | "-webkit-transform-origin" | "-webkit-transform-style" | "-webkit-transition-delay" | "-webkit-transition-duration" | "-webkit-transition-property" | "-webkit-transition-timing-function" | "-webkit-user-modify" | "-webkit-user-select" | "-webkit-writing-mode" | "-moz-animation" | "-moz-border-image" | "-moz-column-rule" | "-moz-columns" | "-moz-transition" | "-ms-content-zoom-limit" | "-ms-content-zoom-snap" | "-ms-flex" | "-ms-scroll-limit" | "-ms-scroll-snap-x" | "-ms-scroll-snap-y" | "-ms-transition" | "-webkit-animation" | "-webkit-border-before" | "-webkit-border-image" | "-webkit-border-radius" | "-webkit-column-rule" | "-webkit-columns" | "-webkit-flex" | "-webkit-flex-flow" | "-webkit-mask" | "-webkit-mask-box-image" | "-webkit-text-emphasis" | "-webkit-text-stroke" | "-webkit-transition" | "box-align" | "box-direction" | "box-flex" | "box-flex-group" | "box-lines" | "box-ordinal-group" | "box-orient" | "box-pack" | "grid-column-gap" | "grid-gap" | "grid-row-gap" | "ime-mode" | "offset-block" | "offset-block-end" | "offset-block-start" | "offset-inline" | "offset-inline-end" | "offset-inline-start" | "scroll-snap-coordinate" | "scroll-snap-destination" | "scroll-snap-points-x" | "scroll-snap-points-y" | "scroll-snap-type-x" | "scroll-snap-type-y" | "-khtml-box-align" | "-khtml-box-direction" | "-khtml-box-flex" | "-khtml-box-flex-group" | "-khtml-box-lines" | "-khtml-box-ordinal-group" | "-khtml-box-orient" | "-khtml-box-pack" | "-khtml-line-break" | "-khtml-opacity" | "-khtml-user-select" | "-moz-background-clip" | "-moz-background-inline-policy" | "-moz-background-origin" | "-moz-background-size" | "-moz-binding" | "-moz-border-radius" | "-moz-border-radius-bottomleft" | "-moz-border-radius-bottomright" | "-moz-border-radius-topleft" | "-moz-border-radius-topright" | "-moz-box-align" | "-moz-box-direction" | "-moz-box-flex" | "-moz-box-ordinal-group" | "-moz-box-orient" | "-moz-box-pack" | "-moz-box-shadow" | "-moz-float-edge" | "-moz-force-broken-image-icon" | "-moz-opacity" | "-moz-outline" | "-moz-outline-color" | "-moz-outline-radius" | "-moz-outline-radius-bottomleft" | "-moz-outline-radius-bottomright" | "-moz-outline-radius-topleft" | "-moz-outline-radius-topright" | "-moz-outline-style" | "-moz-outline-width" | "-moz-text-align-last" | "-moz-text-decoration-color" | "-moz-text-decoration-line" | "-moz-text-decoration-style" | "-moz-user-input" | "-ms-ime-mode" | "-o-animation" | "-o-animation-delay" | "-o-animation-direction" | "-o-animation-duration" | "-o-animation-fill-mode" | "-o-animation-iteration-count" | "-o-animation-name" | "-o-animation-play-state" | "-o-animation-timing-function" | "-o-background-size" | "-o-border-image" | "-o-object-fit" | "-o-object-position" | "-o-tab-size" | "-o-text-overflow" | "-o-transform" | "-o-transform-origin" | "-o-transition" | "-o-transition-delay" | "-o-transition-duration" | "-o-transition-property" | "-o-transition-timing-function" | "-webkit-box-align" | "-webkit-box-direction" | "-webkit-box-flex" | "-webkit-box-flex-group" | "-webkit-box-lines" | "-webkit-box-ordinal-group" | "-webkit-box-orient" | "-webkit-box-pack" | "-webkit-scroll-snap-points-x" | "-webkit-scroll-snap-points-y" | "alignment-baseline" | "baseline-shift" | "clip-rule" | "color-interpolation" | "color-rendering" | "dominant-baseline" | "fill-opacity" | "fill-rule" | "flood-color" | "flood-opacity" | "glyph-orientation-vertical" | "lighting-color" | "marker-end" | "marker-mid" | "marker-start" | "shape-rendering" | "stop-color" | "stop-opacity" | "stroke-dasharray" | "stroke-dashoffset" | "stroke-linecap" | "stroke-linejoin" | "stroke-miterlimit" | "stroke-opacity" | "stroke-width" | "text-anchor" | "vector-effect" | "label" | "@apply" | "--tw-backdrop-blur" | "--tw-backdrop-brightness" | "--tw-backdrop-contrast" | "--tw-backdrop-grayscale" | "--tw-backdrop-hue-rotate" | "--tw-backdrop-invert" | "--tw-backdrop-opacity" | "--tw-backdrop-saturate" | "--tw-backdrop-sepia" | "--tw-bg-opacity" | "--tw-blur" | "--tw-border-opacity" | "--tw-border-spacing-x" | "--tw-border-spacing-y" | "--tw-brightness" | "--tw-contrast" | "--tw-divide-opacity" | "--tw-divide-x-reverse" | "--tw-divide-y-reverse" | "--tw-drop-shadow" | "--tw-gradient-from" | "--tw-gradient-stops" | "--tw-gradient-to" | "--tw-gradient-via" | "--tw-grayscale" | "--tw-hue-rotate" | "--tw-invert" | "--tw-numeric-figure" | "--tw-numeric-fraction" | "--tw-numeric-spacing" | "--tw-opacity" | "--tw-ordinal" | "--tw-placeholder-opacity" | "--tw-ring-color" | "--tw-ring-inset" | "--tw-ring-offset-color" | "--tw-ring-offset-shadow" | "--tw-ring-offset-width" | "--tw-ring-opacity" | "--tw-ring-shadow" | "--tw-rotate" | "--tw-saturate" | "--tw-scale-x" | "--tw-scale-y" | "--tw-sepia" | "--tw-shadow" | "--tw-shadow-color" | "--tw-shadow-colored" | "--tw-skew-x" | "--tw-skew-y" | "--tw-slashed-zero" | "--tw-scroll-snap-strictness" | "--tw-text-opacity" | "--tw-pan-x" | "--tw-pan-y" | "--tw-pinch-zoom" | "--tw-touch-action" | "--tw-transform" | "--tw-translate-x" | "--tw-translate-y" | ThemeRuleResolver<ThemeValue<Theme[Section]>, Theme> |
convert? | ThemeMatchConverter<ThemeValue<Theme[Section]>, Theme> |
Returns
Rule<Theme>
Defined in
packages/core/src/rules.ts:176
withAutocomplete
▸ withAutocomplete<Theme>(resolver, autocomplete): RuleResolver<Theme>
Type parameters
| Name | Type |
|---|---|
Theme | extends BaseTheme = BaseTheme |
Parameters
| Name | Type |
|---|---|
resolver | RuleResolver<Theme, MatchResult> |
autocomplete | undefined | null | false | AutocompleteProvider<Theme> |
Returns
RuleResolver<Theme>
Defined in
packages/core/src/autocomplete.ts:49
▸ withAutocomplete<Theme>(resolver, autocomplete): VariantResolver<Theme>
Type parameters
| Name | Type |
|---|---|
Theme | extends BaseTheme = BaseTheme |
Parameters
| Name | Type |
|---|---|
resolver | VariantResolver<Theme> |
autocomplete | undefined | null | false | AutocompleteProvider<Theme> |
Returns
VariantResolver<Theme>
Defined in
packages/core/src/autocomplete.ts:54
▸ withAutocomplete<Theme>(rule, autocomplete): Rule<Theme>
Type parameters
| Name | Type |
|---|---|
Theme | extends BaseTheme = BaseTheme |
Parameters
| Name | Type |
|---|---|
rule | Rule<Theme> |
autocomplete | undefined | null | false | AutocompleteProvider<Theme> |
Returns
Rule<Theme>
Defined in
packages/core/src/autocomplete.ts:59
Static Extraction
consume
▸ consume(markup, tw?): string
Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps)
Note: Consider using inline or extract instead.
- parse the markup and process element classes with the provided Twind instance
- update the class attributes if necessary
- return the HTML string with the final element classes
js
import { consume, stringify, tw } from '@twind/core'
function render() {
const html = renderApp()
// remember global classes
const restore = tw.snapshot()
// generated markup
const markup = consume(html)
// create CSS
const css = stringify(tw.target)
// restore global classes
restore()
// inject as last element into the head
return markup.replace('</head>', `<style data-twind>${css}</style></head>`)
}You can provide your own Twind instance:
js
import { consume, stringify } from '@twind/core'
import { tw } from './custom/twind/instance'
function render() {
const html = renderApp()
// remember global classes
const restore = snapshot(tw.target)
// generated markup
const markup = consume(html)
// restore global classes
restore()
// create CSS
const css = stringify(tw.target)
// inject as last element into the head
return markup.replace('</head>', `<style data-twind>${css}</style></head>`)
}Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
markup | string | undefined | HTML to process |
tw | (className: string) => string | tw$ | a Twind instance |
Returns
string
possibly modified HTML
Defined in
extract
▸ extract(html, tw?): ExtractResult
Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps)
Note: Consider using inline instead.
- parse the markup and process element classes with the provided Twind instance
- update the class attributes if necessary
- return the HTML string with the final element classes
js
import { extract } from '@twind/core'
function render() {
const { html, css } = extract(renderApp())
// inject as last element into the head
return html.replace('</head>', `<style data-twind>${css}</style></head>`)
}You can provide your own Twind instance:
js
import { extract } from '@twind/core'
import { tw } from './custom/twind/instance'
function render() {
const { html, css } = extract(renderApp(), tw)
// inject as last element into the head
return html.replace('</head>', `<style data-twind>${css}</style></head>`)
}Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
html | string | undefined | - |
tw | Twind<any, any> | tw$ | a Twind instance (default: twind managed tw) |
Returns
the possibly modified html and css
Defined in
inline
▸ inline(markup, options?): string
Used for static HTML processing (usually to provide SSR support for your javascript-powered web apps)
- parse the markup and process element classes with the provided Twind instance
- update the class attributes if necessary
- inject a style element with the CSS as last element into the head
- return the HTML string with the final element classes
js
import { inline } from '@twind/core'
function render() {
return inline(renderApp())
}Minify CSS with @parcel/css:
js
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:
js
import { inline } from '@twind/core'
import { tw } from './custom/twind/instance'
function render() {
return inline(renderApp(), { tw })
}Parameters
| Name | Type | Description |
|---|---|---|
markup | string | HTML to process |
options | undefined | Twind<any, any> | InlineOptions | to customize the processing |
Returns
string
the resulting HTML
Defined in
Sheets
cssom
▸ cssom(element?): Sheet<CSSStyleSheet>
Parameters
| Name | Type |
|---|---|
element? | null | string | false | CSSStyleSheet | HTMLStyleElement |
Returns
Defined in
packages/core/src/sheets.ts:23
dom
▸ dom(element?): Sheet<HTMLStyleElement>
Parameters
| Name | Type |
|---|---|
element? | null | string | false | HTMLStyleElement |
Returns
Defined in
packages/core/src/sheets.ts:88
getSheet
▸ getSheet(useDOMSheet?, disableResume?): Sheet<string[] | HTMLStyleElement | CSSStyleSheet>
Returns a sheet useable in the current environment.
Parameters
| Name | Type | Description |
|---|---|---|
useDOMSheet? | boolean | usually something like process.env.NODE_ENV != 'production' or import.meta.env.DEV (default: browser=cssom, server=virtual) |
disableResume? | boolean | to not include or use resume data |
Returns
Sheet<string[] | HTMLStyleElement | CSSStyleSheet>
a sheet to use
Defined in
packages/core/src/sheets.ts:177
stringify
▸ stringify(target): string
Parameters
| Name | Type |
|---|---|
target | unknown |
Returns
string
Defined in
packages/core/src/sheets.ts:194
virtual
▸ virtual(includeResumeData?): Sheet<string[]>
Parameters
| Name | Type |
|---|---|
includeResumeData? | boolean |
Returns
Sheet<string[]>
Defined in
packages/core/src/sheets.ts:129
Style Injectors
injectGlobal
▸ injectGlobal(style): void
Injects styles into the global scope and is useful for applications such as gloabl styles, CSS resets or font faces.
It does not return a class name, but adds the styles within the base layer to the stylesheet directly.
Parameters
| Name | Type |
|---|---|
style | string | CSSBase |
Returns
void
Defined in
packages/core/src/inject-global.ts:8
▸ injectGlobal(strings, ...interpolations): void
Injects styles into the global scope and is useful for applications such as gloabl styles, CSS resets or font faces.
It does not return a class name, but adds the styles within the base layer to the stylesheet directly.
Parameters
| Name | Type |
|---|---|
strings | TemplateStringsArray |
...interpolations | readonly CSSValue[] |
Returns
void
Defined in
packages/core/src/inject-global.ts:10
keyframes
▸ keyframes(style): StringLike
Note: The styles will be injected on first use.
Parameters
| Name | Type |
|---|---|
style | string | CSSObject |
Returns
Defined in
packages/core/src/keyframes.ts:9
▸ keyframes(strings, ...interpolations): StringLike
Note: The styles will be injected on first use.
Parameters
| Name | Type |
|---|---|
strings | TemplateStringsArray |
...interpolations | readonly CSSValue[] |
Returns
Defined in
packages/core/src/keyframes.ts:11
tw
▸ tw(tokens): string
A proxy to the currently active Twind instance.
Parameters
| Name | Type |
|---|---|
tokens | StringLike |
Returns
string
Defined in
tx
▸ tx(...classes): string
Using the default tw instance:
js
import { tw } from '@twind/core'
tx`underline ${falsy && 'italic'}`
tx('underline', falsy && 'italic')
tx({'underline': true, 'italic': false})
// using a custom twind instance
import { tw } from './custom/twind'
import { tw } from './custom/twind'
tx.bind(tw)Using a custom tw instance:
js
import { tx as tx$ } from '@twind/core'
import { tw } from './custom/twind'
export const tx = tx$.bind(tw)
tx`underline ${falsy && 'italic'}`
tx('underline', falsy && 'italic')
tx({'underline': true, 'italic': false})Parameters
| Name | Type |
|---|---|
...classes | Class[] |
Returns
string
the class name
Defined in
▸ tx(strings, ...interpolations): string
Using the default tw instance:
js
import { tw } from '@twind/core'
tx`underline ${falsy && 'italic'}`
tx('underline', falsy && 'italic')
tx({'underline': true, 'italic': false})
// using a custom twind instance
import { tw } from './custom/twind'
import { tw } from './custom/twind'
tx.bind(tw)Using a custom tw instance:
js
import { tx as tx$ } from '@twind/core'
import { tw } from './custom/twind'
export const tx = tx$.bind(tw)
tx`underline ${falsy && 'italic'}`
tx('underline', falsy && 'italic')
tx({'underline': true, 'italic': false})Parameters
| Name | Type |
|---|---|
strings | TemplateStringsArray |
...interpolations | readonly Class[] |
Returns
string
the class name
Defined in
Interfaces
- AnimationFunction
- AutocompleteContext
- BaseProperties
- BaseTheme
- CSSNested
- ClassObject
- ColorFromThemeOptions
- ColorFromThemeValue
- ColorFunctionOptions
- ColorRecord
- Context
- CustomProperties
- ExtractResult
- InjectGlobalFunction
- InlineMinify
- InlineOptions
- KeyframesFunction
- ParsedDevRule
- ParsedRule
- PresetThunk
- Sheet
- SheetRule
- Style
- StyleConfig
- StyleFunction
- ThemeFunction
- ThemeSectionResolver
- ThemeSectionResolverContext
- Twind
- TwindConfig
- TwindMutationObserver
- TwindPresetConfig
- TwindRule
- TwindUserConfig
- TxFunction
Type Aliases
- Animation
- ArrayType
- AutocompleteItem
- AutocompleteModifier
- AutocompleteProvider
- CSSBase
- CSSFontFace
- CSSObject
- CSSProperties
- CSSValue
- Class
- ColorFunction
- ColorValue
- DarkColor
- DarkModeConfig
- DefaultVariants
- ExtractTheme
- ExtractThemes
- ExtractUserTheme
- Falsey
- FilterByThemeValue
- Finalize
- HashFunction
- KebabCase
- Keyframes
- MatchConverter
- MatchResult
- MaybeArray
- MaybeColorValue
- MaybeThunk
- MorphVariant
- Nested
- NestedFunction
- PartialTheme
- Preflight
- PreflightThunk
- Preset
- PropsOf
- RestoreSnapshot
- Rule
- RuleResolver
- RuleResult
- ScreenValue
- SheetFactory
- StrictMorphVariant
- StringLike
- StringifyDeclaration
- StyleProps
- StyleToken
- StyleTokenValue
- ThemeConfig
- ThemeMatchConverter
- ThemeMatchResult
- ThemeRuleResolver
- ThemeSection
- ThemeValue
- TypedAtRules
- TypedAtRulesKeys
- UnionToIntersection
- Variant
- VariantResolver
- VariantResult
- VariantsProps
- When