FinallyReact's utility classes will be included when you import the main CSS file, most likely in a top level app file:
FinallyReact's utility classes will be included when you import the main CSS file, most likely in a top level app file:
These classes can be used directly in JSX for ease of use, instead of having to deal with multiple CSS files. For example:
Instead of writing this:
You can write this:
| Utility Class | Style |
|---|---|
| align-content-center | align-content: center |
| align-content-end | align-content: flex-end |
| align-content-start | align-content: flex-start |
| align-content-around | align-content: space-around |
| align-content-between | align-content: space-between |
| align-baseline | align-items: baseline |
| align-items-baseline | align-items: baseline |
| align-center | align-items: center |
| align-items-center | align-items: center |
| align-end | align-items: flex-end |
| align-items-end | align-items: flex-end |
| align-start | align-items: flex-start |
| align-items-start | align-items: flex-start |
| align-self-baseline | align-self: baseline |
| align-self-center | align-self: center |
| align-self-end | align-self: flex-end |
| align-self-start | align-self: flex-start |
| rounded-bl-{1-25} | border-bottom-left-radius: {1-25}px |
| hover:rounded-bl-{1-25} | border-bottom-left-radius: {1-25}px |
| rounded-br-{1-25} | border-bottom-right-radius: {1-25}px |
| hover:rounded-br-{1-25} | border-bottom-right-radius: {1-25}px |
| rounded-b-{1-25} | border-bottom-right-radius: {1-25}px; border-bottom-left-radius: {1-25}px |
| hover:rounded-b-{1-25} | border-bottom-right-radius: {1-25}px; border-bottom-left-radius: {1-25}px |
| border-b-solid | border-bottom-style: solid |
| hover:border-b-solid | border-bottom-style: solid |
| border-b-{1-25} | border-bottom-width: {1-25}px |
| hover:border-b-{1-25} | border-bottom-width: {1-25}px |
| border-l-solid | border-left-style: solid |
| hover:border-l-solid | border-left-style: solid |
| border-l-{1-25} | border-left-width: {1-25}px |
| hover:border-l-{1-25} | border-left-width: {1-25}px |
| rounded-1/2 | border-radius: 50% |
| rounded-{1-25} | border-radius: {1-25}px |
| hover:rounded-{1-25} | border-radius: {1-25}px |
| border-r-solid | border-right-style: solid |
| hover:border-r-solid | border-right-style: solid |
| border-r-{1-25} | border-right-width: {1-25}px |
| hover:border-r-{1-25} | border-right-width: {1-25}px |
| border-solid | border-style: solid |
| hover:border-solid | border-style: solid |
| rounded-tl-{1-25} | border-top-left-radius: {1-25}px |
| hover:rounded-tl-{1-25} | border-top-left-radius: {1-25}px |
| rounded-l-{1-25} | border-top-left-radius: {1-25}px; border-bottom-left-radius: {1-25}px |
| hover:rounded-l-{1-25} | border-top-left-radius: {1-25}px; border-bottom-left-radius: {1-25}px |
| rounded-t-{1-25} | border-top-left-radius: {1-25}px; border-top-right-radius: {1-25}px |
| hover:rounded-t-{1-25} | border-top-left-radius: {1-25}px; border-top-right-radius: {1-25}px |
| rounded-tr-{1-25} | border-top-right-radius: {1-25}px |
| hover:rounded-tr-{1-25} | border-top-right-radius: {1-25}px |
| rounded-r-{1-25} | border-top-right-radius: {1-25}px; border-bottom-right-radius: {1-25}px |
| hover:rounded-r-{1-25} | border-top-right-radius: {1-25}px; border-bottom-right-radius: {1-25}px |
| border-t-solid | border-top-style: solid |
| hover:border-t-solid | border-top-style: solid |
| border-t-{1-25} | border-top-width: {1-25}px |
| hover:border-t-{1-25} | border-top-width: {1-25}px |
| border-{1-25} | border-width: {1-25}px |
| hover:border-{1-25} | border-width: {1-25}px |
| -bottom-{1-100}p | bottom: -{1-100}% |
| -bottom-{1-100} | bottom: -{1-100}rem |
| bottom-{1-100}p | bottom: {1-100}% |
| bottom-{1-100} | bottom: {1-100}rem |
| box-shadow-1 | box-shadow: 0 0 0.1rem colors.$stone-4 |
| hover:box-shadow-1 | box-shadow: 0 0 0.1rem colors.$stone-4 |
| box-shadow-dark-1 | box-shadow: 0 0 0.1rem colors.$stone-8 |
| hover:box-shadow-dark-1 | box-shadow: 0 0 0.1rem colors.$stone-8 |
| hover:box-shadow-dark-4 | box-shadow: 0 0 0.1rem colors.$stone-8 |
| hover:box-shadow-2 | box-shadow: 0 0 0.2rem colors.$stone-4 |
| box-shadow-dark-2 | box-shadow: 0 0 0.2rem colors.$stone-8 |
| hover:box-shadow-dark-2 | box-shadow: 0 0 0.2rem colors.$stone-8 |
| hover:box-shadow-3 | box-shadow: 0 0 0.3rem colors.$stone-4 |
| box-shadow-dark-3 | box-shadow: 0 0 0.3rem colors.$stone-8 |
| hover:box-shadow-dark-3 | box-shadow: 0 0 0.3rem colors.$stone-8 |
| hover:box-shadow-4 | box-shadow: 0 0 0.4rem colors.$stone-4 |
| box-shadow-dark-4 | box-shadow: 0 0 0.4rem colors.$stone-8 |
| box-shadow-inset-1 | box-shadow: inset 0 0 0.1rem colors.$stone-4 |
| hover:box-shadow-inset-1 | box-shadow: inset 0 0 0.1rem colors.$stone-4 |
| box-shadow-inset-4 | box-shadow: inset 0 0 0.1rem colors.$stone-4 |
| box-shadow-inset-dark-1 | box-shadow: inset 0 0 0.1rem colors.$stone-8 |
| hover:box-shadow-inset-dark-1 | box-shadow: inset 0 0 0.1rem colors.$stone-8 |
| box-shadow-inset-dark-2 | box-shadow: inset 0 0 0.1rem colors.$stone-8 |
| hover:box-shadow-inset-dark-2 | box-shadow: inset 0 0 0.1rem colors.$stone-8 |
| box-shadow-inset-2 | box-shadow: inset 0 0 0.2rem colors.$stone-4 |
| hover:box-shadow-inset-2 | box-shadow: inset 0 0 0.2rem colors.$stone-4 |
| box-shadow-inset-3 | box-shadow: inset 0 0 0.3rem colors.$stone-4 |
| hover:box-shadow-inset-3 | box-shadow: inset 0 0 0.3rem colors.$stone-4 |
| box-shadow-inset-dark-3 | box-shadow: inset 0 0 0.3rem colors.$stone-8 |
| hover:box-shadow-inset-dark-3 | box-shadow: inset 0 0 0.3rem colors.$stone-8 |
| hover:box-shadow-inset-4 | box-shadow: inset 0 0 0.4rem colors.$stone-4 |
| box-shadow-inset-dark-4 | box-shadow: inset 0 0 0.4rem colors.$stone-8 |
| hover:box-shadow-inset-dark-4 | box-shadow: inset 0 0 0.4rem colors.$stone-8 |
| content-empty | content: "" |
| cursor-auto | cursor: auto |
| cursor-default | cursor: default |
| cursor-move | cursor: move |
| cursor-none | cursor: none |
| cursor-not-allowed | cursor: not-allowed |
| not-allowed | cursor: not-allowed |
| cursor-pointer | cursor: pointer |
| pointer | cursor: pointer |
| block | display: block |
| hover:block | display: block |
| contents | display: contents |
| hover:contents | display: contents |
| flex | display: flex |
| hover:flex | display: flex |
| grid | display: grid |
| hover:grid | display: grid |
| inline | display: inline |
| hover:inline | display: inline |
| inline-block | display: inline-block |
| hover:inline-block | display: inline-block |
| inline-flex | display: inline-flex |
| hover:inline-flex | display: inline-flex |
| inline-grid | display: inline-grid |
| hover:inline-grid | display: inline-grid |
| none | display: none |
| hover:none | display: none |
| block-ruby | display: ruby |
| hover:block-ruby | display: ruby |
| ruby | display: ruby |
| hover:ruby | display: ruby |
| ruby-base | display: ruby-base |
| hover:ruby-base | display: ruby-base |
| ruby-text | display: ruby-text |
| hover:ruby-text | display: ruby-text |
| table | display: table |
| hover:table | display: table |
| table-caption | display: table-caption |
| hover:table-caption | display: table-caption |
| table-cell | display: table-cell |
| hover:table-cell | display: table-cell |
| table-cell | display: table-cell |
| hover:table-cell | display: table-cell |
| table-column | display: table-column |
| hover:table-column | display: table-column |
| table-column-group | display: table-column-group |
| hover:table-column-group | display: table-column-group |
| table-footer-group | display: table-footer-group |
| hover:table-footer-group | display: table-footer-group |
| table-header-group | display: table-header-group |
| hover:table-header-group | display: table-header-group |
| table-row | display: table-row |
| hover:table-row | display: table-row |
| table-row-group | display: table-row-group |
| hover:table-row-group | display: table-row-group |
| flex-column | flex-direction: column |
| flex-column-reverse | flex-direction: column-reverse |
| flex-row | flex-direction: row |
| flex-row-reverse | flex-direction: row-reverse |
| flex-nowrap | flex-wrap: nowrap |
| flex-wrap | flex-wrap: wrap |
| flex-wrap-reverse | flex-wrap: wrap-reverse |
| float-left | float: left |
| float-right | float: right |
| monsterrat | font-family: 'Montserrat', sans-serif |
| noto | font-family: 'Noto Sans', sans-serif |
| text-xs | font-size: 0.6rem |
| text-extra-small | font-size: 0.6rem |
| text-sm | font-size: 0.8rem |
| text-small | font-size: 0.8rem |
| text-md | font-size: 1.25rem |
| text-medium | font-size: 1.25rem |
| text-lg | font-size: 1.5rem |
| text-large | font-size: 1.5rem |
| text-xl | font-size: 1.8rem |
| text-extra-large | font-size: 1.8rem |
| text | font-size: 1rem |
| text-regular | font-size: 1rem |
| text-normal | font-size: 1rem |
| text-base | font-size: 1rem |
| text-2xl | font-size: 2.25rem |
| text-3xl | font-size: 3rem |
| text-4xl | font-size: 4rem |
| text-5xl | font-size: 5rem |
| text-italic | font-style: italic |
| hover:text-italic | font-style: italic |
| italic | font-style: italic |
| hover:italic | font-style: italic |
| font-normal | font-style: normal |
| hover:font-normal | font-style: normal |
| normal | font-style: normal |
| hover:normal | font-style: normal |
| font-thin | font-weight: 100 |
| text-thin | font-weight: 100 |
| thin | font-weight: 100 |
| font-extralight | font-weight: 200 |
| text-extralight | font-weight: 200 |
| extralight | font-weight: 200 |
| font-light | font-weight: 300 |
| text-light | font-weight: 300 |
| light | font-weight: 300 |
| font-regular | font-weight: 400 |
| text-regular | font-weight: 400 |
| regular | font-weight: 400 |
| font-medium | font-weight: 500 |
| text-medium | font-weight: 500 |
| medium | font-weight: 500 |
| font-semibold | font-weight: 600 |
| text-semibold | font-weight: 600 |
| semibold | font-weight: 600 |
| font-bold | font-weight: 700 |
| text-bold | font-weight: 700 |
| bold | font-weight: 700 |
| font-extrabold | font-weight: 800 |
| text-extrabold | font-weight: 800 |
| extrabold | font-weight: 800 |
| font-black | font-weight: 900 |
| text-black | font-weight: 900 |
| h-full | height: 100% |
| h-screen | height: 100vh |
| h-screen | height: 100vh |
| h-fit | height: fit-content |
| h-inherit | height: inherit |
| h-max-content | height: max-content |
| h-min-content | height: min-content |
| h-{1-100}p | height: {1-100}% |
| h-{1-100} | height: {1-100}rem |
| justify-center | justify-content: center |
| justify-content-center | justify-content: center |
| justify-end | justify-content: flex-end |
| justify-content-end | justify-content: flex-end |
| justify-start | justify-content: flex-start |
| justify-content-start | justify-content: flex-start |
| justify-around | justify-content: space-around |
| justify-content-around | justify-content: space-around |
| justify-between | justify-content: space-between |
| justify-content-between | justify-content: space-between |
| -left-{1-100}p | left: -{1-100}% |
| -left-{1-100} | left: -{1-100}rem |
| left-{1-100}p | left: {1-100}% |
| left-{1-100} | left: {1-100}rem |
| line-height-{1-10} | line-height: {1-10} |
| -mb-{1-100} | margin-bottom: -{1-100}rem |
| mb-{1-100} | margin-bottom: {1-100}rem |
| -ml-{1-100} | margin-left: -{1-100}rem |
| -mx-{1-100} | margin-left: -{1-100}rem; margin-right: -{1-100}rem |
| ml-{1-100} | margin-left: {1-100}rem |
| mx-{1-100} | margin-left: {1-100}rem; margin-right: {1-100}rem |
| -mr-{1-100} | margin-right: -{1-100}rem |
| mr-{1-100} | margin-right: {1-100}rem |
| -mt-{1-100} | margin-top: -{1-100}rem |
| -my-{1-100} | margin-top: -{1-100}rem; margin-bottom: -{1-100}rem |
| mt-{1-100} | margin-top: {1-100}rem |
| my-{1-100} | margin-top: {1-100}rem; margin-bottom: {1-100}rem |
| -m-{1-100} | margin: -{1-100}rem |
| m-auto | margin: auto |
| m-{1-100} | margin: {1-100}rem |
| max-h-screen | max-height: 100vh |
| max-h-{1-100}p | max-height: {1-100}% |
| max-h-{1-100} | max-height: {1-100}rem |
| max-w-screen | max-width: 100vw |
| max-w-{1-100}p | max-width: {1-100}% |
| max-w-{1-100} | max-width: {1-100}rem |
| min-h-screen | min-height: 100vh |
| min-h-fit | min-height: fit-content |
| min-h-{1-100}p | min-height: {1-100}% |
| min-h-{1-100} | min-height: {1-100}rem |
| min-w-screen | min-width: 100vw |
| min-w-fit | min-width: fit-content |
| min-w-{1-100}p | min-width: {1-100}% |
| min-w-{1-100} | min-width: {1-100}rem |
| opacity-0 | opacity: 0 |
| hover:opacity-0 | opacity: 0 |
| opacity-25 | opacity: 0.25 |
| hover:opacity-25 | opacity: 0.25 |
| opacity-50 | opacity: 0.5 |
| hover:opacity-50 | opacity: 0.5 |
| opacity-75 | opacity: 0.75 |
| hover:opacity-75 | opacity: 0.75 |
| opacity-100 | opacity: 1 |
| hover:opacity-100 | opacity: 1 |
| scroll-x-hidden | overflow-x: hidden |
| scroll-x | overflow-x: scroll |
| scroll-y-hidden | overflow-y: hidden |
| scroll-y | overflow-y: scroll |
| scroll-hidden | overflow: hidden |
| scroll | overflow: scroll |
| pb-{1-100} | padding-bottom: {1-100}rem |
| pl-{1-100} | padding-left: {1-100}rem |
| px-{1-100} | padding-left: {1-100}rem; padding-right: {1-100}rem |
| pr-{1-100} | padding-right: {1-100}rem |
| pt-{1-100} | padding-top: {1-100}rem |
| py-{1-100} | padding-top: {1-100}rem; padding-bottom: {1-100}rem |
| p-{1-100} | padding: {1-100}rem |
| pointer-events-none | pointer-events: none |
| absolute | position: absolute |
| fixed | position: fixed |
| inherit | position: inherit |
| relative | position: relative |
| sticky | position: sticky |
| -right-{1-100}p | right: -{1-100}% |
| -right-{1-100} | right: -{1-100}rem |
| right-{1-100}p | right: {1-100}% |
| right-{1-100} | right: {1-100}rem |
| text-center | text-align: center |
| center | text-align: center |
| text-justify | text-align: justify |
| text-left | text-align: left |
| text-right | text-align: right |
| text-line-through | text-decoration: line-through |
| hover:text-line-through | text-decoration: line-through |
| line-through | text-decoration: line-through |
| hover:line-through | text-decoration: line-through |
| text-strikethrough | text-decoration: line-through |
| hover:text-strikethrough | text-decoration: line-through |
| strikethrough | text-decoration: line-through |
| hover:strikethrough | text-decoration: line-through |
| text-none | text-decoration: none |
| text-overline | text-decoration: overline |
| hover:text-overline | text-decoration: overline |
| overline | text-decoration: overline |
| hover:overline | text-decoration: overline |
| text-underline | text-decoration: underline |
| hover:text-underline | text-decoration: underline |
| underline | text-decoration: underline |
| hover:underline | text-decoration: underline |
| text-unset | text-decoration: unset |
| text-truncate | text-overflow: ellipsis |
| truncate | text-overflow: ellipsis |
| text-capitalize | text-transform: capitalize |
| capitalize | text-transform: capitalize |
| text-lowercase | text-transform: lowercase |
| lowercase | text-transform: lowercase |
| text-normal | text-transform: none |
| text-uppercase | text-transform: uppercase |
| uppercase | text-transform: uppercase |
| -top-{1-100}p | top: -{1-100}% |
| -top-{1-100} | top: -{1-100}rem |
| top-{1-100}p | top: {1-100}% |
| top-{1-100} | top: {1-100}rem |
| -rotate-135 | transform: rotate(-135deg) |
| -rotate-180 | transform: rotate(-180deg) |
| -rotate-225 | transform: rotate(-225deg) |
| -rotate-270 | transform: rotate(-270deg) |
| -rotate-315 | transform: rotate(-315deg) |
| -rotate-360 | transform: rotate(-360deg) |
| -rotate-45 | transform: rotate(-45deg) |
| -rotate-90 | transform: rotate(-90deg) |
| rotate-0 | transform: rotate(0deg) |
| rotate-135 | transform: rotate(135deg) |
| rotate-180 | transform: rotate(180deg) |
| rotate-225 | transform: rotate(225deg) |
| rotate-270 | transform: rotate(270deg) |
| rotate-315 | transform: rotate(315deg) |
| rotate-360 | transform: rotate(360deg) |
| rotate-45 | transform: rotate(45deg) |
| rotate-90 | transform: rotate(90deg) |
| transition-opacity-ease-out | transition-1-ease-all |
| transition-1 | transition: 0.1s |
| transition-1-all | transition: 0.1s all |
| transition-1-ease-all | transition: 0.1s ease all |
| transition-2 | transition: 0.2s |
| transition-2-all | transition: 0.2s all |
| transition-2-ease-all | transition: 0.2s ease all |
| transition-3 | transition: 0.3s |
| transition-3-all | transition: 0.3s all |
| transition-3-ease-all | transition: 0.3s ease all |
| transition-4 | transition: 0.4s |
| transition-4-all | transition: 0.4s all |
| transition-4-ease-all | transition: 0.4s ease all |
| transition-5 | transition: 0.5s |
| transition-5-all | transition: 0.5s all |
| transition-5-ease-all | transition: 0.5s ease all |
| transition-6 | transition: 0.6s |
| transition-6-all | transition: 0.6s all |
| transition-6-ease-all | transition: 0.6s ease all |
| transition-7 | transition: 0.7s |
| transition-7-all | transition: 0.7s all |
| transition-7-ease-all | transition: 0.7s ease all |
| transition-8 | transition: 0.8s |
| transition-8-all | transition: 0.8s all |
| transition-8-ease-all | transition: 0.8s ease all |
| transition-9 | transition: 0.9s |
| transition-9-all | transition: 0.9s all |
| transition-9-ease-all | transition: 0.9s ease all |
| transition-transform-1-ease-in-out | transition: transform 0.1s ease-in-out |
| transition-transform-2-ease-in-out | transition: transform 0.2s ease-in-out |
| vertical-align-bottom | vertical-align: bottom |
| vertical-align-middle | vertical-align: middle |
| vertical-align-top | vertical-align: top |
| hover:invisible | visibility: hidden |
| invisible | visibility: hidden |
| hover:invisible | visibility: hidden |
| visible | visibility: visible |
| text-wrap | white-space: normal |
| wrap | white-space: normal |
| text-nowrap | white-space: nowrap |
| nowrap | white-space: nowrap |
| text-pre | white-space: pre |
| pre | white-space: pre |
| pre-wrap | white-space: pre-wrap |
| w-full | width: 100% |
| w-screen | width: 100vw |
| w-screen | width: 100vw |
| w-fit | width: fit-content |
| w-fit-content | width: fit-content |
| w-inherit | width: inherit |
| w-max-content | width: max-content |
| w-min-content | width: min-content |
| w-fill | width: stretch (-webkit-fill-available, -moz-available) |
| w-{1-100}p | width: {1-100}% |
| w-{1-100} | width: {1-100}rem |
| word-break-all | word-break: break-all |
| word-break | word-break: break-word |
| word-break-normal | word-break: normal |
| word-wrap-break | word-wrap: break-word |
| word-wrap-normal | word-wrap: normal |
| z-{1-1000} | z-index: {1-1000} |