diff --git a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js
index 5be05e72fa43d3..7a3ccd8c3543f4 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js
+++ b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js
@@ -1,7 +1,9 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { Select } from '@mui/base/Select';
 import { Option as BaseOption } from '@mui/base/Option';
 import { useTheme } from '@mui/system';
+import clsx from 'clsx';
 
 const getOptionColorClasses = ({ selected, highlighted, disabled }) => {
   let classes = '';
@@ -48,18 +50,8 @@ export default function UnstyledSelectBasic() {
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <Select
+      <CustomSelect
         slotProps={{
-          root: ({ focusVisible, open }) => ({
-            className: `text-sm box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow shadow-slate-200 dark:shadow-slate-900 ${
-              focusVisible ? 'border-purple-400 shadow-outline-purple' : ''
-            } ${
-              open ? 'after:content-["▴"]' : 'after:content-["▾"]'
-            } after:float-right`,
-          }),
-          listbox: {
-            className: `text-sm p-1.5 my-3 w-80 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 shadow shadow-slate-200 dark:shadow-slate-900`,
-          },
           popper: { className: `${isDarkMode ? 'dark' : ''} z-10` },
         }}
         defaultValue={10}
@@ -67,7 +59,219 @@ export default function UnstyledSelectBasic() {
         <Option value={10}>Ten</Option>
         <Option value={20}>Twenty</Option>
         <Option value={30}>Thirty</Option>
-      </Select>
+      </CustomSelect>
     </div>
   );
 }
+
+const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn);
+
+const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
+  return (
+    <Select
+      ref={ref}
+      className={clsx('CustomSelect', props.className)}
+      slotProps={{
+        ...props.slotProps,
+        root: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.root,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              `text-sm box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow shadow-slate-200 dark:shadow-slate-900 ${
+                ownerState.focusVisible
+                  ? 'border-purple-400 shadow-outline-purple'
+                  : ''
+              } ${
+                ownerState.open ? 'after:content-["▴"]' : 'after:content-["▾"]'
+              } after:float-right`,
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+        listbox: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.listbox,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              `text-sm font-sans p-1.5 my-3 w-80 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 shadow shadow-slate-200 dark:shadow-slate-900`,
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+        popper: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.popper,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(resolvedSlotProps?.className),
+          };
+        },
+      }}
+      {...props}
+    />
+  );
+});
+
+CustomSelect.propTypes = {
+  className: PropTypes.string,
+  /**
+   * The props used for each slot inside the Input.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    popper: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.shape({
+        anchorEl: PropTypes.oneOfType([
+          function (props, propName) {
+            if (props[propName] == null) {
+              return new Error(
+                "Prop '" + propName + "' is required but wasn't specified",
+              );
+            } else if (
+              typeof props[propName] !== 'object' ||
+              props[propName].nodeType !== 1
+            ) {
+              return new Error(
+                "Expected prop '" + propName + "' to be of type Element",
+              );
+            }
+          },
+          PropTypes.func,
+          PropTypes.shape({
+            contextElement: function (props, propName) {
+              if (props[propName] == null) {
+                return null;
+              } else if (
+                typeof props[propName] !== 'object' ||
+                props[propName].nodeType !== 1
+              ) {
+                return new Error(
+                  "Expected prop '" + propName + "' to be of type Element",
+                );
+              }
+            },
+            getBoundingClientRect: PropTypes.func.isRequired,
+          }),
+        ]),
+        children: PropTypes.oneOfType([
+          PropTypes.element,
+          PropTypes.func,
+          PropTypes.number,
+          PropTypes.shape({
+            '__@iterator@62': PropTypes.func.isRequired,
+          }),
+          PropTypes.string,
+          PropTypes.bool,
+        ]),
+        container: PropTypes.oneOfType([
+          function (props, propName) {
+            if (props[propName] == null) {
+              return new Error(
+                "Prop '" + propName + "' is required but wasn't specified",
+              );
+            } else if (
+              typeof props[propName] !== 'object' ||
+              props[propName].nodeType !== 1
+            ) {
+              return new Error(
+                "Expected prop '" + propName + "' to be of type Element",
+              );
+            }
+          },
+          PropTypes.func,
+        ]),
+        direction: PropTypes.oneOf(['ltr', 'rtl']),
+        disablePortal: PropTypes.bool,
+        keepMounted: PropTypes.bool,
+        modifiers: PropTypes.arrayOf(
+          PropTypes.shape({
+            data: PropTypes.object,
+            effect: PropTypes.func,
+            enabled: PropTypes.bool,
+            fn: PropTypes.func,
+            name: PropTypes.any,
+            options: PropTypes.object,
+            phase: PropTypes.oneOf([
+              'afterMain',
+              'afterRead',
+              'afterWrite',
+              'beforeMain',
+              'beforeRead',
+              'beforeWrite',
+              'main',
+              'read',
+              'write',
+            ]),
+            requires: PropTypes.arrayOf(PropTypes.string),
+            requiresIfExists: PropTypes.arrayOf(PropTypes.string),
+          }),
+        ),
+        open: PropTypes.bool,
+        placement: PropTypes.oneOf([
+          'auto-end',
+          'auto-start',
+          'auto',
+          'bottom-end',
+          'bottom-start',
+          'bottom',
+          'left-end',
+          'left-start',
+          'left',
+          'right-end',
+          'right-start',
+          'right',
+          'top-end',
+          'top-start',
+          'top',
+        ]),
+        popperOptions: PropTypes.shape({
+          modifiers: PropTypes.array,
+          onFirstUpdate: PropTypes.func,
+          placement: PropTypes.oneOf([
+            'auto-end',
+            'auto-start',
+            'auto',
+            'bottom-end',
+            'bottom-start',
+            'bottom',
+            'left-end',
+            'left-start',
+            'left',
+            'right-end',
+            'right-start',
+            'right',
+            'top-end',
+            'top-start',
+            'top',
+          ]),
+          strategy: PropTypes.oneOf(['absolute', 'fixed']),
+        }),
+        popperRef: PropTypes.oneOfType([
+          PropTypes.func,
+          PropTypes.shape({
+            current: PropTypes.object,
+          }),
+        ]),
+        slotProps: PropTypes.shape({
+          root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+        }),
+        slots: PropTypes.shape({
+          root: PropTypes.elementType,
+        }),
+        transition: PropTypes.bool,
+      }),
+    ]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+};
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx
index 532adca58f2c12..6b5e1558575ec8 100644
--- a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { Select } from '@mui/base/Select';
+import { Select, SelectProps } from '@mui/base/Select';
 import {
   Option as BaseOption,
   OptionProps,
   OptionOwnerState,
 } from '@mui/base/Option';
 import { useTheme } from '@mui/system';
+import clsx from 'clsx';
 
 const getOptionColorClasses = ({
   selected,
@@ -56,18 +57,8 @@ export default function UnstyledSelectBasic() {
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <Select
+      <CustomSelect
         slotProps={{
-          root: ({ focusVisible, open }) => ({
-            className: `text-sm box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow shadow-slate-200 dark:shadow-slate-900 ${
-              focusVisible ? 'border-purple-400 shadow-outline-purple' : ''
-            } ${
-              open ? 'after:content-["▴"]' : 'after:content-["▾"]'
-            } after:float-right`,
-          }),
-          listbox: {
-            className: `text-sm p-1.5 my-3 w-80 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 shadow shadow-slate-200 dark:shadow-slate-900`,
-          },
           popper: { className: `${isDarkMode ? 'dark' : ''} z-10` },
         }}
         defaultValue={10}
@@ -75,7 +66,68 @@ export default function UnstyledSelectBasic() {
         <Option value={10}>Ten</Option>
         <Option value={20}>Twenty</Option>
         <Option value={30}>Thirty</Option>
-      </Select>
+      </CustomSelect>
     </div>
   );
 }
+
+const resolveSlotProps = (fn: any, args: any) =>
+  typeof fn === 'function' ? fn(args) : fn;
+
+const CustomSelect = React.forwardRef(function CustomSelect<
+  TValue extends {},
+  Multiple extends boolean,
+>(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
+  return (
+    <Select
+      ref={ref}
+      className={clsx('CustomSelect', props.className)}
+      slotProps={{
+        ...props.slotProps,
+        root: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.root,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              `text-sm box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow shadow-slate-200 dark:shadow-slate-900 ${
+                ownerState.focusVisible
+                  ? 'border-purple-400 shadow-outline-purple'
+                  : ''
+              } ${
+                ownerState.open ? 'after:content-["▴"]' : 'after:content-["▾"]'
+              } after:float-right`,
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+        listbox: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.listbox,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              `text-sm font-sans p-1.5 my-3 w-80 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 shadow shadow-slate-200 dark:shadow-slate-900`,
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+        popper: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.popper,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(resolvedSlotProps?.className),
+          };
+        },
+      }}
+      {...props}
+    />
+  );
+});
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx.preview b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx.preview
new file mode 100644
index 00000000000000..b466956d01a23a
--- /dev/null
+++ b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx.preview
@@ -0,0 +1,10 @@
+<CustomSelect
+  slotProps={{
+    popper: { className: `${isDarkMode ? 'dark' : ''} z-10` },
+  }}
+  defaultValue={10}
+>
+  <Option value={10}>Ten</Option>
+  <Option value={20}>Twenty</Option>
+  <Option value={30}>Thirty</Option>
+</CustomSelect>
\ No newline at end of file
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js
index 7dfb8ea24048c4..c85a1bacb30954 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/css/index.js
@@ -100,7 +100,8 @@ function Styles() {
         border: 1px solid ${isDarkMode ? grey[700] : grey[200]};
         color: ${isDarkMode ? grey[300] : grey[900]};
         position: relative;
-        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[900] : cyan[100]};
+        box-shadow: 0px 2px 24px ${isDarkMode ? cyan[800] : cyan[100]};
+
 
 
         transition-property: all;
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.js b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.js
index d64131c95656c1..509bd3560825bd 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.js
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.js
@@ -4,6 +4,7 @@ import { Select } from '@mui/base/Select';
 import { Option as BaseOption } from '@mui/base/Option';
 import { useTheme } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
+import clsx from 'clsx';
 
 const getOptionColorClasses = ({ selected, highlighted, disabled }) => {
   let classes = '';
@@ -65,25 +66,227 @@ export default function UnstyledSelectIntroduction() {
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <Select
-        slots={{ root: Button }}
+      <CustomSelect
         slotProps={{
-          root: ({ focusVisible }) => ({
-            className: `relative text-sm box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow shadow-slate-200 dark:shadow-slate-900 ${
-              focusVisible ? 'border-purple-400 shadow-outline-purple' : ''
-            } [&>svg]:text-base	[&>svg]:absolute [&>svg]:h-full [&>svg]:top-0 [&>svg]:right-2.5`,
-          }),
-          listbox: {
-            className: `text-sm p-1.5 my-3 w-80 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 shadow shadow-slate-200 dark:shadow-slate-900`,
-          },
-          popper: { className: `${isDarkMode ? 'dark' : ''} z-10` },
+          popper: { className: `${isDarkMode ? '' : ''} z-20` },
         }}
         defaultValue={10}
       >
         <Option value={10}>Documentation</Option>
         <Option value={20}>Components</Option>
         <Option value={30}>Features</Option>
-      </Select>
+      </CustomSelect>
     </div>
   );
 }
+
+const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn);
+
+const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
+  return (
+    <Select
+      ref={ref}
+      className={clsx('CustomSelect', props.className)}
+      slots={{ root: Button }}
+      slotProps={{
+        ...props.slotProps,
+        root: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.root,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              `relative text-sm font-sans box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow-md shadow-slate-100 dark:shadow-slate-900 ${
+                ownerState.focusVisible
+                  ? 'border-purple-400 shadow-outline-purple'
+                  : ''
+              } [&>svg]:text-base	[&>svg]:absolute [&>svg]:h-full [&>svg]:top-0 [&>svg]:right-2.5`,
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+        listbox: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.listbox,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              `text-sm font-sans p-1.5 my-3 w-80 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 shadow shadow-slate-200 dark:shadow-slate-900`,
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+        popper: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.popper,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(resolvedSlotProps?.className),
+          };
+        },
+      }}
+      {...props}
+    />
+  );
+});
+
+CustomSelect.propTypes = {
+  className: PropTypes.string,
+  /**
+   * The props used for each slot inside the Input.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    popper: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.shape({
+        anchorEl: PropTypes.oneOfType([
+          function (props, propName) {
+            if (props[propName] == null) {
+              return new Error(
+                "Prop '" + propName + "' is required but wasn't specified",
+              );
+            } else if (
+              typeof props[propName] !== 'object' ||
+              props[propName].nodeType !== 1
+            ) {
+              return new Error(
+                "Expected prop '" + propName + "' to be of type Element",
+              );
+            }
+          },
+          PropTypes.func,
+          PropTypes.shape({
+            contextElement: function (props, propName) {
+              if (props[propName] == null) {
+                return null;
+              } else if (
+                typeof props[propName] !== 'object' ||
+                props[propName].nodeType !== 1
+              ) {
+                return new Error(
+                  "Expected prop '" + propName + "' to be of type Element",
+                );
+              }
+            },
+            getBoundingClientRect: PropTypes.func.isRequired,
+          }),
+        ]),
+        children: PropTypes.oneOfType([
+          PropTypes.element,
+          PropTypes.func,
+          PropTypes.number,
+          PropTypes.shape({
+            '__@iterator@62': PropTypes.func.isRequired,
+          }),
+          PropTypes.string,
+          PropTypes.bool,
+        ]),
+        container: PropTypes.oneOfType([
+          function (props, propName) {
+            if (props[propName] == null) {
+              return new Error(
+                "Prop '" + propName + "' is required but wasn't specified",
+              );
+            } else if (
+              typeof props[propName] !== 'object' ||
+              props[propName].nodeType !== 1
+            ) {
+              return new Error(
+                "Expected prop '" + propName + "' to be of type Element",
+              );
+            }
+          },
+          PropTypes.func,
+        ]),
+        direction: PropTypes.oneOf(['ltr', 'rtl']),
+        disablePortal: PropTypes.bool,
+        keepMounted: PropTypes.bool,
+        modifiers: PropTypes.arrayOf(
+          PropTypes.shape({
+            data: PropTypes.object,
+            effect: PropTypes.func,
+            enabled: PropTypes.bool,
+            fn: PropTypes.func,
+            name: PropTypes.any,
+            options: PropTypes.object,
+            phase: PropTypes.oneOf([
+              'afterMain',
+              'afterRead',
+              'afterWrite',
+              'beforeMain',
+              'beforeRead',
+              'beforeWrite',
+              'main',
+              'read',
+              'write',
+            ]),
+            requires: PropTypes.arrayOf(PropTypes.string),
+            requiresIfExists: PropTypes.arrayOf(PropTypes.string),
+          }),
+        ),
+        open: PropTypes.bool,
+        placement: PropTypes.oneOf([
+          'auto-end',
+          'auto-start',
+          'auto',
+          'bottom-end',
+          'bottom-start',
+          'bottom',
+          'left-end',
+          'left-start',
+          'left',
+          'right-end',
+          'right-start',
+          'right',
+          'top-end',
+          'top-start',
+          'top',
+        ]),
+        popperOptions: PropTypes.shape({
+          modifiers: PropTypes.array,
+          onFirstUpdate: PropTypes.func,
+          placement: PropTypes.oneOf([
+            'auto-end',
+            'auto-start',
+            'auto',
+            'bottom-end',
+            'bottom-start',
+            'bottom',
+            'left-end',
+            'left-start',
+            'left',
+            'right-end',
+            'right-start',
+            'right',
+            'top-end',
+            'top-start',
+            'top',
+          ]),
+          strategy: PropTypes.oneOf(['absolute', 'fixed']),
+        }),
+        popperRef: PropTypes.oneOfType([
+          PropTypes.func,
+          PropTypes.shape({
+            current: PropTypes.object,
+          }),
+        ]),
+        slotProps: PropTypes.shape({
+          root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+        }),
+        slots: PropTypes.shape({
+          root: PropTypes.elementType,
+        }),
+        transition: PropTypes.bool,
+      }),
+    ]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+};
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx
index 6cba531dbc4c61..4f076d33402c87 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Select, SelectRootSlotProps } from '@mui/base/Select';
+import { Select, SelectRootSlotProps, SelectProps } from '@mui/base/Select';
 import {
   Option as BaseOption,
   OptionProps,
@@ -7,6 +7,7 @@ import {
 } from '@mui/base/Option';
 import { useTheme } from '@mui/system';
 import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
+import clsx from 'clsx';
 
 const getOptionColorClasses = ({
   selected,
@@ -73,25 +74,76 @@ export default function UnstyledSelectIntroduction() {
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <Select
-        slots={{ root: Button }}
+      <CustomSelect
         slotProps={{
-          root: ({ focusVisible }) => ({
-            className: `relative text-sm box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow-md shadow-slate-100 dark:shadow-slate-900 ${
-              focusVisible ? 'border-purple-400 shadow-outline-purple' : ''
-            } [&>svg]:text-base	[&>svg]:absolute [&>svg]:h-full [&>svg]:top-0 [&>svg]:right-2.5`,
-          }),
-          listbox: {
-            className: `text-sm p-1.5 my-3 w-80 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 shadow shadow-slate-200 dark:shadow-slate-900`,
-          },
-          popper: { className: `${isDarkMode ? 'dark' : ''} z-10` },
+          popper: { className: `${isDarkMode ? '' : ''} z-20` },
         }}
         defaultValue={10}
       >
         <Option value={10}>Documentation</Option>
         <Option value={20}>Components</Option>
         <Option value={30}>Features</Option>
-      </Select>
+      </CustomSelect>
     </div>
   );
 }
+
+const resolveSlotProps = (fn: any, args: any) =>
+  typeof fn === 'function' ? fn(args) : fn;
+
+const CustomSelect = React.forwardRef(function CustomSelect<
+  TValue extends {},
+  Multiple extends boolean,
+>(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
+  return (
+    <Select
+      ref={ref}
+      className={clsx('CustomSelect', props.className)}
+      slots={{ root: Button }}
+      slotProps={{
+        ...props.slotProps,
+        root: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.root,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              `relative text-sm font-sans box-border w-80 px-3 py-2 rounded-lg text-left bg-white dark:bg-slate-800 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 transition-all hover:bg-slate-50 dark:hover:bg-slate-700 outline-0 shadow-md shadow-slate-100 dark:shadow-slate-900 ${
+                ownerState.focusVisible
+                  ? 'border-purple-400 shadow-outline-purple'
+                  : ''
+              } [&>svg]:text-base	[&>svg]:absolute [&>svg]:h-full [&>svg]:top-0 [&>svg]:right-2.5`,
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+        listbox: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.listbox,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(
+              `text-sm font-sans p-1.5 my-3 w-80 rounded-xl overflow-auto outline-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-300 shadow shadow-slate-200 dark:shadow-slate-900`,
+              resolvedSlotProps?.className,
+            ),
+          };
+        },
+        popper: (ownerState) => {
+          const resolvedSlotProps = resolveSlotProps(
+            props.slotProps?.popper,
+            ownerState,
+          );
+          return {
+            ...resolvedSlotProps,
+            className: clsx(resolvedSlotProps?.className),
+          };
+        },
+      }}
+      {...props}
+    />
+  );
+});
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx.preview b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx.preview
new file mode 100644
index 00000000000000..100157ed2a8e65
--- /dev/null
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx.preview
@@ -0,0 +1,10 @@
+<CustomSelect
+  slotProps={{
+    popper: { className: `${isDarkMode ? '' : ''} z-20` },
+  }}
+  defaultValue={10}
+>
+  <Option value={10}>Documentation</Option>
+  <Option value={20}>Components</Option>
+  <Option value={30}>Features</Option>
+</CustomSelect>
\ No newline at end of file