diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 653160de..5d5a830e 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -11,11 +11,26 @@ import {
   ThemeProvider,
   useColorScheme,
 } from "@mui/material/styles";
+import { DocsContainer, DocsContainerProps } from "@storybook/blocks";
 import { useDarkMode } from "storybook-dark-mode";
 import "./global.css";
 import draggableIframe from "./decorators/draggableIframe";
 import "./tailwind.css";
 
+const theme = createTheme({
+  cssVariables: { colorSchemeSelector: "data" },
+  colorSchemes: { light: true, dark: true },
+});
+function CssVarsProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <ModeObserver />
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+}
+
 const ModeObserver = () => {
   const isDark = useDarkMode();
   const { setMode } = useColorScheme();
@@ -88,21 +103,24 @@ const preview: Preview = {
       hideNoControlsWarning: true,
       expanded: false,
     },
+    docs: {
+      container: ({
+        children,
+        ...props
+      }: DocsContainerProps & { children: React.ReactNode }) => (
+        <CssVarsProvider>
+          <DocsContainer {...props}>{children}</DocsContainer>
+        </CssVarsProvider>
+      ),
+    },
   },
   decorators: [
     draggableIframe(),
     (Story) => {
       return (
-        <ThemeProvider
-          theme={createTheme({
-            cssVariables: { colorSchemeSelector: "data" },
-            colorSchemes: { light: true, dark: true },
-          })}
-        >
-          <ModeObserver />
-          <CssBaseline />
+        <CssVarsProvider>
           <Story />
-        </ThemeProvider>
+        </CssVarsProvider>
       );
     },
   ],
diff --git a/blocks/tailwind-preset/material-ui-tailwind-preset.js b/blocks/tailwind-preset/material-ui-tailwind-preset.js
new file mode 100644
index 00000000..511900cd
--- /dev/null
+++ b/blocks/tailwind-preset/material-ui-tailwind-preset.js
@@ -0,0 +1,374 @@
+const plugin = require("tailwindcss/plugin");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      screens: {
+        sm: "600px",
+        md: "900px",
+        lg: "1200px",
+        xl: "1536px",
+        "2xl": "1920px",
+      },
+      colors: {
+        primary: {
+          DEFAULT: "rgb(var(--mui-palette-primary-mainChannel))",
+          light: "rgb(var(--mui-palette-primary-lightChannel))",
+          dark: "rgb(var(--mui-palette-primary-darkChannel))",
+          contrastText: "rgb(var(--mui-palette-primary-contrastTextChannel))",
+        },
+        secondary: {
+          DEFAULT: "rgb(var(--mui-palette-secondary-mainChannel))",
+          light: "rgb(var(--mui-palette-secondary-lightChannel))",
+          dark: "rgb(var(--mui-palette-secondary-darkChannel))",
+          contrastText: "rgb(var(--mui-palette-secondary-contrastTextChannel))",
+        },
+        info: {
+          DEFAULT: "rgb(var(--mui-palette-info-mainChannel))",
+          light: "rgb(var(--mui-palette-info-lightChannel))",
+          dark: "rgb(var(--mui-palette-info-darkChannel))",
+          contrastText: "rgb(var(--mui-palette-info-contrastTextChannel))",
+        },
+        error: {
+          DEFAULT: "rgb(var(--mui-palette-error-mainChannel))",
+          light: "rgb(var(--mui-palette-error-lightChannel))",
+          dark: "rgb(var(--mui-palette-error-darkChannel))",
+          contrastText: "rgb(var(--mui-palette-error-contrastTextChannel))",
+        },
+        success: {
+          DEFAULT: "rgb(var(--mui-palette-success-mainChannel))",
+          light: "rgb(var(--mui-palette-success-lightChannel))",
+          dark: "rgb(var(--mui-palette-success-darkChannel))",
+          contrastText: "rgb(var(--mui-palette-success-contrastTextChannel))",
+        },
+        warning: {
+          DEFAULT: "rgb(var(--mui-palette-warning-mainChannel))",
+          light: "rgb(var(--mui-palette-warning-lightChannel))",
+          dark: "rgb(var(--mui-palette-warning-darkChannel))",
+          contrastText: "rgb(var(--mui-palette-warning-contrastTextChannel))",
+        },
+        text: {
+          primary: "var(--mui-palette-text-primary)",
+          secondary: "var(--mui-palette-text-secondary)",
+          disabled: "var(--mui-palette-text-disabled)",
+        },
+        common: {
+          background: "var(--mui-palette-common-background)",
+          onBackground: "var(--mui-palette-common-onBackground)",
+        },
+        gray: {
+          50: "var(--mui-palette-grey-50)",
+          100: "var(--mui-palette-grey-100)",
+          200: "var(--mui-palette-grey-200)",
+          300: "var(--mui-palette-grey-300)",
+          400: "var(--mui-palette-grey-400)",
+          500: "var(--mui-palette-grey-500)",
+          600: "var(--mui-palette-grey-600)",
+          700: "var(--mui-palette-grey-700)",
+          800: "var(--mui-palette-grey-800)",
+          900: "var(--mui-palette-grey-900)",
+          A100: "var(--mui-palette-grey-A100)",
+          A200: "var(--mui-palette-grey-A200)",
+          A400: "var(--mui-palette-grey-A400)",
+          A700: "var(--mui-palette-grey-A700)",
+        },
+        divider: "var(--mui-palette-divider)",
+        background: {
+          default: "var(--mui-palette-background-default)",
+          paper: "var(--mui-palette-background-paper)",
+        },
+        action: {
+          active: "var(--mui-palette-action-active)",
+          hover: "var(--mui-palette-action-hover)",
+          selected: "var(--mui-palette-action-selected)",
+          disabled: "var(--mui-palette-action-disabled)",
+          focus: "var(--mui-palette-action-focus)",
+        },
+        Alert: {
+          errorColor: "var(--mui-palette-Alert-errorColor)",
+          infoColor: "var(--mui-palette-Alert-infoColor)",
+          successColor: "var(--mui-palette-Alert-successColor)",
+          warningColor: "var(--mui-palette-Alert-warningColor)",
+          errorFilledBg: "var(--mui-palette-Alert-errorFilledBg)",
+          infoFilledBg: "var(--mui-palette-Alert-infoFilledBg)",
+          successFilledBg: "var(--mui-palette-Alert-successFilledBg)",
+          warningFilledBg: "var(--mui-palette-Alert-warningFilledBg)",
+          errorFilledColor: "var(--mui-palette-Alert-errorFilledColor)",
+          infoFilledColor: "var(--mui-palette-Alert-infoFilledColor)",
+          successFilledColor: "var(--mui-palette-Alert-successFilledColor)",
+          warningFilledColor: "var(--mui-palette-Alert-warningFilledColor)",
+          errorStandardBg: "var(--mui-palette-Alert-errorStandardBg)",
+          infoStandardBg: "var(--mui-palette-Alert-infoStandardBg)",
+          successStandardBg: "var(--mui-palette-Alert-successStandardBg)",
+          warningStandardBg: "var(--mui-palette-Alert-warningStandardBg)",
+          errorIconColor: "var(--mui-palette-Alert-errorIconColor)",
+          infoIconColor: "var(--mui-palette-Alert-infoIconColor)",
+          successIconColor: "var(--mui-palette-Alert-successIconColor)",
+          warningIconColor: "var(--mui-palette-Alert-warningIconColor)",
+        },
+        AppBar: {
+          defaultBg: "var(--mui-palette-AppBar-defaultBg)",
+        },
+        Avatar: {
+          defaultBg: "var(--mui-palette-Avatar-defaultBg)",
+        },
+        Button: {
+          inheritContainedBg: "var(--mui-palette-Button-inheritContainedBg)",
+          inheritContainedHoverBg:
+            "var(--mui-palette-Button-inheritContainedHoverBg)",
+        },
+        Chip: {
+          defaultBorder: "var(--mui-palette-Chip-defaultBorder)",
+          defaultAvatarColor: "var(--mui-palette-Chip-defaultAvatarColor)",
+          defaultIconColor: "var(--mui-palette-Chip-defaultIconColor)",
+        },
+        FilledInput: {
+          bg: "var(--mui-palette-FilledInput-bg)",
+          hoverBg: "var(--mui-palette-FilledInput-hoverBg)",
+          disabledBg: "var(--mui-palette-FilledInput-disabledBg)",
+        },
+        LinearProgress: {
+          primaryBg: "var(--mui-palette-LinearProgress-primaryBg)",
+          secondaryBg: "var(--mui-palette-LinearProgress-secondaryBg)",
+          errorBg: "var(--mui-palette-LinearProgress-errorBg)",
+          infoBg: "var(--mui-palette-LinearProgress-infoBg)",
+          successBg: "var(--mui-palette-LinearProgress-successBg)",
+          warningBg: "var(--mui-palette-LinearProgress-warningBg)",
+        },
+        Skeleton: {
+          bg: "var(--mui-palette-Skeleton-bg)",
+        },
+        Slider: {
+          primaryTrack: "var(--mui-palette-Slider-primaryTrack)",
+          secondaryTrack: "var(--mui-palette-Slider-secondaryTrack)",
+          errorTrack: "var(--mui-palette-Slider-errorTrack)",
+          infoTrack: "var(--mui-palette-Slider-infoTrack)",
+          successTrack: "var(--mui-palette-Slider-successTrack)",
+          warningTrack: "var(--mui-palette-Slider-warningTrack)",
+        },
+        SnackbarContent: {
+          bg: "var(--mui-palette-SnackbarContent-bg)",
+          color: "var(--mui-palette-SnackbarContent-color)",
+        },
+        SpeedDialAction: {
+          fabHoverBg: "var(--mui-palette-SpeedDialAction-fabHoverBg)",
+        },
+        StepConnector: {
+          border: "var(--mui-palette-StepConnector-border)",
+        },
+        StepContent: {
+          border: "var(--mui-palette-StepContent-border)",
+        },
+        Switch: {
+          defaultColor: "var(--mui-palette-Switch-defaultColor)",
+          defaultDisabledColor:
+            "var(--mui-palette-Switch-defaultDisabledColor)",
+          primaryDisabledColor:
+            "var(--mui-palette-Switch-primaryDisabledColor)",
+          secondaryDisabledColor:
+            "var(--mui-palette-Switch-secondaryDisabledColor)",
+          errorDisabledColor: "var(--mui-palette-Switch-errorDisabledColor)",
+          infoDisabledColor: "var(--mui-palette-Switch-infoDisabledColor)",
+          successDisabledColor:
+            "var(--mui-palette-Switch-successDisabledColor)",
+          warningDisabledColor:
+            "var(--mui-palette-Switch-warningDisabledColor)",
+        },
+        TableCell: {
+          border: "var(--mui-palette-TableCell-border)",
+        },
+        Tooltip: {
+          bg: "var(--mui-palette-Tooltip-bg)",
+        },
+      },
+      borderRadius: {
+        sm: "calc(var(--mui-shape-borderRadius) / 2)",
+        DEFAULT: "var(--mui-shape-borderRadius)",
+        lg: "calc(var(--mui-shape-borderRadius) * 2)",
+      },
+      boxShadow: {
+        1: "var(--mui-shadows-1)",
+        2: "var(--mui-shadows-2)",
+        3: "var(--mui-shadows-3)",
+        4: "var(--mui-shadows-4)",
+        5: "var(--mui-shadows-5)",
+        6: "var(--mui-shadows-6)",
+        7: "var(--mui-shadows-7)",
+        8: "var(--mui-shadows-8)",
+        9: "var(--mui-shadows-9)",
+        10: "var(--mui-shadows-10)",
+        11: "var(--mui-shadows-11)",
+        12: "var(--mui-shadows-12)",
+        13: "var(--mui-shadows-13)",
+        14: "var(--mui-shadows-14)",
+        15: "var(--mui-shadows-15)",
+        16: "var(--mui-shadows-16)",
+        17: "var(--mui-shadows-17)",
+        18: "var(--mui-shadows-18)",
+        19: "var(--mui-shadows-19)",
+        20: "var(--mui-shadows-20)",
+        21: "var(--mui-shadows-21)",
+        22: "var(--mui-shadows-22)",
+        23: "var(--mui-shadows-23)",
+        24: "var(--mui-shadows-24)",
+      },
+      opacity: {
+        activated: "var(--mui-palette-action-activatedOpacity)",
+        disabled: "var(--mui-palette-action-disabledOpacity)",
+        focus: "var(--mui-palette-action-focusOpacity)",
+        hover: "var(--mui-palette-action-hoverOpacity)",
+        selected: "var(--mui-palette-action-selectedOpacity)",
+      },
+    },
+  },
+  plugins: [
+    plugin(function ({ addBase, addUtilities }) {
+      addBase({
+        h1: { font: "var(--mui-font-h1)", letterSpacing: "-0.01562em" },
+        h2: { font: "var(--mui-font-h2)", letterSpacing: "-0.00833em" },
+        h3: { font: "var(--mui-font-h3)" },
+        h4: { font: "var(--mui-font-h4)", letterSpacing: "0.00735em" },
+        h5: { font: "var(--mui-font-h5)" },
+        h6: { font: "var(--mui-font-h6)", letterSpacing: "0.0075em" },
+        p: { font: "var(--mui-font-body1)", letterSpacing: "0.00938em" },
+        span: { font: "var(--mui-font-body2)", letterSpacing: "0.01071em" },
+      });
+      addUtilities({
+        ".typography-h1": { font: "var(--mui-font-h1)" },
+        ".typography-h2": { font: "var(--mui-font-h2)" },
+        ".typography-h3": { font: "var(--mui-font-h3)" },
+        ".typography-h4": { font: "var(--mui-font-h4)" },
+        ".typography-h5": { font: "var(--mui-font-h5)" },
+        ".typography-h6": { font: "var(--mui-font-h6)" },
+        ".typography-subtitle1": { font: "var(--mui-font-subtitle1)" },
+        ".typography-subtitle2": { font: "var(--mui-font-subtitle2)" },
+        ".typography-body1": { font: "var(--mui-font-body1)" },
+        ".typography-body2": { font: "var(--mui-font-body2)" },
+        ".typography-button": { font: "var(--mui-font-button)" },
+        ".typography-caption": { font: "var(--mui-font-caption)" },
+        ".typography-overline": { font: "var(--mui-font-overline)" },
+        ".overlay-1": { backgroundImage: "var(--mui-overlays-1)" },
+        ".overlay-2": { backgroundImage: "var(--mui-overlays-2)" },
+        ".overlay-3": { backgroundImage: "var(--mui-overlays-3)" },
+        ".overlay-4": { backgroundImage: "var(--mui-overlays-4)" },
+        ".overlay-5": { backgroundImage: "var(--mui-overlays-5)" },
+        ".overlay-6": { backgroundImage: "var(--mui-overlays-6)" },
+        ".overlay-7": { backgroundImage: "var(--mui-overlays-7)" },
+        ".overlay-8": { backgroundImage: "var(--mui-overlays-8)" },
+        ".overlay-9": { backgroundImage: "var(--mui-overlays-9)" },
+        ".overlay-10": { backgroundImage: "var(--mui-overlays-10)" },
+        ".overlay-11": { backgroundImage: "var(--mui-overlays-11)" },
+        ".overlay-12": { backgroundImage: "var(--mui-overlays-12)" },
+        ".overlay-13": { backgroundImage: "var(--mui-overlays-13)" },
+        ".overlay-14": { backgroundImage: "var(--mui-overlays-14)" },
+        ".overlay-15": { backgroundImage: "var(--mui-overlays-15)" },
+        ".overlay-16": { backgroundImage: "var(--mui-overlays-16)" },
+        ".overlay-17": { backgroundImage: "var(--mui-overlays-17)" },
+        ".overlay-18": { backgroundImage: "var(--mui-overlays-18)" },
+        ".overlay-19": { backgroundImage: "var(--mui-overlays-19)" },
+        ".overlay-20": { backgroundImage: "var(--mui-overlays-20)" },
+        ".overlay-21": { backgroundImage: "var(--mui-overlays-21)" },
+        ".overlay-22": { backgroundImage: "var(--mui-overlays-22)" },
+        ".overlay-23": { backgroundImage: "var(--mui-overlays-23)" },
+        ".overlay-24": { backgroundImage: "var(--mui-overlays-24)" },
+        ".elevation-1": {
+          backgroundImage: "var(--mui-overlays-1)",
+          boxShadow: "var(--mui-shadows-1)",
+        },
+        ".elevation-2": {
+          backgroundImage: "var(--mui-overlays-2)",
+          boxShadow: "var(--mui-shadows-2)",
+        },
+        ".elevation-3": {
+          backgroundImage: "var(--mui-overlays-3)",
+          boxShadow: "var(--mui-shadows-3)",
+        },
+        ".elevation-4": {
+          backgroundImage: "var(--mui-overlays-4)",
+          boxShadow: "var(--mui-shadows-4)",
+        },
+        ".elevation-5": {
+          backgroundImage: "var(--mui-overlays-5)",
+          boxShadow: "var(--mui-shadows-5)",
+        },
+        ".elevation-6": {
+          backgroundImage: "var(--mui-overlays-6)",
+          boxShadow: "var(--mui-shadows-6)",
+        },
+        ".elevation-7": {
+          backgroundImage: "var(--mui-overlays-7)",
+          boxShadow: "var(--mui-shadows-7)",
+        },
+        ".elevation-8": {
+          backgroundImage: "var(--mui-overlays-8)",
+          boxShadow: "var(--mui-shadows-8)",
+        },
+        ".elevation-9": {
+          backgroundImage: "var(--mui-overlays-9)",
+          boxShadow: "var(--mui-shadows-9)",
+        },
+        ".elevation-10": {
+          backgroundImage: "var(--mui-overlays-10)",
+          boxShadow: "var(--mui-shadows-10)",
+        },
+        ".elevation-11": {
+          backgroundImage: "var(--mui-overlays-11)",
+          boxShadow: "var(--mui-shadows-11)",
+        },
+        ".elevation-12": {
+          backgroundImage: "var(--mui-overlays-12)",
+          boxShadow: "var(--mui-shadows-12)",
+        },
+        ".elevation-13": {
+          backgroundImage: "var(--mui-overlays-13)",
+          boxShadow: "var(--mui-shadows-13)",
+        },
+        ".elevation-14": {
+          backgroundImage: "var(--mui-overlays-14)",
+          boxShadow: "var(--mui-shadows-14)",
+        },
+        ".elevation-15": {
+          backgroundImage: "var(--mui-overlays-15)",
+          boxShadow: "var(--mui-shadows-15)",
+        },
+        ".elevation-16": {
+          backgroundImage: "var(--mui-overlays-16)",
+          boxShadow: "var(--mui-shadows-16)",
+        },
+        ".elevation-17": {
+          backgroundImage: "var(--mui-overlays-17)",
+          boxShadow: "var(--mui-shadows-17)",
+        },
+        ".elevation-18": {
+          backgroundImage: "var(--mui-overlays-18)",
+          boxShadow: "var(--mui-shadows-18)",
+        },
+        ".elevation-19": {
+          backgroundImage: "var(--mui-overlays-19)",
+          boxShadow: "var(--mui-shadows-19)",
+        },
+        ".elevation-20": {
+          backgroundImage: "var(--mui-overlays-20)",
+          boxShadow: "var(--mui-shadows-20)",
+        },
+        ".elevation-21": {
+          backgroundImage: "var(--mui-overlays-21)",
+          boxShadow: "var(--mui-shadows-21)",
+        },
+        ".elevation-22": {
+          backgroundImage: "var(--mui-overlays-22)",
+          boxShadow: "var(--mui-shadows-22)",
+        },
+        ".elevation-23": {
+          backgroundImage: "var(--mui-overlays-23)",
+          boxShadow: "var(--mui-shadows-23)",
+        },
+        ".elevation-24": {
+          backgroundImage: "var(--mui-overlays-24)",
+          boxShadow: "var(--mui-shadows-24)",
+        },
+      });
+    }),
+  ],
+};
diff --git a/docs/tailwind-css.mdx b/docs/tailwind-css.mdx
new file mode 100644
index 00000000..0abd3d6c
--- /dev/null
+++ b/docs/tailwind-css.mdx
@@ -0,0 +1,492 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Tailwind Preset" />
+
+# Tailwind CSS Preset
+
+This preset maps Material UI theme to Tailwind CSS configuration so you can use Material UI theme as utility classes.
+
+This page assumes that you have [installed Material UI](https://mui.com/material-ui/getting-started/installation/) and enable [CSS theme variables feature](https://mui.com/material-ui/customization/css-theme-variables/usage/).
+
+## Installation
+
+First, clone the preset to your project by open the root terminal and run:
+
+```bash
+npx mui-treasury@latest clone tailwind-preset
+```
+
+Then, open `tailwind.config.js` and add the preset to the `presets` array:
+
+```js
+// tailwind.config.js
+module.exports = {
+  // ...other configs
+  presets: [
+    require("./src/mui-treasury/tailwind-preset/material-ui-tailwind-preset"),
+  ],
+};
+```
+
+That's it! Now you can use Material UI theme variables in your Tailwind CSS utility classes.
+
+This also works if you have a custom theme because the mapping is done through CSS variables reference, so the values from your custom theme are still applied.
+
+However, if you have added new tokens, you will need to update the `material-ui-tailwind-preset.js` to include those tokens if you want to use theme in Tailwind classes.
+
+## Playground
+
+Try it out from the [Tailwind CSS playground](https://play.tailwindcss.com/jXXwSAYrCu)
+
+## Usage
+
+```jsx
+<div className="bg-primary text-primary-contrastText p-2 rounded-sm" />
+```
+
+### Colors
+
+export const Preview = () => {
+  const previewItems = [
+    // Colors
+    { class: "bg-primary", properties: "Background color: Primary" },
+    { class: "bg-primary-light", properties: "Background color: Primary Light" },
+    { class: "bg-primary-dark", properties: "Background color: Primary Dark" },
+    { class: "text-primary-contrastText", properties: "Text color: Primary Contrast" },
+    { class: "bg-secondary", properties: "Background color: Secondary" },
+    { class: "bg-secondary-light", properties: "Background color: Secondary Light" },
+    { class: "bg-secondary-dark", properties: "Background color: Secondary Dark" },
+    { class: "text-secondary-contrastText", properties: "Text color: Secondary Contrast" },
+    { class: "bg-info", properties: "Background color: Info" },
+    { class: "bg-info-light", properties: "Background color: Info Light" },
+    { class: "bg-info-dark", properties: "Background color: Info Dark" },
+    { class: "text-info-contrastText", properties: "Text color: Info Contrast" },
+    { class: "bg-error", properties: "Background color: Error" },
+    { class: "bg-error-light", properties: "Background color: Error Light" },
+    { class: "bg-error-dark", properties: "Background color: Error Dark" },
+    { class: "text-error-contrastText", properties: "Text color: Error Contrast" },
+    { class: "bg-success", properties: "Background color: Success" },
+    { class: "bg-success-light", properties: "Background color: Success Light" },
+    { class: "bg-success-dark", properties: "Background color: Success Dark" },
+    { class: "text-success-contrastText", properties: "Text color: Success Contrast" },
+    { class: "bg-warning", properties: "Background color: Warning" },
+    { class: "bg-warning-light", properties: "Background color: Warning Light" },
+    { class: "bg-warning-dark", properties: "Background color: Warning Dark" },
+    { class: "text-warning-contrastText", properties: "Text color: Warning Contrast" },
+    { class: "text-text-primary", properties: "Text color: Primary" },
+    { class: "text-text-secondary", properties: "Text color: Secondary" },
+    { class: "text-text-disabled", properties: "Text color: Disabled" },
+    { class: "bg-common-background", properties: "Background color: Common Background" },
+    { class: "text-common-onBackground", properties: "Text color: Common On Background" },
+    // Gray shades
+    { class: "bg-gray-50", properties: "Background color: Gray 50" },
+    { class: "bg-gray-100", properties: "Background color: Gray 100" },
+    { class: "bg-gray-200", properties: "Background color: Gray 200" },
+    { class: "bg-gray-300", properties: "Background color: Gray 300" },
+    { class: "bg-gray-400", properties: "Background color: Gray 400" },
+    { class: "bg-gray-500", properties: "Background color: Gray 500" },
+    { class: "bg-gray-600", properties: "Background color: Gray 600" },
+    { class: "bg-gray-700", properties: "Background color: Gray 700" },
+    { class: "bg-gray-800", properties: "Background color: Gray 800" },
+    { class: "bg-gray-900", properties: "Background color: Gray 900" },
+    { class: "bg-gray-A100", properties: "Background color: Gray A100" },
+    { class: "bg-gray-A200", properties: "Background color: Gray A200" },
+    { class: "bg-gray-A400", properties: "Background color: Gray A400" },
+    { class: "bg-gray-A700", properties: "Background color: Gray A700" },
+    // Other colors
+    { class: "bg-divider", properties: "Background color: Divider" },
+    { class: "bg-background-default", properties: "Background color: Default" },
+    { class: "bg-background-paper", properties: "Background color: Paper" },
+    { class: "bg-action-active", properties: "Background color: Action Active" },
+    { class: "bg-action-hover", properties: "Background color: Action Hover" },
+    { class: "bg-action-selected", properties: "Background color: Action Selected" },
+    { class: "bg-action-disabled", properties: "Background color: Action Disabled" },
+    { class: "bg-action-focus", properties: "Background color: Action Focus" },
+    // Alert colors
+    { class: "text-Alert-errorColor", properties: "Text color: Alert Error" },
+    { class: "text-Alert-infoColor", properties: "Text color: Alert Info" },
+    { class: "text-Alert-successColor", properties: "Text color: Alert Success" },
+    { class: "text-Alert-warningColor", properties: "Text color: Alert Warning" },
+    { class: "bg-Alert-errorFilledBg", properties: "Background color: Alert Error Filled" },
+    { class: "bg-Alert-infoFilledBg", properties: "Background color: Alert Info Filled" },
+    { class: "bg-Alert-successFilledBg", properties: "Background color: Alert Success Filled" },
+    { class: "bg-Alert-warningFilledBg", properties: "Background color: Alert Warning Filled" },
+    { class: "text-Alert-errorFilledColor", properties: "Text color: Alert Error Filled" },
+    { class: "text-Alert-infoFilledColor", properties: "Text color: Alert Info Filled" },
+    { class: "text-Alert-successFilledColor", properties: "Text color: Alert Success Filled" },
+    { class: "text-Alert-warningFilledColor", properties: "Text color: Alert Warning Filled" },
+    { class: "bg-Alert-errorStandardBg", properties: "Background color: Alert Error Standard" },
+    { class: "bg-Alert-infoStandardBg", properties: "Background color: Alert Info Standard" },
+    { class: "bg-Alert-successStandardBg", properties: "Background color: Alert Success Standard" },
+    { class: "bg-Alert-warningStandardBg", properties: "Background color: Alert Warning Standard" },
+    { class: "text-Alert-errorIconColor", properties: "Text color: Alert Error Icon" },
+    { class: "text-Alert-infoIconColor", properties: "Text color: Alert Info Icon" },
+    { class: "text-Alert-successIconColor", properties: "Text color: Alert Success Icon" },
+    { class: "text-Alert-warningIconColor", properties: "Text color: Alert Warning Icon" },
+    // Other component-specific colors
+    { class: "bg-AppBar-defaultBg", properties: "Background color: AppBar Default" },
+    { class: "bg-Avatar-defaultBg", properties: "Background color: Avatar Default" },
+    { class: "bg-Button-inheritContainedBg", properties: "Background color: Button Inherit Contained" },
+    { class: "bg-Button-inheritContainedHoverBg", properties: "Background color: Button Inherit Contained Hover" },
+    { class: "border-Chip-defaultBorder", properties: "Border color: Chip Default" },
+    { class: "text-Chip-defaultAvatarColor", properties: "Text color: Chip Default Avatar" },
+    { class: "text-Chip-defaultIconColor", properties: "Text color: Chip Default Icon" },
+    { class: "bg-FilledInput-bg", properties: "Background color: Filled Input" },
+    { class: "bg-FilledInput-hoverBg", properties: "Background color: Filled Input Hover" },
+    { class: "bg-FilledInput-disabledBg", properties: "Background color: Filled Input Disabled" },
+    { class: "bg-LinearProgress-primaryBg", properties: "Background color: Linear Progress Primary" },
+    { class: "bg-LinearProgress-secondaryBg", properties: "Background color: Linear Progress Secondary" },
+    { class: "bg-LinearProgress-errorBg", properties: "Background color: Linear Progress Error" },
+    { class: "bg-LinearProgress-infoBg", properties: "Background color: Linear Progress Info" },
+    { class: "bg-LinearProgress-successBg", properties: "Background color: Linear Progress Success" },
+    { class: "bg-LinearProgress-warningBg", properties: "Background color: Linear Progress Warning" },
+    { class: "bg-Skeleton-bg", properties: "Background color: Skeleton" },
+    { class: "bg-Slider-primaryTrack", properties: "Background color: Slider Primary Track" },
+    { class: "bg-Slider-secondaryTrack", properties: "Background color: Slider Secondary Track" },
+    { class: "bg-Slider-errorTrack", properties: "Background color: Slider Error Track" },
+    { class: "bg-Slider-infoTrack", properties: "Background color: Slider Info Track" },
+    { class: "bg-Slider-successTrack", properties: "Background color: Slider Success Track" },
+    { class: "bg-Slider-warningTrack", properties: "Background color: Slider Warning Track" },
+    { class: "bg-SnackbarContent-bg", properties: "Background color: Snackbar Content" },
+    { class: "text-SnackbarContent-color", properties: "Text color: Snackbar Content" },
+    { class: "bg-SpeedDialAction-fabHoverBg", properties: "Background color: Speed Dial Action FAB Hover" },
+    { class: "border-StepConnector-border", properties: "Border color: Step Connector" },
+    { class: "border-StepContent-border", properties: "Border color: Step Content" },
+    { class: "bg-Switch-defaultColor", properties: "Background color: Switch Default" },
+    { class: "bg-Switch-defaultDisabledColor", properties: "Background color: Switch Default Disabled" },
+    { class: "bg-Switch-primaryDisabledColor", properties: "Background color: Switch Primary Disabled" },
+    { class: "bg-Switch-secondaryDisabledColor", properties: "Background color: Switch Secondary Disabled" },
+    { class: "bg-Switch-errorDisabledColor", properties: "Background color: Switch Error Disabled" },
+    { class: "bg-Switch-infoDisabledColor", properties: "Background color: Switch Info Disabled" },
+    { class: "bg-Switch-successDisabledColor", properties: "Background color: Switch Success Disabled" },
+    { class: "bg-Switch-warningDisabledColor", properties: "Background color: Switch Warning Disabled" },
+    { class: "border-TableCell-border", properties: "Border color: Table Cell" },
+    { class: "bg-Tooltip-bg", properties: "Background color: Tooltip" },
+  ];
+
+return (
+
+<table className="w-full">
+  <thead>
+    <tr>
+      <th className="text-left p-2">Preview</th>
+      <th className="text-left p-2">Class</th>
+      <th className="text-left p-2">Properties</th>
+    </tr>
+  </thead>
+  <tbody>
+    {previewItems.map((item, index) => (
+      <tr key={index}>
+        <td className="p-2">
+          {item.class.startsWith("text-") ||
+          item.class.startsWith("border-") ? (
+            <div className="w-16 h-6 bg-gray-400 flex items-center justify-center">
+              <div className={`${item.class}`}>Aa</div>
+            </div>
+          ) : (
+            <div className={`w-16 h-6 ${item.class}`}></div>
+          )}
+        </td>
+        <td className="p-2">
+          <code>{item.class}</code>
+        </td>
+        <td className="p-2">{item.properties}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+); };
+
+<Preview />
+
+### Typography
+
+export const TypographyPreview = () => {
+  const typographyItems = [
+    { class: "font-h1", properties: "Heading 1 font style" },
+    { class: "font-h2", properties: "Heading 2 font style" },
+    { class: "font-h3", properties: "Heading 3 font style" },
+    { class: "font-h4", properties: "Heading 4 font style" },
+    { class: "font-h5", properties: "Heading 5 font style" },
+    { class: "font-h6", properties: "Heading 6 font style" },
+    { class: "font-subtitle1", properties: "Subtitle 1 font style" },
+    { class: "font-subtitle2", properties: "Subtitle 2 font style" },
+    { class: "font-body1", properties: "Body 1 font style" },
+    { class: "font-body2", properties: "Body 2 font style" },
+    { class: "font-button", properties: "Button font style" },
+    { class: "font-caption", properties: "Caption font style" },
+    { class: "font-overline", properties: "Overline font style" },
+  ];
+
+return (
+
+<table className="w-full">
+  <thead>
+    <tr>
+      <th className="text-left p-2">Preview</th>
+      <th className="text-left p-2">Class</th>
+      <th className="text-left p-2">Properties</th>
+    </tr>
+  </thead>
+  <tbody>
+    {typographyItems.map((item, index) => (
+      <tr key={index}>
+        <td className={`${item.class}`}>Text</td>
+        <td className="p-2">
+          <code>{item.class}</code>
+        </td>
+        <td className="p-2">{item.properties}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+); };
+
+<TypographyPreview />
+
+### Border Radius
+
+export const BorderRadiusPreview = () => {
+  const borderRadiusItems = [
+    { class: "rounded-sm", properties: "Small border radius" },
+    { class: "rounded", properties: "Default border radius" },
+    { class: "rounded-lg", properties: "Large border radius" },
+  ];
+
+return (
+
+<table className="w-full">
+  <thead>
+    <tr>
+      <th className="text-left p-2">Preview</th>
+      <th className="text-left p-2">Class</th>
+      <th className="text-left p-2">Properties</th>
+    </tr>
+  </thead>
+  <tbody>
+    {borderRadiusItems.map((item, index) => (
+      <tr key={index}>
+        <td className="p-2">
+          <div
+            className={`w-16 h-6 border border-text-primary ${item.class}`}
+          ></div>
+        </td>
+        <td className="p-2">
+          <code>{item.class}</code>
+        </td>
+        <td className="p-2">{item.properties}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+); };
+
+<BorderRadiusPreview />
+
+### Shadow
+
+export const ShadowPreview = () => {
+  const shadowItems = [
+    { class: "shadow-1", properties: "Shadow 1" },
+    { class: "shadow-2", properties: "Shadow 2" },
+    { class: "shadow-3", properties: "Shadow 3" },
+    { class: "shadow-4", properties: "Shadow 4" },
+    { class: "shadow-5", properties: "Shadow 5" },
+    { class: "shadow-6", properties: "Shadow 6" },
+    { class: "shadow-7", properties: "Shadow 7" },
+    { class: "shadow-8", properties: "Shadow 8" },
+    { class: "shadow-9", properties: "Shadow 9" },
+    { class: "shadow-10", properties: "Shadow 10" },
+    { class: "shadow-11", properties: "Shadow 11" },
+    { class: "shadow-12", properties: "Shadow 12" },
+    { class: "shadow-13", properties: "Shadow 13" },
+    { class: "shadow-14", properties: "Shadow 14" },
+    { class: "shadow-15", properties: "Shadow 15" },
+    { class: "shadow-16", properties: "Shadow 16" },
+    { class: "shadow-17", properties: "Shadow 17" },
+    { class: "shadow-18", properties: "Shadow 18" },
+    { class: "shadow-19", properties: "Shadow 19" },
+    { class: "shadow-20", properties: "Shadow 20" },
+    { class: "shadow-21", properties: "Shadow 21" },
+    { class: "shadow-22", properties: "Shadow 22" },
+    { class: "shadow-23", properties: "Shadow 23" },
+    { class: "shadow-24", properties: "Shadow 24" }
+  ];
+
+return (
+
+<table className="w-full">
+  <thead>
+    <tr>
+      <th className="text-left p-2">Preview</th>
+      <th className="text-left p-2">Class</th>
+      <th className="text-left p-2">Properties</th>
+    </tr>
+  </thead>
+  <tbody>
+    {shadowItems.map((item, index) => (
+      <tr key={index}>
+        <td className="p-2 h-16">
+          <div className={`w-16 h-6 bg-background-paper ${item.class}`}></div>
+        </td>
+        <td className="p-2">
+          <code>{item.class}</code>
+        </td>
+        <td className="p-2">{item.properties}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+); };
+
+<ShadowPreview />
+
+### Elevation
+
+The elevation classes produce:
+
+- `box-shadow`: same as light and dark modes which uses `var(--mui-shadows-{index})`
+- `background-image`: for dark mode, uses `var(--mui-overlays-{index})` (Material UI does not produces these variables in light mode)
+
+export const ElevationPreview = () => {
+  const elevationItems = [
+    { class: "elevation-1", properties: "Elevation 1" },
+    { class: "elevation-2", properties: "Elevation 2" },
+    { class: "elevation-3", properties: "Elevation 3" },
+    { class: "elevation-4", properties: "Elevation 4" },
+    { class: "elevation-5", properties: "Elevation 5" },
+    { class: "elevation-6", properties: "Elevation 6" },
+    { class: "elevation-7", properties: "Elevation 7" },
+    { class: "elevation-8", properties: "Elevation 8" },
+    { class: "elevation-9", properties: "Elevation 9" },
+    { class: "elevation-10", properties: "Elevation 10" },
+    { class: "elevation-11", properties: "Elevation 11" },
+    { class: "elevation-12", properties: "Elevation 12" },
+    { class: "elevation-13", properties: "Elevation 13" },
+    { class: "elevation-14", properties: "Elevation 14" },
+    { class: "elevation-15", properties: "Elevation 15" },
+    { class: "elevation-16", properties: "Elevation 16" },
+    { class: "elevation-17", properties: "Elevation 17" },
+    { class: "elevation-18", properties: "Elevation 18" },
+    { class: "elevation-19", properties: "Elevation 19" },
+    { class: "elevation-20", properties: "Elevation 20" },
+    { class: "elevation-21", properties: "Elevation 21" },
+    { class: "elevation-22", properties: "Elevation 22" },
+    { class: "elevation-23", properties: "Elevation 23" },
+    { class: "elevation-24", properties: "Elevation 24" }
+  ];
+
+return (
+
+<table className="w-full">
+  <thead>
+    <tr>
+      <th className="text-left p-2">Light Preview</th>
+      <th className="text-left p-2">Dark Preview</th>
+      <th className="text-left p-2">Class</th>
+      <th className="text-left p-2">Properties</th>
+    </tr>
+  </thead>
+  <tbody>
+    {elevationItems.map((item, index) => (
+      <tr key={index}>
+        <td className="p-2">
+          <div className={`w-16 h-6 bg-common-background ${item.class}`}></div>
+        </td>
+        <td className="p-2" data-dark>
+          <div className={`w-16 h-6 bg-gray-900 ${item.class}`}></div>
+        </td>
+        <td className="p-2">
+          <code>{item.class}</code>
+        </td>
+        <td className="p-2">{item.properties}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+); };
+
+<ElevationPreview />
+
+### Opacity
+
+export const OpacityPreview = () => {
+  const opacityItems = [
+    { class: "opacity-activated", properties: "Activated opacity" },
+    { class: "opacity-disabled", properties: "Disabled opacity" },
+    { class: "opacity-focus", properties: "Focus opacity" },
+    { class: "opacity-hover", properties: "Hover opacity" },
+    { class: "opacity-selected", properties: "Selected opacity" },
+  ];
+
+return (
+
+<table className="w-full">
+  <thead>
+    <tr>
+      <th className="text-left p-2">Preview</th>
+      <th className="text-left p-2">Class</th>
+      <th className="text-left p-2">Properties</th>
+    </tr>
+  </thead>
+  <tbody>
+    {opacityItems.map((item, index) => (
+      <tr key={index}>
+        <td className="p-2">
+          <div className={`w-16 h-6 bg-primary ${item.class}`}></div>
+        </td>
+        <td className="p-2">
+          <code>{item.class}</code>
+        </td>
+        <td className="p-2">{item.properties}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+); };
+
+<OpacityPreview />
+
+### Translucent color
+
+`primary`, `secondary`, `info`, `error`, `success`, and `warning` supports [translucent color](https://tailwindcss.com/docs/background-color#changing-the-opacity) combination with opacity.
+
+export const TranslucentPreview = () => {
+  const translucentItems = [
+    { class: "bg-primary/0", properties: "Primary with 0% opacity" },
+    { class: "bg-primary/5", properties: "Primary with 5% opacity" },
+    { class: "bg-primary/10", properties: "Primary with 10% opacity" },
+    { class: "bg-primary/activated", properties: "Activated opacity" },
+    { class: "bg-primary/disabled", properties: "Disabled opacity" },
+    { class: "bg-primary/focus", properties: "Focus opacity" },
+    { class: "bg-primary/hover", properties: "Hover opacity" },
+    { class: "bg-primary/selected", properties: "Selected opacity" },
+  ];
+
+return (
+
+<table className="w-full">
+  <thead>
+    <tr>
+      <th className="text-left p-2">Preview</th>
+      <th className="text-left p-2">Class</th>
+      <th className="text-left p-2">Properties</th>
+    </tr>
+  </thead>
+  <tbody>
+    {translucentItems.map((item, index) => (
+      <tr key={index}>
+        <td className="p-2">
+          <div className={`w-16 h-6 ${item.class}`}></div>
+        </td>
+        <td className="p-2">
+          <code>{item.class}</code>
+        </td>
+        <td className="p-2">{item.properties}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+); };
+
+<TranslucentPreview />
diff --git a/tailwind.config.js b/tailwind.config.js
index 35b68052..ad2ed3a5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,5 +9,6 @@ export default {
   theme: {
     extend: {},
   },
+  presets: [require("./blocks/tailwind-preset/material-ui-tailwind-preset")],
   plugins: [],
 };