Semantic Table

Each semantic class is equivalent to several utility classes.

Their cross-reference is given below, using color "blue" for illustration.

Semantic Class	Equivalent Utility Classes
bg-blue-app	bg-blue-1 dark:bg-bluedark-1
bg-blue-subtle	bg-blue-2 dark:bg-bluedark-2
bg-blue-ui	bg-blue-3 dark:bg-bluedark-3 hover:bg-blue-4 dark:hover:bg-bluedark-4 active:bg-blue-5 dark:active:bg-bluedark-5
bg-blue-ghost	bg-transparent dark:bg-transparent hover:bg-blue-4 dark:hover:bg-bluedark-4 active:bg-blue-5 dark:active:bg-bluedark-5
bg-blue-action	bg-blue-4 dark:bg-bluedark-4 hover:bg-blue-5 dark:hover:bg-bluedark-5 active:bg-blue-6 dark:active:bg-bluedark-6
bg-blue-solid	bg-blue-9 dark:bg-bluedark-9 hover:bg-blue-10 dark:hover:bg-bluedark-10 text-slate-12
border-blue-dim	border-blue-6 dark:border-bluedark-6
border-blue-normal	border-blue-7 dark:border-bluedark-7 hover:border-blue-8 dark:hover:border-bluedark-8
divide-blue-dim	divide-blue-6 dark:divide-bluedark-6
divide-blue-normal	divide-blue-7 dark:divide-bluedark-7 hover:divide-blue-8 dark:hover:divide-bluedark-8
text-blue-dim	text-blue-11 dark:text-bluedark-11
text-blue-normal	text-blue-12 dark:text-bluedark-12

Use cases for each semantic classes are listed in Understanding the Scale.