Floating Form Labels In Tailwind

Bring a polished, JavaScript-free floating label to your forms using Tailwind's peer utilities.

How it works

Tailwind's peer strategy lets one element (the peer) drive styles on another.

• peer on the input marks the reference point.
• peer-placeholder-shown targets the label when the input is empty.
• peer-focus applies styles while focused.
• peer-not-placeholder-shown keeps the label floated after content is entered.

Live example

The result is a clean floating label interaction without JavaScript.