diff --git a/docs/src/components/TailwindClassnames/index.tsx b/docs/src/components/TailwindClassnames/index.tsx
index 3a7783582a..d72f8cb10f 100644
--- a/docs/src/components/TailwindClassnames/index.tsx
+++ b/docs/src/components/TailwindClassnames/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import orbitFoundation from "@kiwicom/orbit-tailwind-preset";
 import {
   Table,
+  Text,
   TableHead,
   Stack,
   TableRow,
@@ -15,6 +16,25 @@ import { upperFirst, transform, omit } from "lodash";
 
 import { DesignTokenName, DesignTokenValue, DesignTokenIcon } from "../DesignTokensList";
 
+type Category =
+  | "Screens"
+  | "Spacing"
+  | "ZIndex"
+  | "Colors"
+  | "BorderRadius"
+  | "BoxShadow"
+  | "TransitionDuration"
+  | "Padding"
+  | "Width"
+  | "Height"
+  | "LineHeight"
+  | "FontSize"
+  | "FontWeight"
+  | "FontFamily"
+  | "Animation";
+
+/* eslint-disable no-param-reassign */
+
 const StyledTableWrapper = styled.div`
   table {
     table-layout: fixed;
@@ -22,12 +42,9 @@ const StyledTableWrapper = styled.div`
 `;
 
 const tailwindPrefixes = {
-  BackgroundColor: "bg",
-  BorderColor: "border",
   BorderRadius: "rounded",
   BoxShadow: "shadow",
   TransitionDuration: "duration",
-  TextColor: "text",
   Padding: "p",
   Width: "w",
   Height: "h",
@@ -39,7 +56,7 @@ const tailwindPrefixes = {
   Animation: "animate",
 };
 
-const getCategory = (name: string) => {
+const getCategory = (name: Category) => {
   if (["Padding", "Width", "Height"].includes(name)) return "size";
   if (["FontWeight", "FontSize", "LineHeight", "FontFamily"].includes(name)) return "typography";
   if (name === "ZIndex") return "z-index";
@@ -52,6 +69,36 @@ const getCategory = (name: string) => {
   return "palette";
 };
 
+const transformColors = (colors: Record<string, string>) => {
+  return Object.entries(colors).reduce((acc, [category, value]) => {
+    if (typeof value === "object") {
+      Object.entries(value).forEach(([name, color]) => {
+        acc[`${category}-${name}`] = color;
+      });
+    } else {
+      acc[category] = value;
+    }
+
+    return acc;
+  }, {});
+};
+
+const CategoryDescriptions = ({ category }: { category: Category }) => {
+  return (
+    <Text type="info" weight="medium" margin={{ bottom: "12px" }}>
+      {category === "Colors" &&
+        `To be used with Tailwind classes that apply a color property (eg: "text-blue-dark",
+        "bg-red-light", etc).`}
+      {category === "Screens" &&
+        `To be used as a Tailwind prefix for defining media queries (eg: "sm:opacity-1",
+        "tb:hidden", etc).`}
+      {category === "Spacing" &&
+        `To be used as a Tailwind prefix for defining margin and padding (eg: "m-sm", "p-xl", etc).`}
+      {category === "ZIndex" && "Default Tailwind zIndex classes are also available"}
+    </Text>
+  );
+};
+
 const TailwindClassnames = () => {
   const orbitPreset = orbitFoundation().presets?.at(0)?.theme;
   const transformedConfig = omit(
@@ -61,49 +108,54 @@ const TailwindClassnames = () => {
         zIndex: orbitPreset?.extend?.zIndex,
       },
       (r, v, k) => {
-        // eslint-disable-next-line no-param-reassign
-        r[upperFirst(k)] = v;
+        if (k === "colors") {
+          // @ts-expect-error lodash
+          r[upperFirst(k)] = transformColors(v);
+        } else {
+          r[upperFirst(k)] = v;
+        }
         return r;
       },
       {},
     ),
-    ["Keyframes", "Colors", "Extend"],
+    ["Keyframes", "Extend"],
   );
 
   const [listOfClassnames, setListOfClassnames] = React.useState(transformedConfig);
 
-  const [selectedGroup, setSelectedGroup] = React.useState<string>();
+  const [selectedCategory, setSelectedCategory] = React.useState<string>();
 
   return (
     <Stack direction="column" shrink spacing="XLarge">
       <Stack inline spacing="small" wrap>
-        {Object.keys(transformedConfig).map(grp => {
+        {Object.keys(transformedConfig).map(cat => {
           return (
             <Button
-              type={selectedGroup === grp ? "primary" : "secondary"}
+              type={selectedCategory === cat ? "primary" : "secondary"}
               size="small"
               onClick={() => {
-                setSelectedGroup(grp);
+                setSelectedCategory(cat);
                 setListOfClassnames(() => {
                   return {
-                    [grp]: {
-                      ...transformedConfig[grp],
+                    [cat]: {
+                      ...transformedConfig[cat],
                     },
                   };
                 });
               }}
             >
-              {grp}
+              {cat}
             </Button>
           );
         })}
       </Stack>
-      {Object.keys(listOfClassnames).map(group => {
+      {Object.keys(listOfClassnames).map(category => {
         return (
           <StyledTableWrapper>
-            <Heading type="title2" spaceAfter="normal">
-              {group}
+            <Heading type="title2" spaceAfter="small">
+              {category}
             </Heading>
+            <CategoryDescriptions category={category as Category} />
             <Table>
               <TableHead>
                 <TableRow>
@@ -112,16 +164,19 @@ const TailwindClassnames = () => {
                 </TableRow>
               </TableHead>
               <TableBody>
-                {Object.entries(listOfClassnames[group]).map(([name, value]) => {
+                {Object.entries(listOfClassnames[category]).map(([name, value]) => {
                   return (
                     <TableRow>
                       <TableCell>
                         <Stack flex align="center">
-                          <DesignTokenIcon value={String(value)} type={getCategory(group)} />
+                          <DesignTokenIcon
+                            value={String(value)}
+                            type={getCategory(category as Category)}
+                          />
                           <DesignTokenName tooltipText="Click to copy the classname.">
-                            {["Screens", "Spacing"].includes(group)
+                            {["Screens", "Spacing", "Colors"].includes(category)
                               ? name
-                              : `${tailwindPrefixes[group]}-${name}`}
+                              : `${tailwindPrefixes[category]}-${name}`}
                           </DesignTokenName>
                         </Stack>
                       </TableCell>