diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index deba3c73d8..9726735a73 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -1270,6 +1270,13 @@
                             "type": "InputNumberPassThroughOptions",
                             "description": "Custom passthrough(pt) options for InputNumber."
                         },
+                        {
+                            "name": "inputotp",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputOtpPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for InputOtp."
+                        },
                         {
                             "name": "inputswitch",
                             "optional": true,
@@ -31588,7 +31595,7 @@
                             "name": "input",
                             "optional": true,
                             "readonly": false,
-                            "type": "InputTextPassThroughOptions",
+                            "type": "InputOtpPassThroughType<HTMLAttributes<HTMLInputElement>>",
                             "description": "Uses to pass attributes to the Tooltip component."
                         },
                         {
diff --git a/components/doc/inputotp/theming/tailwinddoc.js b/components/doc/inputotp/theming/tailwinddoc.js
new file mode 100644
index 0000000000..84fc669f2c
--- /dev/null
+++ b/components/doc/inputotp/theming/tailwinddoc.js
@@ -0,0 +1,55 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    inputotp: {
+        root: { className: 'flex items-center gap-2' },
+        input: {
+            root: {
+                className: classNames(
+                    'box-border text-center w-10 h-11 p-3 text-slate-900 border border-gray-300 rounded-lg transition-all duration-200',
+                    'hover:border-cyan-500',
+                    'focus:border-cyan-500 focus:shadow-[0_0_0_0.2rem_#a5f3fc] focus:outline-0 focus:outline-offset-0'
+                )
+            }
+        }
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function BasicDemo() {
+    const [token, setTokens] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)}/>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
index 3929d14b57..1204923e72 100644
--- a/components/lib/api/api.d.ts
+++ b/components/lib/api/api.d.ts
@@ -42,6 +42,7 @@ import { GalleriaPassThroughOptions } from '../galleria/galleria';
 import { ImagePassThroughOptions } from '../image/image';
 import { InplacePassThroughOptions } from '../inplace/inplace';
 import { InputNumberPassThroughOptions } from '../inputnumber/inputnumber';
+import { InputOtpPassThroughOptions } from '../inputotp/inputotp';
 import { InputSwitchPassThroughOptions } from '../inputswitch/inputswitch';
 import { InputTextPassThroughOptions } from '../inputtext/inputtext';
 import { InputTextareaPassThroughOptions } from '../inputtextarea/inputtextarea';
@@ -447,6 +448,10 @@ export interface PrimeReactPTOptions {
      * Custom passthrough(pt) options for InputNumber.
      */
     inputnumber?: InputNumberPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for InputOtp.
+     */
+    inputotp?: InputOtpPassThroughOptions;
     /**
      * Custom passthrough(pt) options for InputSwitch.
      */
diff --git a/components/lib/inputotp/inputotp.d.ts b/components/lib/inputotp/inputotp.d.ts
index 8229844be0..9466a9a12a 100644
--- a/components/lib/inputotp/inputotp.d.ts
+++ b/components/lib/inputotp/inputotp.d.ts
@@ -9,9 +9,7 @@
  */
 import * as React from 'react';
 import { ComponentHooks } from '../componentbase/componentbase';
-import { InputTextPassThroughOptions } from '../inputtext/inputtext';
 import { PassThroughOptions } from '../passthrough';
-import { TooltipPassThroughOptions } from '../tooltip/tooltip';
 import { PassThroughType, TemplateType } from '../utils/utils';
 
 export declare type InputOtpPassThroughType<T> = PassThroughType<T, InputOtpPassThroughMethodOptions>;
@@ -35,9 +33,8 @@ export interface InputOtpPassThroughOptions {
     root?: InputOtpPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the Tooltip component.
-     * @see {@link TooltipPassThroughOptions}
      */
-    input?: InputTextPassThroughOptions;
+    input?: InputOtpPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
     /**
      * Used to manage all lifecycle hooks
      * @see {@link ComponentHooks}
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index bccd4f616c..ece250e1f8 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -891,6 +891,18 @@ const Tailwind = {
     inputmask: {
         root: 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] transition duration-200 ease-in-out appearance-none rounded-md'
     },
+    inputotp: {
+        root: { className: 'flex items-center gap-2' },
+        input: {
+            root: {
+                className: classNames(
+                    'box-border text-center w-10 h-11 p-3 text-slate-900 border border-gray-300 rounded-lg transition-all duration-200',
+                    'hover:border-cyan-500',
+                    'focus:border-cyan-500 focus:shadow-[0_0_0_0.2rem_#a5f3fc] focus:outline-0 focus:outline-offset-0'
+                )
+            }
+        }
+    },
     rating: {
         root: ({ props }) => ({
             className: classNames('relative flex items-center', 'gap-2', {
diff --git a/pages/inputotp/index.js b/pages/inputotp/index.js
index dd0dcda853..95c5c2ff85 100644
--- a/pages/inputotp/index.js
+++ b/pages/inputotp/index.js
@@ -1,14 +1,15 @@
-import { ImportDoc } from '@/components/doc/inputotp/importdoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc';
 import { BasicDoc } from '@/components/doc/inputotp/basicdoc';
-import { MaskDoc } from '@/components/doc/inputotp/maskdoc';
+import { ImportDoc } from '@/components/doc/inputotp/importdoc';
 import { IntegerOnlyDoc } from '@/components/doc/inputotp/integeronlydoc';
-import { TemplateDoc } from '@/components/doc/inputotp/templatedoc';
-import { SampleDoc } from '@/components/doc/inputotp/sampledoc';
-import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc';
+import { MaskDoc } from '@/components/doc/inputotp/maskdoc';
 import { Wireframe } from '@/components/doc/inputotp/pt/wireframe';
+import { SampleDoc } from '@/components/doc/inputotp/sampledoc';
+import { TemplateDoc } from '@/components/doc/inputotp/templatedoc';
 import { StyledDoc } from '@/components/doc/inputotp/theming/styleddoc';
-import DocApiTable from '@/components/doc/common/docapitable';
-import { DocComponent } from '@/components/doc/common/doccomponent';
+import { TailwindDoc } from '@/components/doc/inputotp/theming/tailwinddoc';
 
 const InputOtpDemo = () => {
     const docs = [
@@ -72,6 +73,18 @@ const InputOtpDemo = () => {
             id: 'styled',
             label: 'Styled',
             component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
         }
     ];