diff --git a/components/doc/tristatecheckbox/theming/tailwinddoc.js b/components/doc/tristatecheckbox/theming/tailwinddoc.js
index 95a0056c5a..eb8de34d98 100644
--- a/components/doc/tristatecheckbox/theming/tailwinddoc.js
+++ b/components/doc/tristatecheckbox/theming/tailwinddoc.js
@@ -10,7 +10,10 @@ const Tailwind = {
         root: {
             className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
         },
-        checkbox: ({ props }) => ({
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        box: ({ props }) => ({
             className: classNames(
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 rounded-lg transition-colors duration-200',
@@ -23,7 +26,8 @@ const Tailwind = {
                     'cursor-default opacity-60': props.disabled
                 }
             )
-        })
+        }),
+        icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
     }
 }
     `
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 70bcfbbae8..6f30051293 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -1032,7 +1032,10 @@ const Tailwind = {
         root: {
             className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
         },
-        checkbox: ({ props }) => ({
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        box: ({ props }) => ({
             className: classNames(
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 rounded-lg transition-colors duration-200',
@@ -1045,7 +1048,8 @@ const Tailwind = {
                     'cursor-default opacity-60': props.disabled
                 }
             )
-        })
+        }),
+        icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
     },
     checkbox: {
         root: {
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
index 60bde805d0..a977019910 100644
--- a/components/lib/tristatecheckbox/TriStateCheckbox.js
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -144,17 +144,20 @@ export const TriStateCheckbox = React.memo(
             ptm('root')
         );
 
-        const inputProps = mergeProps({
-            id: props.inputId,
-            className: cx('input'),
-            type: 'checkbox',
-            'aria-invalid': props.invalid,
-            disabled: props.disabled,
-            readOnly: props.readOnly,
-            value: props.value,
-            checked: props.value,
-            onChange: onChange
-        });
+        const inputProps = mergeProps(
+            {
+                id: props.inputId,
+                className: cx('input'),
+                type: 'checkbox',
+                'aria-invalid': props.invalid,
+                disabled: props.disabled,
+                readOnly: props.readOnly,
+                value: props.value,
+                checked: props.value,
+                onChange: onChange
+            },
+            ptm('input')
+        );
 
         return (
             <>