diff --git a/components/doc/cascadeselect/floatlabeldoc.js b/components/doc/cascadeselect/floatlabeldoc.js
index b4f0b05abf..a6d3834a3f 100644
--- a/components/doc/cascadeselect/floatlabeldoc.js
+++ b/components/doc/cascadeselect/floatlabeldoc.js
@@ -85,7 +85,7 @@ export function FloatLabelDoc(props) {
     const code = {
         basic: `
 <FloatLabel>
-    <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+    <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries}
         optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
         className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
     <label htmlFor="cs-city">City</label>
@@ -178,7 +178,7 @@ export default function FloatLabelDemo() {
     return (
         <div className="card flex justify-content-center">
             <FloatLabel>
-                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries}
                     optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
                     className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
                 <label htmlFor="cs-city">City</label>
@@ -290,7 +290,7 @@ export default function FloatLabelDemo() {
     return (
         <div className="card flex justify-content-center">
             <FloatLabel>
-                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries} 
+                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries}
                     optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
                     className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
                 <label htmlFor="cs-city">City</label>
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
index c2aa3b5692..09bd2cb1ad 100644
--- a/components/doc/common/apidoc/index.json
+++ b/components/doc/common/apidoc/index.json
@@ -1235,6 +1235,13 @@
                             "type": "FileUploadPassThroughOptions",
                             "description": "Custom passthrough(pt) options for FileUpload."
                         },
+                        {
+                            "name": "floatlabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FloatLabelPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for FloatLabel."
+                        },
                         {
                             "name": "galleria",
                             "optional": true,
diff --git a/components/doc/floatlabel/basicdoc.js b/components/doc/floatlabel/basicdoc.js
index 1386cb1d0a..9f600e1d0e 100644
--- a/components/doc/floatlabel/basicdoc.js
+++ b/components/doc/floatlabel/basicdoc.js
@@ -11,7 +11,7 @@ export function BasicDoc(props) {
         basic: `
 <FloatLabel>
     <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
-    <label for="username">Username</label>
+    <label htmlFor="username">Username</label>
 </FloatLabel>
         `,
         javascript: `
@@ -26,7 +26,7 @@ export default function BasicDemo() {
         <div className="card flex justify-content-center">
             <FloatLabel>
                 <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
-                <label for="username">Username</label>
+                <label htmlFor"username">Username</label>
             </FloatLabel>
         </div>
     )
@@ -44,7 +44,7 @@ export default function BasicDemo() {
         <div className="card flex justify-content-center">
             <FloatLabel>
                 <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
-                <label for="username">Username</label>
+                <label htmlFor="username">Username</label>
             </FloatLabel>
         </div>
     )
diff --git a/components/doc/floatlabel/theming/tailwinddoc.js b/components/doc/floatlabel/theming/tailwinddoc.js
index 92ee79f341..dd7350886a 100644
--- a/components/doc/floatlabel/theming/tailwinddoc.js
+++ b/components/doc/floatlabel/theming/tailwinddoc.js
@@ -1,16 +1,63 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
 import Link from 'next/link';
+import React from 'react';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    floatlabel: {
+        root: {
+            className: classNames(
+                'block relative', // root component style
+                '[&>label]:absolute [&>label]:pointer-events-none [&>label]:left-2 [&>label]:top-1/2 [&>label]:-mt-2 [&>label]:leading-none [&>label]:transition-all [&>label]:ease-in-out', // label style
+                '[&>textarea~label]:top-4', // textarea
+                '[&>input:focus~label]:-top-3 [&>input:focus~label]:text-xs', // input focus
+                '[&>input:autofill~label]:-top-3 [&>input:autofill~label]:text-xs', // input autofill
+                '[&>input.p-filled~label]:-top-3 [&>input.p-filled~label]:text-xs', // input filled
+                '[&>textarea:focus~label]:-top-3 [&>textarea:focus~label]:text-xs', // textarea focus
+                '[&>textarea.p-filled~label]:-top-3 [&>textarea.p-filled~label]:text-xs', // textarea filled
+                '[&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:-top-3 [&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:text-xs', // dropdown focus
+                '[&>input::placeholder]:opacity-0 [&>input::placeholder]:transition-all [&>input::placeholder]:ease-in-out', // placeholder
+                '[&>input::placeholder:focus]:opacity-100 [&>input::placeholder:focus]:transition-all [&>input::placeholder:focus]:ease-in-out' // placeholder focus
+            )
+        }
+    },
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+                <label htmlFor="username">Username</label>
+              </FloatLabel>
+        </div>
+    )
+}
+    `
+    };
 
-export function TailwindDoc() {
     return (
-        <DocSectionText id="tailwind" label="Tailwind">
-            <p>
-                Visit{' '}
-                <Link href="https://github.com/primefaces/primereact-tailwind" target="_blank" rel="noopener noreferrer">
-                    Tailwind Presets
-                </Link>{' '}
-                project for detailed documentation, examples and ready-to-use presets about how to style PrimeReact components with Tailwind CSS.
-            </p>
-        </DocSectionText>
+        <>
+            <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/doc/treeselect/floatlabeldoc.js b/components/doc/treeselect/floatlabeldoc.js
index 432ffdfe60..a25c2fd572 100644
--- a/components/doc/treeselect/floatlabeldoc.js
+++ b/components/doc/treeselect/floatlabeldoc.js
@@ -17,7 +17,7 @@ export function FloatLabelDoc(props) {
     const code = {
         basic: `
 <FloatLabel className="w-full md:w-20rem">
-    <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+    <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes}
         className="w-full"></TreeSelect>
     <label htmlFor="treeselect">TreeSelect</label>
 </FloatLabel>
@@ -31,7 +31,7 @@ import { NodeService } from './service/NodeService';
 export default function FloatLabelDemo() {
     const [nodes, setNodes] = useState(null);
     const [selectedNodeKey, setSelectedNodeKey] = useState(null);
-    
+
     useEffect(() => {
         NodeService.getTreeNodes().then((data) => setNodes(data));
     }, []);
@@ -39,7 +39,7 @@ export default function FloatLabelDemo() {
     return (
         <div className="card flex justify-content-center">
             <FloatLabel className="w-full md:w-20rem">
-                <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+                <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes}
                     className="w-full"></TreeSelect>
                 <label htmlFor="treeselect">TreeSelect</label>
             </FloatLabel>
@@ -57,7 +57,7 @@ import { NodeService } from './service/NodeService';
 export default function FloatLabelDemo() {
     const [nodes, setNodes] = useState<TreeNode[] | null>(null);
     const [selectedNodeKey, setSelectedNodeKey] = useState<string>(null);
-    
+
     useEffect(() => {
         NodeService.getTreeNodes().then((data) => setNodes(data));
     }, []);
@@ -65,7 +65,7 @@ export default function FloatLabelDemo() {
     return (
         <div className="card flex justify-content-center">
             <FloatLabel className="w-full md:w-20rem">
-                <TreeSelect inputId="treeselect" value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)} 
+                <TreeSelect inputId="treeselect" value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)}
                     className="w-full"></TreeSelect>
                 <label htmlFor="treeselect">TreeSelect</label>
             </FloatLabel>
diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
index 1204923e72..6afd46cea2 100644
--- a/components/lib/api/api.d.ts
+++ b/components/lib/api/api.d.ts
@@ -38,6 +38,7 @@ import { DropdownPassThroughOptions } from '../dropdown/dropdown';
 import { EditorPassThroughOptions } from '../editor/editor';
 import { FieldsetPassThroughOptions } from '../fieldset/fieldset';
 import { FileUploadPassThroughOptions } from '../fileupload/fileupload';
+import { FloatLabelPassThroughOptions } from '../floatlabel/floatlabel';
 import { GalleriaPassThroughOptions } from '../galleria/galleria';
 import { ImagePassThroughOptions } from '../image/image';
 import { InplacePassThroughOptions } from '../inplace/inplace';
@@ -428,6 +429,10 @@ export interface PrimeReactPTOptions {
      * Custom passthrough(pt) options for FileUpload.
      */
     fileupload?: FileUploadPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for FloatLabel.
+     */
+    floatlabel?: FloatLabelPassThroughOptions;
     /**
      * Custom passthrough(pt) options for FullCalendar.
      */
diff --git a/components/lib/floatlabel/FloatLabel.d.ts b/components/lib/floatlabel/floatlabel.d.ts
similarity index 100%
rename from components/lib/floatlabel/FloatLabel.d.ts
rename to components/lib/floatlabel/floatlabel.d.ts
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 9dbb1d41e2..c03b1761de 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -891,6 +891,23 @@ const Tailwind = {
         optionGroupIcon: 'ml-auto',
         transition: TRANSITIONS.overlay
     },
+    floatlabel: {
+        root: {
+            className: classNames(
+                'block relative', // root component style
+                '[&>label]:absolute [&>label]:pointer-events-none [&>label]:left-2 [&>label]:top-1/2 [&>label]:-mt-2 [&>label]:leading-none [&>label]:transition-all [&>label]:ease-in-out', // label style
+                '[&>textarea~label]:top-4', // textarea
+                '[&>input:focus~label]:-top-3 [&>input:focus~label]:text-xs', // input focus
+                '[&>input:autofill~label]:-top-3 [&>input:autofill~label]:text-xs', // input autofill
+                '[&>input.p-filled~label]:-top-3 [&>input.p-filled~label]:text-xs', // input filled
+                '[&>textarea:focus~label]:-top-3 [&>textarea:focus~label]:text-xs', // textarea focus
+                '[&>textarea.p-filled~label]:-top-3 [&>textarea.p-filled~label]:text-xs', // textarea filled
+                '[&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:-top-3 [&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:text-xs', // dropdown focus
+                '[&>input::placeholder]:opacity-0 [&>input::placeholder]:transition-all [&>input::placeholder]:ease-in-out', // placeholder
+                '[&>input::placeholder:focus]:opacity-100 [&>input::placeholder:focus]:transition-all [&>input::placeholder:focus]:ease-in-out' // placeholder focus
+            )
+        }
+    },
     iconfield: {
         root: {
             className: classNames('relative')