Skip to Content
UI KitGetting StartedUtility Classes

Utility Classes

Utility class library like Tailwind.

Akinon UI provides a set of utility classes that can be used to customize the components without needing to write custom css. These classes are inspired by Tailwind CSS .

Usage

To use the utility classes, you need to add the @akinon/ui-utils package to your project. It’s not bundled into @akinon/ui-react, so you’ll need to install this separately. Then you can use the classes by adding the className prop to the components.

pnpm add @akinon/ui-utils

Include the @akinon/ui-utils package in your project, generally to the main entry point.

import '@akinon/ui-utils';

Then you can use the classes by adding the className prop to the components.

import '@akinon/ui-utils';
import { Button } from '@akinon/ui-react';
 
const App = () => {
  return (
    <div className="flex gap-2">
      <Button className="px-6">Primary</Button>
      <Button>Secondary</Button>
    </div>
  );
};

Layout

Aspect Ratio

ClassProperties
.aspect-squareaspect-ratio: 1 / 1;
.aspect-videoaspect-ratio: 16 / 9
.aspect-3/2aspect-ratio: 3 / 2;
.aspect-4/3aspect-ratio: 4 / 3;
.aspect-9/16aspect-ratio: 9 / 16;

Break After

ClassProperties
.break-after-autobreak-after: auto;
.break-after-avoidbreak-after: avoid;
.break-after-allbreak-after: all;
.break-after-avoid-pagebreak-after: avoid-page;
.break-after-pagebreak-after: page;
.break-after-leftbreak-after: left;
.break-after-rightbreak-after: right;
.break-after-columnbreak-after: column;

Break Before

ClassProperties
.break-before-autobreak-before: auto;
.break-before-avoidbreak-before: avoid;
.break-before-allbreak-before: all;
.break-before-avoid-pagebreak-before: avoid-page;
.break-before-pagebreak-before: page;
.break-before-leftbreak-before: left;
.break-before-rightbreak-before: right;
.break-before-columnbreak-before: column;

Break Inside

ClassProperties
.break-inside-autobreak-inside: auto;
.break-inside-avoidbreak-inside: avoid;
.break-inside-avoid-pagebreak-inside: avoid-page;
.break-inside-avoid-columnbreak-inside: avoid-column;

Box Decoration Break

ClassProperties
.box-decoration-clonebox-decoration-break: clone;
.box-decoration-slicebox-decoration-break: slice;

Box Sizing

ClassProperties
.box-borderbox-sizing: border-box;
.box-contentbox-sizing: content-box;

Display

ClassProperties
.blockdisplay: block;
.inlinedisplay: inline;
.flexdisplay: flex;
.inline-flexdisplay: inline-flex;
.griddisplay: grid;
.inline-griddisplay: inline-grid;
.hiddendisplay: none;

Float

ClassProperties
.float-rightfloat: right;
.float-leftfloat: left;
.float-startfloat: inline-start;
.float-endfloat: inline-end;
.float-nonefloat: none;

Clear

ClassProperties
.clear-leftclear: left;
.clear-rightclear: right;
.clear-bothclear: both;
.clear-startclear: inline-start;
.clear-endclear: inline-end;
.clear-noneclear: none;

Isolation

ClassProperties
.isolateisolation: isolate;
.isolate-autoisolation: auto;

Object Fit

ClassProperties
.object-containobject-fit: contain;
.object-coverobject-fit: cover;
.object-fillobject-fit: fill;
.object-noneobject-fit: none;
.object-scale-downobject-fit: scale-down;

Object Position

ClassProperties
.object-bottomobject-position: bottom;
.object-centerobject-position: center;
.object-leftobject-position: left;
.object-left-bottomobject-position: left bottom;
.object-left-topobject-position: left top;
.object-rightobject-position: right;
.object-right-bottomobject-position: right bottom;
.object-right-topobject-position: right top;
.object-topobject-position: top;

Overflow

ClassProperties
.overflow-autooverflow: auto;
.overflow-hiddenoverflow: hidden;
.overflow-clipoverflow: clip;
.overflow-visibleoverflow: visible;
.overflow-scrolloverflow: scroll;
.overflow-x-autooverflow-x: auto;
.overflow-x-hiddenoverflow-x: hidden;
.overflow-x-clipoverflow-x: clip;
.overflow-x-visibleoverflow-x: visible;
.overflow-x-scrolloverflow-x: scroll;
.overflow-y-autooverflow-y: auto;
.overflow-y-hiddenoverflow-y: hidden;
.overflow-y-clipoverflow-y: clip;
.overflow-y-visibleoverflow-y: visible;
.overflow-y-scrolloverflow-y: scroll;

Overscroll Behavior

ClassProperties
.overscroll-autooverscroll-behavior: auto;
.overscroll-containoverscroll-behavior: contain;
.overscroll-noneoverscroll-behavior: none;
.overscroll-x-autooverscroll-behavior-x: auto;
.overscroll-x-containoverscroll-behavior-x: contain;
.overscroll-x-noneoverscroll-behavior-x: none;
.overscroll-y-autooverscroll-behavior-y: auto;
.overscroll-y-containoverscroll-behavior-y: contain;
.overscroll-y-noneoverscroll-behavior-y: none;

Position

ClassProperties
.staticposition: static;
.fixedposition: fixed;
.absoluteposition: absolute;
.relativeposition: relative;
.stickyposition: sticky;

Top / Right / Bottom / Left

ClassProperties
.top-[n]top: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.right-[n]right: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.bottom-[n]bottom: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.left-[n]left: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.top-autotop: auto;
.right-autoright: auto;
.bottom-autobottom: auto;
.left-autoleft: auto;
.top-fulltop: 100%;
.right-fullright: 100%;
.bottom-fullbottom: 100%;
.left-fullleft: 100%;
.top-pxtop: 1px;
.right-pxright: 1px;
.bottom-pxbottom: 1px;
.left-pxleft: 1px;

Visibility

ClassProperties
.visiblevisibility: visible;
.invisiblevisibility: hidden;

Z-index

ClassProperties
.z-0z-index: 0;
.z-10z-index: 10;
.z-20z-index: 20;
.z-30z-index: 30;
.z-40z-index: 40;
.z-50z-index: 50;
.z-autoz-index: auto;

Flexbox

Flex Direction

ClassProperties
.flex-rowflex-direction: row;
.flex-colflex-direction: column;
.flex-row-reverseflex-direction: row-reverse;
.flex-col-reverseflex-direction: column-reverse;

Flex Wrap

ClassProperties
.flex-wrapflex-wrap: wrap;
.flex-nowrapflex-wrap: nowrap;

Flex

ClassProperties
.flex-1flex: 1 1 0%;
.flex-autoflex: 1 1 auto;
.flex-initialflex: 0 1 auto;
.flex-noneflex: none;

Flex Grow

ClassProperties
.flex-growflex-grow: 1;

Flex Shrink

ClassProperties
.flex-shrinkflex-shrink: 1;

Order

ClassProperties
.order-[n]order: [n]; for n = 0-10

Gap

ClassProperties
.gap-[n]gap: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.gap-pxgap: 1px;

Justify Content

ClassProperties
.justify-normaljustify-content: normal;
.justify-startjustify-content: flex-start;
.justify-endjustify-content: flex-end;
.justify-centerjustify-content: center;
.justify-betweenjustify-content: space-between;
.justify-aroundjustify-content: space-around;
.justify-evenlyjustify-content: space-evenly;
.justify-stretchjustify-content: stretch;

Justify Items

ClassProperties
.justify-items-startjustify-items: start;
.justify-items-endjustify-items: end;
.justify-items-centerjustify-items: center;
.justify-items-stretchjustify-items: stretch;
.justify-items-normaljustify-items: normal;

Justify Self

ClassProperties
.justify-self-autojustify-self: auto;
.justify-self-startjustify-self: flex-start;
.justify-self-endjustify-self: flex-end;
.justify-self-centerjustify-self: center;
.justify-self-stretchjustify-self: stretch;

Align Content

ClassProperties
.content-normalalign-content: normal;
.content-centeralign-content: center;
.content-startalign-content: flex-start;
.content-endalign-content: flex-end;
.content-betweenalign-content: space-between;
.content-aroundalign-content: space-around;
.content-evenlyalign-content: space-evenly;
.content-baselinealign-content: baseline;
.content-stretchalign-content: stretch;

Align Items

ClassProperties
.items-startalign-items: flex-start;
.items-endalign-items: flex-end;
.items-centeralign-items: center;
.items-baselinealign-items: baseline;
.items-stretchalign-items: stretch;

Align Self

ClassProperties
.self-autoalign-self: auto;
.self-startalign-self: flex-start;
.self-endalign-self: flex-end;
.self-centeralign-self: center;
.self-stretchalign-self: stretch;
.self-baselinealign-self: baseline;

Place Content

ClassProperties
.place-content-centerplace-content: center;
.place-content-startplace-content: start;
.place-content-endplace-content: end;
.place-content-betweenplace-content: space-between;
.place-content-aroundplace-content: space-around;
.place-content-evenlyplace-content: space-evenly;
.place-content-baselineplace-content: baseline;
.place-content-stretchplace-content: stretch;

Place Items

ClassProperties
.place-items-startplace-items: start;
.place-items-endplace-items: end;
.place-items-centerplace-items: center;
.place-items-baselineplace-items: baseline;
.place-items-stretchplace-items: stretch;

Place Self

ClassProperties
.place-self-autoplace-self: auto;
.place-self-startplace-self: start;
.place-self-endplace-self: end;
.place-self-centerplace-self: center;
.place-self-stretchplace-self: stretch;

Sizing

Size (Width & Height)

ClassProperties
.size-[n]width: [n/4]rem; height: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.size-1/5width: 20%; height: 20%;
.size-1/4width: 25%; height: 25%;
.size-1/3width: 33.333333%; height: 33.333333%;
.size-1/2width: 50%; height: 50%;
.size-2/3width: 66.666667%; height: 66.666667%;
.size-3/4width: 75%; height: 75%;
.size-pxwidth: 1px; height: 1px;

Height

ClassProperties
.h-[n]height: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.h-1/5height: 20%;
.h-1/4height: 25%;
.h-1/3height: 33.333333%;
.h-1/2height: 50%;
.h-2/3height: 66.666667%;
.h-3/4height: 75%;
.h-pxheight: 1px;
.h-autoheight: auto;
.h-fullheight: 100%;
.h-screenheight: 100vh;
.h-dvhheight: 100dvh;
.h-lvhheight: 100lvh;
.h-svhheight: 100svh;
.h-minheight: min-content;
.h-maxheight: max-content;
.h-fitheight: fit-content;

Min Height

ClassProperties
.min-h-[n]min-height: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.min-h-1/5min-height: 20%;
.min-h-1/4min-height: 25%;
.min-h-1/3min-height: 33.333333%;
.min-h-1/2min-height: 50%;
.min-h-2/3min-height: 66.666667%;
.min-h-3/4min-height: 75%;
.min-h-pxmin-height: 1px;
.min-h-automin-height: auto;
.min-h-fullmin-height: 100%;
.min-h-screenmin-height: 100vh;
.min-h-dvhmin-height: 100dvh;
.min-h-lvhmin-height: 100lvh;
.min-h-svhmin-height: 100svh;
.min-h-minmin-height: min-content;
.min-h-maxmin-height: max-content;
.min-h-fitmin-height: fit-content;

Max Height

ClassProperties
.max-h-[n]max-height: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.max-h-1/5max-height: 20%;
.max-h-1/4max-height: 25%;
.max-h-1/3max-height: 33.333333%;
.max-h-1/2max-height: 50%;
.max-h-2/3max-height: 66.666667%;
.max-h-3/4max-height: 75%;
.max-h-pxmax-height: 1px;
.max-h-automax-height: auto;
.max-h-nonemax-height: none;
.max-h-fullmax-height: 100%;
.max-h-screenmax-height: 100vh;
.max-h-dvhmax-height: 100dvh;
.max-h-lvhmax-height: 100lvh;
.max-h-svhmax-height: 100svh;
.max-h-minmax-height: min-content;
.max-h-maxmax-height: max-content;
.max-h-fitmax-height: fit-content;

Width

ClassProperties
.w-[n]width: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.w-1/5width: 20%;
.w-1/4width: 25%;
.w-1/3width: 33.333333%;
.w-1/2width: 50%;
.w-2/3width: 66.666667%;
.w-3/4width: 75%;
.w-pxwidth: 1px;
.w-autowidth: auto;
.w-fullwidth: 100%;
.w-screenwidth: 100vw;
.w-dvwwidth: 100dvw;
.w-lvwwidth: 100lvw;
.w-svwwidth: 100svw;
.w-minwidth: min-content;
.w-maxwidth: max-content;
.w-fitwidth: fit-content;

Min Width

ClassProperties
.min-w-[n]min-width: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.min-w-1/5min-width: 20%;
.min-w-1/4min-width: 25%;
.min-w-1/3min-width: 33.333333%;
.min-w-1/2min-width: 50%;
.min-w-2/3min-width: 66.666667%;
.min-w-3/4min-width: 75%;
.min-w-pxmin-width: 1px;
.min-w-automin-width: auto;
.min-w-fullmin-width: 100%;
.min-w-screenmin-width: 100vw;
.min-w-dvwmin-width: 100dvw;
.min-w-lvwmin-width: 100lvw;
.min-w-svwmin-width: 100svw;
.min-w-minmin-width: min-content;
.min-w-maxmin-width: max-content;
.min-w-fitmin-width: fit-content;

Max Width

ClassProperties
.max-w-[n]max-width: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.max-w-1/5max-width: 20%;
.max-w-1/4max-width: 25%;
.max-w-1/3max-width: 33.333333%;
.max-w-1/2max-width: 50%;
.max-w-2/3max-width: 66.666667%;
.max-w-3/4max-width: 75%;
.max-w-pxmax-width: 1px;
.max-w-automax-width: auto;
.max-w-nonemax-width: none;
.max-w-fullmax-width: 100%;
.max-w-screenmax-width: 100vw;
.max-w-dvwmax-width: 100dvw;
.max-w-lvwmax-width: 100lvw;
.max-w-svwmax-width: 100svw;
.max-w-minmax-width: min-content;
.max-w-maxmax-width: max-content;
.max-w-fitmax-width: fit-content;

Spacing

Padding

ClassProperties
.p-[n]padding: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.px-[n]padding-left/right: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.py-[n]padding-top/bottom: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.pt-[n]padding-top: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.pb-[n]padding-bottom: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.pl-[n]padding-left: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.pr-[n]padding-right: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96

Margin

ClassProperties
.m-[n]margin: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.mx-[n]margin-left/right: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.my-[n]margin-top/bottom: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.mt-[n]margin-top: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.mb-[n]margin-bottom: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.ml-[n]margin-left: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96
.mr-[n]margin-right: [n/4]rem; for n = 0-12, 14, 16, 18,…, 96

Typography

Font Size

ClassProperties
.text-xsfont-size: 0.75rem;
.text-smfont-size: 0.875rem;
.text-basefont-size: 1rem;
.text-lgfont-size: 1.125rem;
.text-xlfont-size: 1.25rem;
.text-2xlfont-size: 1.5rem;
.text-3xlfont-size: 1.875rem;
.text-4xlfont-size: 2.25rem;
.text-5xlfont-size: 2.5rem;

Font Style

ClassProperties
.italicfont-style: italic;
.not-italicfont-style: normal;

Font Weight

ClassProperties
.font-blackfont-weight: 900;
.font-boldfont-weight: 700;
.font-extraboldfont-weight: 800;
.font-extralightfont-weight: 200;
.font-lightfont-weight: 300;
.font-mediumfont-weight: 500;
.font-normalfont-weight: 400;
.font-semiboldfont-weight: 600;
.font-thinfont-weight: 100;

Letter Spacing

ClassProperties
.tracking-tighterletter-spacing: -0.05em;
.tracking-tightletter-spacing: -0.025em;
.tracking-normalletter-spacing: 0;
.tracking-wideletter-spacing: 0.025em;
.tracking-widerletter-spacing: 0.05em;
.tracking-widestletter-spacing: 0.1em;

Line Clamp

ClassProperties
.line-clamp-1overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
.line-clamp-2overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
.line-clamp-3overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
.line-clamp-4overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
.line-clamp-5overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
.line-clamp-noneoverflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset;

Line Height

ClassProperties
.leading-[n] ght: [n/4]rem; for n = 3-10
.leading-noneline-height: 1;
.leading-normalline-height: 1.5;
.leading-tightline-height: 1.25;
.leading-snugline-height: 1.375;
.leading-relaxedline-height: 1.625;
.leading-looseline-height: 2;

List Style Position

ClassProperties
.list-insidelist-style-position: inside;
.list-outsidelist-style-position: outside;

List Style Type

ClassProperties
.list-disclist-style-type: disc;
.list-decimallist-style-type: decimal;
.list-nonelist-style-type: none;

Text Align

ClassProperties
.text-lefttext-align: left;
.text-centertext-align: center;
.text-righttext-align: right;
.text-justifytext-align: justify;

Color

ClassProperties
.text-inheritcolor: inherit;
.text-currentcolor: currentColor;
.text-transparentcolor: transparent;
.text-neutral-[n]color: var(--color-neutral-[n]); for n = 50, 75, 80, 90, 100, 150, 200, 250, 300, 350, 375, 380, 400, 500, 550, 600, 700, 800, 900, 950, 1000
.text-ebonyClay-[n]color: var(--color-ebonyClay-[n]); for n = 25, 50, 100, 125, 150, 175, 200, 300, 350, 375, 400, 450, 475, 500, 550, 600, 625, 700, 800, 825, 850, 900, 950, 951, 960
.text-gray-[n]color: var(--color-gray-[n]); for n = 100, 150, 200, 250, 300, 400, 500, 600, 700, 750, 800, 850, 900, 925, 950
.text-red-[n]color: var(--color-red-[n]); for n = 50, 100, 200, 300, 400, 425, 425-10, 450, 500, 600, 700, 800, 900, 950, 951, 952
.text-green-[n]color: var(--color-green-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 952-10, 952-15, 954
.text-blue-[n]color: var(--color-blue-[n]); for n = 50, 100, 200, 250, 250-10, 250-20, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.text-purple-[n]color: var(--color-purple-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953
.text-pink-[n]color: var(--color-pink-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.text-azure-[n]color: var(--color-azure-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.text-orange-[n]color: var(--color-orange-[n]); for n = 50, 100, 200, 300, 400, 425, 450, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.text-akinon-[n]color: var(--color-akinon-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Text Decoration Line

ClassProperties
.underlinetext-decoration-line: underline;
.overlinetext-decoration-line: overline;
.line-throughtext-decoration-line: line-through;
.no-underlinetext-decoration-line: none;

Text Decoration Color

ClassProperties
.decoration-inherittext-decoration-color: inherit;
.decoration-currenttext-decoration-color: currentColor;
.decoration-transparenttext-decoration-color: transparent;
.decoration-neutral-[n]text-decoration-color: var(--color-neutral-[n]); for n = 50, 75, 80, 90, 100, 150, 200, 250, 300, 350, 375, 380, 400, 500, 550, 600, 700, 800, 900, 950, 1000
.decoration-ebonyClay-[n]text-decoration-color: var(--color-ebonyClay-[n]); for n = 25, 50, 100, 125, 150, 175, 200, 300, 350, 375, 400, 450, 475, 500, 550, 600, 625, 700, 800, 825, 850, 900, 950, 951, 960
.decoration-gray-[n]text-decoration-color: var(--color-gray-[n]); for n = 100, 150, 200, 250, 300, 400, 500, 600, 700, 750, 800, 850, 900, 925, 950
.decoration-red-[n]text-decoration-color: var(--color-red-[n]); for n = 50, 100, 200, 300, 400, 425, 425-10, 450, 500, 600, 700, 800, 900, 950, 951, 952
.decoration-green-[n]text-decoration-color: var(--color-green-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 952-10, 952-15, 954
.decoration-blue-[n]text-decoration-color: var(--color-blue-[n]); for n = 50, 100, 200, 250, 250-10, 250-20, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.decoration-purple-[n]text-decoration-color: var(--color-purple-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953
.decoration-pink-[n]text-decoration-color: var(--color-pink-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.decoration-azure-[n]text-decoration-color: var(--color-azure-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.decoration-orange-[n]text-decoration-color: var(--color-orange-[n]); for n = 50, 100, 200, 300, 400, 425, 450, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.decoration-akinon-[n]text-decoration-color: var(--color-akinon-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Text Decoration Style

ClassProperties
.decoration-solidtext-decoration-style: solid;
.decoration-doubletext-decoration-style: double;
.decoration-dottedtext-decoration-style: dotted;
.decoration-dashedtext-decoration-style: dashed;
.decoration-wavytext-decoration-style: wavy;

Text Decoration Thickness

ClassProperties
.decoration-from-fonttext-decoration-thickness: from-font;
.decoration-autotext-decoration-thickness: auto;
.decoration-[n]text-decoration-thickness: [n]px; for n = 1-5

Text Underline Offset

ClassProperties
.underline-offset-autotext-underline-offset: auto;
.underline-offset-[n]text-underline-offset: [n]px; for n = 1-5

Text Transform

ClassProperties
.uppercasetext-transform: uppercase;
.lowercasetext-transform: lowercase;
.capitalizetext-transform: capitalize;
.normal-casetext-transform: none;

Text Overflow

ClassProperties
.truncate overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
.text-ellipsistext-overflow: ellipsis;
.text-cliptext-overflow: clip;

Text Wrap

ClassProperties
.text-wraptext-wrap: wrap;
.text-nowraptext-wrap: nowrap;
.text-balancetext-wrap: balance;
.text-prettytext-wrap: pretty;

Text Indent

ClassProperties
.indent-[n]text-indent: [n/4]rem; for n = 2, 4, 6, 8, … , 16
.indent-pxtext-indent: 1px;

Vertical Align

ClassProperties
.align-baselinevertical-align: initial;
.align-topvertical-align: top;
.align-middlevertical-align: middle;
.align-bottomvertical-align: bottom;
.align-subvertical-align: sub;
.align-supervertical-align: super;

White Space

ClassProperties
.whitespace-normalwhite-space: normal;
.whitespace-nowrapwhite-space: nowrap;
.whitespace-prewhite-space: pre;
.whitespace-pre-linewhite-space: pre-line;
.whitespace-pre-wrapwhite-space: pre-wrap;

Word Break

ClassProperties
.break-normaloverflow-wrap: normal; word-break: normal;
.break-wordsoverflow-wrap: break-word;
.break-allword-break: break-all;
.break-keepword-break: keep-all;

Hyphens

ClassProperties
.hyphens-nonehyphens: none;
.hyphens-manualhyphens: manual;
.hyphens-autohyphens: auto;

Backgrounds

Background Attachment

ClassProperties
.bg-fixedbackground-attachment: fixed;
.bg-localbackground-attachment: local;
.bg-scrollbackground-attachment: scroll;

Background Clip

ClassProperties
.bg-clip-borderbackground-clip: border-box;
.bg-clip-paddingbackground-clip: padding-box;
.bg-clip-contentbackground-clip: content-box;
.bg-clip-textbackground-clip: text;

Background Color

ClassProperties
.bg-inheritbackground-color: inherit;
.bg-currentbackground-color: currentColor;
.bg-transparentbackground-color: transparent;
.bg-neutral-[n]background-color: var(--color-neutral-[n]); for n = 50, 75, 80, 90, 100, 150, 200, 250, 300, 350, 375, 380, 400, 500, 550, 600, 700, 800, 900, 950, 1000
.bg-ebonyClay-[n]background-color: var(--color-ebonyClay-[n]); for n = 25, 50, 100, 125, 150, 175, 200, 300, 350, 375, 400, 450, 475, 500, 550, 600, 625, 700, 800, 825, 850, 900, 950, 951, 960
.bg-gray-[n]background-color: var(--color-gray-[n]); for n = 100, 150, 200, 250, 300, 400, 500, 600, 700, 750, 800, 850, 900, 925, 950
.bg-red-[n]background-color: var(--color-red-[n]); for n = 50, 100, 200, 300, 400, 425, 425-10, 450, 500, 600, 700, 800, 900, 950, 951, 952
.bg-green-[n]background-color: var(--color-green-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 952-10, 952-15, 954
.bg-blue-[n]background-color: var(--color-blue-[n]); for n = 50, 100, 200, 250, 250-10, 250-20, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.bg-purple-[n]background-color: var(--color-purple-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953
.bg-pink-[n]background-color: var(--color-pink-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.bg-azure-[n]background-color: var(--color-azure-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.bg-orange-[n]background-color: var(--color-orange-[n]); for n = 50, 100, 200, 300, 400, 425, 450, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.bg-akinon-[n]background-color: var(--color-akinon-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Background Image

ClassProperties
.bg-nonebackground-image: none;

Background Origin

ClassProperties
.bg-origin-borderbackground-origin: border-box;
.bg-origin-paddingbackground-origin: padding-box;
.bg-origin-contentbackground-origin: content-box;

Background Position

ClassProperties
.bg-bottombackground-position: bottom;
.bg-centerbackground-position: center;
.bg-leftbackground-position: left;
.bg-left-bottombackground-position: left bottom;
.bg-left-topbackground-position: left top;
.bg-rightbackground-position: right;
.bg-right-bottombackground-position: right bottom;
.bg-right-topbackground-position: right top;
.bg-topbackground-position: top;

Background Repeat

ClassProperties
.bg-repeatbackground-repeat: repeat;
.bg-repeat-xbackground-repeat: repeat-x;
.bg-repeat-ybackground-repeat: repeat-y;
.bg-repeat-spacebackground-repeat: space;
.bg-repeat-roundbackground-repeat: round;
.bg-no-repeatbackground-repeat: no-repeat;

Background Size

ClassProperties
.bg-autobackground-size: auto;
.bg-coverbackground-size: cover;
.bg-containbackground-size: contain;

Borders

Border Radius

ClassProperties
.rounded-2xlborder-radius: 1rem;
.rounded-3xlborder-radius: 1.5rem;
.rounded-fullborder-radius: 9999px;
.rounded-lgborder-radius: 0.5rem;
.rounded-mdborder-radius: 0.375rem;
.rounded-noneborder-radius: 0;
.rounded-smborder-radius: 0.125rem;
.rounded-xlborder-radius: 0.75rem;
.rounded-bborder-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
.rounded-b-2xlborder-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem;
.rounded-b-3xlborder-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem;
.rounded-b-fullborder-bottom-left-radius: 9999px; border-bottom-right-radius: 9999px;
.rounded-b-lgborder-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
.rounded-b-mdborder-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem;
.rounded-b-noneborder-bottom-left-radius: 0; border-bottom-right-radius: 0;
.rounded-b-smborder-bottom-left-radius: 0.125rem; border-bottom-right-radius: 0.125rem;
.rounded-b-xlborder-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem;
.rounded-eborder-end-end-radius: 0.25rem; border-start-end-radius: 0.25rem;
.rounded-e-2xlborder-end-end-radius: 1rem; border-start-end-radius: 1rem;
.rounded-e-3xlborder-end-end-radius: 1.5rem; border-start-end-radius: 1.5rem;
.rounded-e-fullborder-end-end-radius: 9999px; border-start-end-radius: 9999px;
.rounded-e-lgborder-end-end-radius: 0.5rem; border-start-end-radius: 0.5rem;
.rounded-e-mdborder-end-end-radius: 0.375rem; border-start-end-radius: 0.375rem;
.rounded-e-noneborder-end-end-radius: 0; border-start-end-radius: 0;
.rounded-e-smborder-end-end-radius: 0.125rem; border-start-end-radius: 0.125rem;
.rounded-e-xlborder-end-end-radius: 0.75rem; border-start-end-radius: 0.75rem;
.rounded-lborder-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem;
.rounded-l-2xlborder-bottom-left-radius: 1rem; border-top-left-radius: 1rem;
.rounded-l-3xlborder-bottom-left-radius: 1.5rem; border-top-left-radius: 1.5rem;
.rounded-l-fullborder-bottom-left-radius: 9999px; border-top-left-radius: 9999px;
.rounded-l-lgborder-bottom-left-radius: 0.5rem; border-top-left-radius: 0.5rem;
.rounded-l-mdborder-bottom-left-radius: 0.375rem; border-top-left-radius: 0.375rem;
.rounded-l-noneborder-bottom-left-radius: 0; border-top-left-radius: 0;
.rounded-l-smborder-bottom-left-radius: 0.125rem; border-top-left-radius: 0.125rem;
.rounded-l-xlborder-bottom-left-radius: 0.75rem; border-top-left-radius: 0.75rem;
.rounded-rborder-bottom-right-radius: 0.25rem; border-top-right-radius: 0.25rem;
.rounded-r-2xlborder-bottom-right-radius: 1rem; border-top-right-radius: 1rem;
.rounded-r-3xlborder-bottom-right-radius: 1.5rem; border-top-right-radius: 1.5rem;
.rounded-r-fullborder-bottom-right-radius: 9999px; border-top-right-radius: 9999px;
.rounded-r-lgborder-bottom-right-radius: 0.5rem; border-top-right-radius: 0.5rem;
.rounded-r-mdborder-bottom-right-radius: 0.375rem; border-top-right-radius: 0.375rem;
.rounded-r-noneborder-bottom-right-radius: 0; border-top-right-radius: 0;
.rounded-r-smborder-bottom-right-radius: 0.125rem; border-top-right-radius: 0.125rem;
.rounded-r-xlborder-bottom-right-radius: 0.75rem; border-top-right-radius: 0.75rem;
.rounded-sborder-end-start-radius: 0.25rem; border-start-start-radius: 0.25rem;
.rounded-s-2xlborder-end-start-radius: 1rem; border-start-start-radius: 1rem;
.rounded-s-3xlborder-end-start-radius: 1.5rem; border-start-start-radius: 1.5rem;
.rounded-s-fullborder-end-start-radius: 9999px; border-start-start-radius: 9999px;
.rounded-s-lgborder-end-start-radius: 0.5rem; border-start-start-radius: 0.5rem;
.rounded-s-mdborder-end-start-radius: 0.375rem; border-start-start-radius: 0.375rem;
.rounded-s-noneborder-end-start-radius: 0; border-start-start-radius: 0;
.rounded-s-smborder-end-start-radius: 0.125rem; border-start-start-radius: 0.125rem;
.rounded-s-xlborder-end-start-radius: 0.75rem; border-start-start-radius: 0.75rem;
.rounded-tborder-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem;
.rounded-t-2xlborder-top-left-radius: 1rem; border-top-right-radius: 1rem;
.rounded-t-3xlborder-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem;
.rounded-t-fullborder-top-left-radius: 9999px; border-top-right-radius: 9999px;
.rounded-t-lgborder-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;
.rounded-t-mdborder-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem;
.rounded-t-noneborder-top-left-radius: 0; border-top-right-radius: 0;
.rounded-t-smborder-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem;
.rounded-t-xlborder-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem;
.rounded-[br/bl]border-bottom-[right/left]-radius: 0.25rem;
.rounded-[br/bl]-2xlborder-bottom-[right/left]-radius: 1rem;
.rounded-[br/bl]-3xlborder-bottom-[right/left]-radius: 1.5rem;
.rounded-[br/bl]-fullborder-bottom-[right/left]-radius: 9999px;
.rounded-[br/bl]-lgborder-bottom-[right/left]-radius: 0.5rem;
.rounded-[br/bl]-mdborder-bottom-[right/left]-radius: 0.375rem;
.rounded-[br/bl]-noneborder-bottom-[right/left]-radius: 0;
.rounded-[br/bl]-smborder-bottom-[right/left]-radius: 0.125rem;
.rounded-[br/bl]-xlborder-bottom-[right/left]-radius: 0.75rem;
.rounded-[es/ee]border-end-[start/end]-radius: 0.25rem;
.rounded-[es/ee]-2xlborder-end-[start/end]-radius: 1rem;
.rounded-[es/ee]-3xlborder-end-[start/end]-radius: 1.5rem;
.rounded-[es/ee]-fullborder-end-[start/end]-radius: 9999px;
.rounded-[es/ee]-lgborder-end-[start/end]-radius: 0.5rem;
.rounded-[es/ee]-mdborder-end-[start/end]-radius: 0.375rem;
.rounded-[es/ee]-noneborder-end-[start/end]-radius: 0;
.rounded-[es/ee]-smborder-end-[start/end]-radius: 0.125rem;
.rounded-[es/ee]-xlborder-end-[start/end]-radius: 0.75rem;
.rounded-[ss/se]border-start-[start/end]-radius: 0.25rem;
.rounded-[ss/se]-2xlborder-start-[start/se]-radius: 1rem;
.rounded-[ss/se]-3xlborder-start-[start/end]-radius: 1.5rem;
.rounded-[ss/se]-fullborder-start-[start/end]-radius: 9999px;
.rounded-[ss/se]-lgborder-start-[start/end]-radius: 0.5rem;
.rounded-[ss/se]-mdborder-start-[start/end]-radius: 0.375rem;
.rounded-[ss/se]-noneborder-start-[start/end]-radius: 0;
.rounded-[ss/se]-smborder-start-[start/end]-radius: 0.125rem;
.rounded-[ss/se]-xlborder-start-[start/end]-radius: 0.75rem;
.rounded-[tr/tl]border-top-[right/left]-radius: 0.25rem;
.rounded-[tr/tl]-2xlborder-top-[right/left]-radius: 1rem;
.rounded-[tr/tl]-3xlborder-top-[right/left]-radius: 1.5rem;
.rounded-[tr/tl]-fullborder-top-[right/left]-radius: 9999px;
.rounded-[tr/tl]-lgborder-top-[right/left]-radius: 0.5rem;
.rounded-[tr/tl]-mdborder-top-[right/left]-radius: 0.375rem;
.rounded-[tr/tl]-noneborder-top-[right/left]-radius: 0;
.rounded-[tr/tl]-smborder-top-[right/left]-radius: 0.125rem;
.rounded-[tr/tl]-xlborder-top-[right/left]-radius: 0.75rem;

Border Width

ClassProperties
.borderborder-width: 1px;
.border-0border-width: 0;
.border-[n]border-width: [n/4]rem; for n = 4, 8
.border-xborder-left-width: 1px; border-right-width: 1px;
.border-yborder-top-width: 1px; border-bottom-width: 1px;
.border-x-0border-left-width: 0; border-right-width: 0;
.border-y-0border-top-width: 0; border-bottom-width: 0;
.border-x-[n]border-left-width: [n/4]rem; border-right-width: [n/4]rem; for n = 4, 8
.border-y-[n]border-top-width: [n/4]rem; border-bottom-width: [n/4]rem; for n = 4, 8
.border-[t/r/b/l]border-[top/right/bottom/left]-width: 1px;
.border-[t/r/b/l]-0border-[top/right/bottom/left]-width: 0;
.border-[t/r/b/l]-[n]border-[top/right/bottom/left]-width: [n/4]rem; for n = 4, 8

Border Color

ClassProperties
.border-inheritborder-color: inherit;
.border-currentborder-color: currentColor;
.border-transparentborder-color: transparent;
.border-neutral-[n]border-color: var(--color-neutral-[n]); for n = 50, 75, 80, 90, 100, 150, 200, 250, 300, 350, 375, 380, 400, 500, 550, 600, 700, 800, 900, 950, 1000
.border-ebonyClay-[n]border-color: var(--color-ebonyClay-[n]); for n = 25, 50, 100, 125, 150, 175, 200, 300, 350, 375, 400, 450, 475, 500, 550, 600, 625, 700, 800, 825, 850, 900, 950, 951, 960
.border-gray-[n]border-color: var(--color-gray-[n]); for n = 100, 150, 200, 250, 300, 400, 500, 600, 700, 750, 800, 850, 900, 925, 950
.border-red-[n]border-color: var(--color-red-[n]); for n = 50, 100, 200, 300, 400, 425, 425-10, 450, 500, 600, 700, 800, 900, 950, 951, 952
.border-green-[n]border-color: var(--color-green-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 952-10, 952-15, 954
.border-blue-[n]border-color: var(--color-blue-[n]); for n = 50, 100, 200, 250, 250-10, 250-20, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.border-purple-[n]border-color: var(--color-purple-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953
.border-pink-[n]border-color: var(--color-pink-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.border-azure-[n]border-color: var(--color-azure-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.border-orange-[n]border-color: var(--color-orange-[n]); for n = 50, 100, 200, 300, 400, 425, 450, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.border-akinon-[n]border-color: var(--color-akinon-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Border Style

ClassProperties
.border-solidborder-style: solid;
.border-dashedborder-style: dashed;
.border-dottedborder-style: dotted;
.border-doubleborder-style: double;
.border-noneborder-style: none;
.border-hiddenborder-style: hidden;

Outline Width

ClassProperties
.outlineoutline-width: 1px;
.outline-0outline: 0;
.outline-[n]outline-width: [n/4]rem; for n = 2, 4, 8

Outline Color

ClassProperties
.outline-inheritoutline-color: inherit;
.outline-currentoutline-color: currentColor;
.outline-transparentoutline-color: transparent;
.outline-neutral-[n]outline-color: var(--color-neutral-[n]); for n = 50, 75, 80, 90, 100, 150, 200, 250, 300, 350, 375, 380, 400, 500, 550, 600, 700, 800, 900, 950, 1000
.outline-ebonyClay-[n]outline-color: var(--color-ebonyClay-[n]); for n = 25, 50, 100, 125, 150, 175, 200, 300, 350, 375, 400, 450, 475, 500, 550, 600, 625, 700, 800, 825, 850, 900, 950, 951, 960
.outline-gray-[n]outline-color: var(--color-gray-[n]); for n = 100, 150, 200, 250, 300, 400, 500, 600, 700, 750, 800, 850, 900, 925, 950
.outline-red-[n]outline-color: var(--color-red-[n]); for n = 50, 100, 200, 300, 400, 425, 425-10, 450, 500, 600, 700, 800, 900, 950, 951, 952
.outline-green-[n]outline-color: var(--color-green-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 952-10, 952-15, 954
.outline-blue-[n]outline-color: var(--color-blue-[n]); for n = 50, 100, 200, 250, 250-10, 250-20, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.outline-purple-[n]outline-color: var(--color-purple-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953
.outline-pink-[n]outline-color: var(--color-pink-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.outline-azure-[n]outline-color: var(--color-azure-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.outline-orange-[n]outline-color: var(--color-orange-[n]); for n = 50, 100, 200, 300, 400, 425, 450, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.outline-akinon-[n]outline-color: var(--color-akinon-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Outline Style

ClassProperties
.outline-solidoutline-style: solid;
.outline-dashedoutline-style: dashed;
.outline-dottedoutline-style: dotted;
.outline-doubleoutline-style: double;
.outline-noneoutline-style: none;
.outline-hiddenoutline: 0.125rem solid transparent; outline-offset: 0.125rem;

Outline Offset

ClassProperties
.outline-offsetoutline-offset: 1px;
.outline-offset-0outline-offset: 0;
.outline-offset-[n]outline-offset: [n/4]rem; for n = 2, 4, 8

Effects

Box Shadow

ClassProperties
.shadow-smbox-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
.shadow-mdbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
.shadow-lgbox-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
.shadow-xlbox-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
.shadow-2xlbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
.shadow-innerbox-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
.shadow-nonebox-shadow: none;
.shadow-neutral-[n]--aki-shadow-color: var(--color-neutral-[n]); --aki-shadow: var(--aki-shadow-colored); for n = 50, 75, 80, 90, 100, 150, 200, 250, 300, 350, 375, 380, 400, 500, 550, 600, 700, 800, 900, 950, 1000
.shadow-ebonyClay-[n]--aki-shadow-color: var(--color-ebonyClay-[n]); --aki-shadow: var(--aki-shadow-colored); for n = 25, 50, 100, 125, 150, 175, 200, 300, 350, 375, 400, 450, 475, 500, 550, 600, 625, 700, 800, 825, 850, 900, 950, 951, 960
.shadow-gray-[n]--aki-shadow-color: var(--color-gray-[n]); --aki-shadow: var(--aki-shadow-colored); for n = 100, 150, 200, 250, 300, 400, 500, 600, 700, 750, 800, 850, 900, 925, 950
.shadow-red-[n]--aki-shadow-color: var(--color-red-[n]); --aki-shadow: var(--aki-shadow-colored); for n = 50, 100, 200, 300, 400, 425, 425-10, 450, 500, 600, 700, 800, 900, 950, 951, 952
.shadow-green-[n]--aki-shadow-color: var(--color-green-[n]); --aki-shadow: var(--aki-shadow-colored); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 952-10, 952-15, 954
.shadow-blue-[n]--aki-shadow-color: var(--color-blue-[n]); --aki-shadow: var(--aki-shadow-colored); for n = 50, 100, 200, 250, 250-10, 250-20, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.shadow-purple-[n]--aki-shadow-color: var(--color-purple-[n]); --aki-shadow: var(--aki-shadow-colored); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953
.shadow-pink-[n]--aki-shadow-color: var(--color-pink-[n]); --aki-shadow: var(--aki-shadow-colored);; for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.shadow-azure-[n]--aki-shadow-color: var(--color-azure-[n]); --aki-shadow: var(--aki-shadow-colored); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.shadow-orange-[n]--aki-shadow-color: var(--color-orange-[n]); --aki-shadow: var(--aki-shadow-colored); for n = 50, 100, 200, 300, 400, 425, 450, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.shadow-akinon-[n]--aki-shadow-color: var(--color-akinon-[n]); --aki-shadow: var(--aki-shadow-colored); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Opacity

ClassProperties
.opacity-[n]opacity: [n/100]; for n = 0, 10, 15, …, 95, 100

Interactivity

### Accent Color

ClassProperties
.accent-inheritaccent-color: inherit;
.accent-currentaccent-color: currentColor;
.accent-transparentaccent-color: transparent;
.accent-neutral-[n]accent-color: var(--color-neutral-[n]); for n = 50, 75, 80, 90, 100, 150, 200, 250, 300, 350, 375, 380, 400, 500, 550, 600, 700, 800, 900, 950, 1000
.accent-ebonyClay-[n]accent-color: var(--color-ebonyClay-[n]); for n = 25, 50, 100, 125, 150, 175, 200, 300, 350, 375, 400, 450, 475, 500, 550, 600, 625, 700, 800, 825, 850, 900, 950, 951, 960
.accent-gray-[n]accent-color: var(--color-gray-[n]); for n = 100, 150, 200, 250, 300, 400, 500, 600, 700, 750, 800, 850, 900, 925, 950
.accent-red-[n]accent-color: var(--color-red-[n]); for n = 50, 100, 200, 300, 400, 425, 425-10, 450, 500, 600, 700, 800, 900, 950, 951, 952
.accent-green-[n]accent-color: var(--color-green-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 952-10, 952-15, 954
.accent-blue-[n]accent-color: var(--color-blue-[n]); for n = 50, 100, 200, 250, 250-10, 250-20, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.accent-purple-[n]accent-color: var(--color-purple-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953
.accent-pink-[n]accent-color: var(--color-pink-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.accent-azure-[n]accent-color: var(--color-azure-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.accent-orange-[n]accent-color: var(--color-orange-[n]); for n = 50, 100, 200, 300, 400, 425, 450, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.accent-akinon-[n]accent-color: var(--color-akinon-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

### Accent Color

ClassProperties
.appearance-noneappearance: none;
.appearance-autoappearance: auto;

Caret Color

ClassProperties
.caret-inheritcaret-color: inherit;
.caret-currentcaret-color: currentColor;
.caret-transparentcaret-color: transparent;
.caret-neutral-[n]caret-color: var(--color-neutral-[n]); for n = 50, 75, 80, 90, 100, 150, 200, 250, 300, 350, 375, 380, 400, 500, 550, 600, 700, 800, 900, 950, 1000
.caret-ebonyClay-[n]caret-color: var(--color-ebonyClay-[n]); for n = 25, 50, 100, 125, 150, 175, 200, 300, 350, 375, 400, 450, 475, 500, 550, 600, 625, 700, 800, 825, 850, 900, 950, 951, 960
.caret-gray-[n]caret-color: var(--color-gray-[n]); for n = 100, 150, 200, 250, 300, 400, 500, 600, 700, 750, 800, 850, 900, 925, 950
.caret-red-[n]caret-color: var(--color-red-[n]); for n = 50, 100, 200, 300, 400, 425, 425-10, 450, 500, 600, 700, 800, 900, 950, 951, 952
.caret-green-[n]caret-color: var(--color-green-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 952-10, 952-15, 954
.caret-blue-[n]caret-color: var(--color-blue-[n]); for n = 50, 100, 200, 250, 250-10, 250-20, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.caret-purple-[n]caret-color: var(--color-purple-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953
.caret-pink-[n]caret-color: var(--color-pink-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.caret-azure-[n]caret-color: var(--color-azure-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.caret-orange-[n]caret-color: var(--color-orange-[n]); for n = 50, 100, 200, 300, 400, 425, 450, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.caret-akinon-[n]caret-color: var(--color-akinon-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Cursor

ClassProperties
.cursor-aliascursor: alias;
.cursor-autocursor: auto;
.cursor-cellcursor: cell;
.cursor-copycursor: copy;
.cursor-crosshaircursor: crosshair;
.cursor-defaultcursor: default;
.cursor-grabcursor: grab;
.cursor-grabbingcursor: grabbing;
.cursor-helpcursor: help;
.cursor-movecursor: move;
.cursor-nonecursor: none;
.cursor-pointercursor: pointer;
.cursor-progresscursor: progress;
.cursor-textcursor: text;
.cursor-waitcursor: wait;

Field Sizing

ClassProperties
.field-sizing-fixedfield-sizing: fixed;
.field-sizing-contentfield-sizing: content;

Pointer Events

ClassProperties
.pointer-events-autopointer-events: auto;
.pointer-events-nonepointer-events: none;

Resize

ClassProperties
.resize-noneresize: none;
.resizeresize: both;
.resize-yresize: vertical;
.resize-xresize: horizontal;

Scroll Behavior

ClassProperties
.scroll-autoscroll-behavior: auto;
.scroll-smoothscroll-behavior: smooth;

Scroll Snap Align

ClassProperties
.snap-startscroll-snap-align: start;
.snap-endscroll-snap-align: end;
.snap-centerscroll-snap-align: center;
.snap-align-nonescroll-snap-align: none;

Scroll Snap Stop

ClassProperties
.snap-normalscroll-snap-stop: normal;
.snap-alwaysscroll-snap-stop: always;

User Select

ClassProperties
.select-noneuser-select: none;
.select-textuser-select: text;
.select-alluser-select: all;
.select-autouser-select: auto;

Will Change

ClassProperties
.will-change-autowill-change: auto;
.will-change-scrollwill-change: scroll-position;
.will-change-contentswill-change: contents;
.will-change-transformwill-change: transform;

SVG

Fill

ClassProperties
.fill-nonefill: none;
.fill-inheritfill: inherit;
.fill-currentfill: currentColor;
.fill-transparentfill: transparent;
.fill-neutral-[n]fill: var(--color-neutral-[n]); for n = 50, 75, 80, 90, 100, 150, 200, 250, 300, 350, 375, 380, 400, 500, 550, 600, 700, 800, 900, 950, 1000
.fill-ebonyClay-[n]fill: var(--color-ebonyClay-[n]); for n = 25, 50, 100, 125, 150, 175, 200, 300, 350, 375, 400, 450, 475, 500, 550, 600, 625, 700, 800, 825, 850, 900, 950, 951, 960
.fill-gray-[n]fill: var(--color-gray-[n]); for n = 100, 150, 200, 250, 300, 400, 500, 600, 700, 750, 800, 850, 900, 925, 950
.fill-red-[n]fill: var(--color-red-[n]); for n = 50, 100, 200, 300, 400, 425, 425-10, 450, 500, 600, 700, 800, 900, 950, 951, 952
.fill-green-[n]fill: var(--color-green-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 952-10, 952-15, 954
.fill-blue-[n]fill: var(--color-blue-[n]); for n = 50, 100, 200, 250, 250-10, 250-20, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.fill-purple-[n]fill: var(--color-purple-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953
.fill-pink-[n]fill: var(--color-pink-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.fill-azure-[n]fill: var(--color-azure-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.fill-orange-[n]fill: var(--color-orange-[n]); for n = 50, 100, 200, 300, 400, 425, 450, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.fill-akinon-[n]fill: var(--color-akinon-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Stroke

ClassProperties
.stroke-nonestroke: none;
.stroke-inheritstroke: inherit;
.stroke-currentstroke: currentColor;
.stroke-transparentstroke: transparent;
.stroke-neutral-[n]stroke: var(--color-neutral-[n]); for n = 50, 75, 80, 90, 100, 150, 200, 250, 300, 350, 375, 380, 400, 500, 550, 600, 700, 800, 900, 950, 1000
.stroke-ebonyClay-[n]stroke: var(--color-ebonyClay-[n]); for n = 25, 50, 100, 125, 150, 175, 200, 300, 350, 375, 400, 450, 475, 500, 550, 600, 625, 700, 800, 825, 850, 900, 950, 951, 960
.stroke-gray-[n]stroke: var(--color-gray-[n]); for n = 100, 150, 200, 250, 300, 400, 500, 600, 700, 750, 800, 850, 900, 925, 950
.stroke-red-[n]stroke: var(--color-red-[n]); for n = 50, 100, 200, 300, 400, 425, 425-10, 450, 500, 600, 700, 800, 900, 950, 951, 952
.stroke-green-[n]stroke: var(--color-green-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 952-10, 952-15, 954
.stroke-blue-[n]stroke: var(--color-blue-[n]); for n = 50, 100, 200, 250, 250-10, 250-20, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.stroke-purple-[n]stroke: var(--color-purple-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 951, 952, 953
.stroke-pink-[n]stroke: var(--color-pink-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.stroke-azure-[n]stroke: var(--color-azure-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
.stroke-orange-[n]stroke: var(--color-orange-[n]); for n = 50, 100, 200, 300, 400, 425, 450, 500, 600, 700, 800, 900, 950, 951, 952, 953, 954
.stroke-akinon-[n]stroke: var(--color-akinon-[n]); for n = 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Stroke Width

ClassProperties
.stroke-[n]stroke-width: [n]px; for n = 1-5
IconographyTheme