Class name |
CSS rules |
.items-baseline |
align-items: baseline; |
.items-center |
align-items: center; |
.items-end |
align-items: flex-end; |
.items-start |
align-items: flex-start; |
.items-stretch |
align-items: stretch; |
Class name |
CSS rules |
.bg |
background-color: ${theme.backgroundColor.default || theme.color.default}; |
.bg-${key} |
background-color: ${theme.backgroundColor[key] || theme.color[key]}; |
Class name |
CSS rules |
.border |
border-color: ${theme.borderColor.default || theme.color.default}; |
.border-${key} |
border-color: ${theme.borderColor[key] || theme.color[key]}; |
defaultValue
= theme.borderRadius.default
value
= theme.borderRadius[key]
|| resolveNumericValue(key)
Class name |
CSS rules |
.rounded |
border-radius: ${defaultValue}; |
.rounded-t |
border-top-left-radius: ${defaultValue};
border-top-right-radius: ${defaultValue}; |
.rounded-r |
border-top-right-radius: ${defaultValue};
border-bottom-right-radius: ${defaultValue}; |
.rounded-b |
border-bottom-left-radius: ${defaultValue};
border-bottom-right-radius: ${defaultValue}; |
.rounded-l |
border-top-left-radius: ${defaultValue};
border-bottom-left-radius: ${defaultValue}; |
.rounded-tl |
border-top-left-radius: ${defaultValue}; |
.rounded-tr |
border-top-right-radius: ${defaultValue}; |
.rounded-bl |
border-bottom-left-radius: ${defaultValue}; |
.rounded-br |
border-bottom-right-radius: ${defaultValue}; |
.rounded-full |
border-radius: 9999px; |
.rounded-t-full |
border-top-left-radius: 9999px;
border-top-right-radius: 9999px; |
.rounded-r-full |
border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px; |
.rounded-b-full |
border-bottom-left-radius: 9999px;
border-bottom-right-radius: 9999px; |
.rounded-l-full |
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px; |
.rounded-tl-full |
border-top-left-radius: 9999px; |
.rounded-tr-full |
border-top-right-radius: 9999px; |
.rounded-bl-full |
border-bottom-left-radius: 9999px; |
.rounded-br-full |
border-bottom-right-radius: 9999px; |
.rounded-${key} |
border-radius: ${value}; |
.rounded-t-${key} |
border-top-left-radius: ${value};
border-top-right-radius: ${value}; |
.rounded-r-${key} |
border-top-right-radius: ${value};
border-bottom-right-radius: ${value}; |
.rounded-b-${key} |
border-bottom-left-radius: ${value};
border-bottom-right-radius: ${value}; |
.rounded-l-${key} |
border-top-left-radius: ${value};
border-bottom-left-radius: ${value}; |
.rounded-tl-${key} |
border-top-left-radius: ${value}; |
.rounded-tr-${key} |
border-top-right-radius: ${value}; |
.rounded-bl-${key} |
border-bottom-left-radius: ${value}; |
.rounded-br-${key} |
border-bottom-right-radius: ${value}; |
defaultValue
= theme.borderWidth.default
value
= theme.borderWidth[key]
|| resolveNumericValue(key)
Class name |
CSS rules |
.b |
border-width: ${defaultValue}; |
.bx |
border-left-width: ${defaultValue};
border-right-width: ${defaultValue}; |
.by |
border-top-width: ${defaultValue};
border-bottom-width: ${defaultValue}; |
.bt |
border-top-width: ${defaultValue}; |
.br |
border-right-width: ${defaultValue}; |
.bb |
border-bottom-width: ${defaultValue}; |
.bl |
border-left-width: ${defaultValue}; |
.b-${key} |
border-width: ${value}; |
.bx-${key} |
border-left-width: ${value};
border-right-width: ${value}; |
.by-${key} |
border-top-width: ${value};
border-bottom-width: ${value}; |
.bt-${key} |
border-top-width: ${value}; |
.br-${key} |
border-right-width: ${value}; |
.bb-${key} |
border-bottom-width: ${value}; |
.bl-${key} |
border-left-width: ${value}; |
Class name |
CSS rules |
.color |
color: ${theme.color.default}; |
.color-${key} |
color: ${theme.color[key]}; |
Class name |
CSS rules |
.cursor-default |
cursor: default; |
.cursor-pointer |
cursor: pointer; |
Class name |
CSS rules |
.block |
display: block; |
.flex |
display: flex; |
.hidden |
display: none; |
.inline-flex |
display: inline-flex; |
Class name |
CSS rules |
.flex-1 |
flex: 1 1 0%; |
.flex-auto |
flex: 1 1 auto; |
.flex-initial |
flex: 0 1 auto; |
.flex-none |
flex: none; |
Class name |
CSS rules |
.flex-nowrap |
flex-wrap: nowrap; |
.flex-wrap |
flex-wrap: wrap; |
.flex-wrap-reverse |
flex-wrap: wrap-reverse; |
Class name |
CSS rules |
.font |
font-family: ${theme.fontFamily.default}; |
.font-${key} |
font-family: ${theme.fontFamily[key]}; |
Class name |
CSS rules |
.font-${key} |
font-size: ${theme.fontSize[key]}; |
Class name |
CSS rules |
.font-${key} |
font-weight: ${theme.fontWeight[key]}; |
Class name |
CSS rules |
.h |
height: ${theme.height.default}; |
.h-screen |
height: 100vh; |
.h-${key} |
height: ${theme.height[key] || computeNumericValue(key)}; |
.minh |
min-height: ${theme.height.default}; |
.minh-screen |
min-height: 100vh; |
.minh-${key} |
min-height: ${theme.height[key] || computeNumericValue(key)}; |
.maxh |
max-height: ${theme.height.default}; |
.maxh-screen |
max-height: 100vh; |
.maxh-${key} |
max-height: ${theme.height[key] || computeNumericValue(key)}; |
Class name |
CSS rules |
.justify-around |
justify-content: space-around; |
.justify-between |
justify-content: space-between; |
.justify-center |
justify-content: center; |
.justify-end |
justify-content: flex-end; |
.justify-evenly |
justify-content: space-evenly; |
.justify-start |
justify-content: flex-start; |
Class name |
CSS rules |
.kerning |
letter-spacing: ${theme.letterSpacing.default}; |
.kerning-${key} |
letter-spacing: ${theme.letterSpacing[key]}; |
Class name |
CSS rules |
.leading |
line-height: ${theme.lineHeight.default}; |
.leading-${key} |
line-height: ${theme.lineHeight[key]}; |
defaultValue
= theme.margin.default
|| theme.space.default
value
= theme.margin[key]
|| theme.space[key]
|| resolveNumericValue(key)
Class name |
CSS rules |
.m |
margin: ${defaultValue}; |
.mx |
margin-left: ${defaultValue};
margin-right: ${defaultValue}; |
.my |
margin-top: ${defaultValue};
margin-bottom: ${defaultValue}; |
.mt |
margin-top: ${defaultValue}; |
.mr |
margin-right: ${defaultValue}; |
.mb |
margin-bottom: ${defaultValue}; |
.ml |
margin-left: ${defaultValue}; |
.mx-${key} |
margin-left: ${value};
margin-right: ${value}; |
.my-${key} |
margin-top: ${value};
margin-bottom: ${value}; |
.mt-${key} |
margin-top: ${value}; |
.mr-${key} |
margin-right: ${value}; |
.mb-${key} |
margin-bottom: ${value}; |
.ml-${key} |
margin-left: ${value}; |
.-m |
margin: -${defaultValue}; |
.-mx |
margin-left: -${defaultValue};
margin-right: -${defaultValue}; |
.-my |
margin-top: -${defaultValue};
margin-bottom: -${defaultValue}; |
.-mt |
margin-top: -${defaultValue}; |
.-mr |
margin-right: -${defaultValue}; |
.-mb |
margin-bottom: -${defaultValue}; |
.-ml |
margin-left: -${defaultValue}; |
.-mx-${key} |
margin-left: -${value};
margin-right: -${value}; |
.-my-${key} |
margin-top: -${value};
margin-bottom: -${value}; |
.-mt-${key} |
margin-top: -${value}; |
.-mr-${key} |
margin-right: -${value}; |
.-mb-${key} |
margin-bottom: -${value}; |
.-ml-${key} |
margin-left: -${value}; |
Class name |
CSS rules |
.outline-none |
outline: none; |
defaultValue = theme.padding.default || theme.space.default
value = theme.padding[key] || theme.space[key] || computeNumericValue(key)
Class name |
CSS rules |
.p |
padding: ${defaultValue}; |
.px |
padding-left: ${defaultValue};
padding-right: ${defaultValue}; |
.py |
padding-top: ${defaultValue};
padding-bottom: ${defaultValue}; |
.pt |
padding-top: ${defaultValue}; |
.pr |
padding-right: ${defaultValue}; |
.pb |
padding-bottom: ${defaultValue}; |
.pl |
padding-left: ${defaultValue}; |
.px-${key} |
padding-left: ${value};
padding-right: ${value}; |
.py-${key} |
padding-top: ${value};
padding-bottom: ${value}; |
.pt-${key} |
padding-top: ${value}; |
.pr-${key} |
padding-right: ${value}; |
.pb-${key} |
padding-bottom: ${value}; |
.pl-${key} |
padding-left: ${value}; |
Class name |
CSS rules |
.absolute |
position: absolute; |
.fixed |
position: fixed; |
.relative |
position: relative; |
.static |
position: static; |
Class name |
CSS rules |
.select-all |
user-select: all; |
.select-auto |
user-select: auto; |
.select-none |
user-select: none; |
.select-text |
user-select: text; |
Class name |
CSS rules |
.text |
font-size: ${theme.fontSize.default};
font-weight: ${theme.fontWeight.default};
letter-spacing: ${theme.letterSpacing.default};
line-height: ${theme.lineHeight.default}; |
.text-${key} |
font-size: ${theme.fontSize[key]};
font-weight: ${theme.fontWeight[key]};
letter-spacing: ${theme.letterSpacing[key]};
line-height: ${theme.lineHeight[key]}; |
Class name |
CSS rules |
.text-center |
text-align: center; |
.text-justify |
text-align: justify; |
.text-left |
text-align: left; |
.text-right |
text-align: right; |
Class name |
CSS rules |
.line-through |
text-decoration: line-through; |
.no-underline |
text-decoration: none; |
.underline |
text-decoration: underline; |
Class name |
CSS rules |
.caps |
text-transform: capitalize; |
.lowercase |
text-transform: lowercase; |
.normal-case |
text-transform: none; |
.uppercase |
text-transform: uppercase; |
value
= theme.space[key]
|| resolveNumericValue(key)
Class name |
CSS rules |
.top |
top: 0; |
.top-${key} |
top: ${value}; |
.-top-${key} |
top: -${value}; |
.right |
right: 0; |
.right-${key} |
right: ${value}; |
.-right-${key} |
right: -${value}; |
.bottom |
bottom: 0; |
.bottom-${key} |
bottom: ${value}; |
.-bottom-${key} |
bottom: -${value}; |
.left |
left: 0; |
.left-${key} |
left: ${value}; |
.-left-${key} |
left: -${value}; |
Class name |
CSS rules |
.w |
width: ${theme.width.default}; |
.w-screen |
width: 100vw; |
.w-${key} |
width: ${theme.width[key] || computeNumericValue(key)}; |
.minw |
min-width: ${theme.width.default}; |
.minw-screen |
min-width: 100vw; |
.minw-${key} |
min-width: ${theme.width[key] || computeNumericValue(key)}; |
.maxw |
max-width: ${theme.width.default}; |
.maxw-screen |
max-width: 100vw; |
.maxw-${key} |
max-width: ${theme.width[key] || computeNumericValue(key)}; |