TWYLED

Props

Below are listed all of the props available and the css property they map to organized by the theme slot they can take values from:

Colors

Prop
CSS Property
bg
background-color
color
color
textDecorationColor
text-decoration-color
accentColor
accent-color
caretColor
caret-color
fill
fill
stroke
stroke
borderColor
border-color
borderLeftColor
border-left-color
borderRightColor
border-right-color
borderTopColor
border-top-color
borderBottomColor
border-bottom-color
borderXColor
border-left-color, border-right-color
borderYColor
border-top-color, border-bottom-color

Spacing

Prop
CSS Property
p
padding
pl
padding-left
pr
padding-right
pt
padding-top
pb
padding-bottom
px
padding-left, padding-right
py
padding-top, padding-bottom
m
margin
ml
margin-left
mr
margin-right
mt
margin-top
mb
margin-bottom
mx
margin-left, margin-right
my
margin-top, margin-bottom
gap
gap
basis
flex-basis

Border width

Prop
CSS Property
border
border
borderLeft
border-left
borderRight
border-right
borderTop
border-top
borderBottom
border-bottom
borderX
border-left, border-right
borderY
border-top, border-bottom
borderWidth
border-width
borderLeftWidth
border-left-width
borderRightWidth
border-right-width
borderTopWidth
border-top-width
borderBottomWidth
boder-bottom-width
borderXWidth
border-left-width, border-right-width
borderYWidth
border-top-width, border-bottom-width

Border radius

Prop
CSS Property
rounded
border-radius
roundedLeft
border-top-left-radius, border-bottom-left-radius
roundedRight
border-top-right-radius, border-bottom-right-radius
roundedTop
border-top-left-radius, border-top-right-radius
roundedBottom
border-bottom-left-radius, border-bottom-right-radius
roundedTopLeft
border-top-left-radius
roundedBottomLeft
border-bottom-left-radius
roundedTopRight
border-top-right-radius
roundedBottomRight
border-bottom-right-radius

Font family

Prop
CSS Property
fontFamily
font-family

Font size

Prop
CSS Property
fontSize
font-size

Font weight

Prop
CSS Property
fontSize
font-size

Line height

Prop
CSS Property
lineHeight
line-height

Z-index

Prop
CSS Property
zIndex
z-index

Other (non-themed) props

Prop
CSS Property
w
width
minW
min-width
maxW
max-width
h
height
minH
min-height
maxH
max-height
boxSizing
box-sizing
display
display
position
position
top
top
bottom
bottom
left
left
right
right
visibility
visibility
overflow
overflow
overflowX
overflow-x
overflowY
overflow-y
objectFit
object-fit
textDecorationStyle
text-decoration-style
textDecorationThickness
text-decoration-thickness
textUnderlineOffset
text-underline-offset
textTransform
text-transform
textOverflow
text-overflow
verticalAlign
vertical-align
whiteSpace
white-space
wordBreak
word-break
textAlign
text-align
letterSpacing
letter-spacing
fontStyle
font-style
textDecoration
text-decoration-line
alignItems
align-items
justifyContent
justify-content
flexDirection
flex-direction
flexWrap
flex-wrap
grow
grow
shrink
shrink
flex
flex
justifySelf
justify-self
alignSelf
align-self
order
order
borderStyle
border-style
borderLeftStyle
border-left-style
borderRightStyle
border-right-style
borderTopStyle
border-top-style
borderBottomStyle
border-bottom-style
borderXStyle
border-x-style
borderYStyle
border-y-style
transitionProperty
transition-property
transitionDuration
transition-duration
transitionDelay
transition-delay
transitionTimingFunction
transition-timing-function
listStyleType
list-style-type
listStylePosition
list-style-position
borderCollapse
border-collapse
borderSpacing
border-spacing
tableLayout
table-layout
transition
transition
opacity
opacity
transform
transform
transformOrigin
transform-origin
appearance
appearance
cursor
cursor
pointerEvents
pointer-events
resize
resize
scrollBehavior
scroll-behavior
userSelect
user-select
strokeWidth
stroke-width

Pseudo selector props

Prop
Pseudo selector
$hover
:hover
$focus
:focus
$focusVisible
:focus-visible
$focusWithin
:focus-within
$active
:active
$disabled
:disabled