Tailwind plugin to add floating label, control with float label components

Demo - https://unlight.github.io/tailwind-float-label

1. npm install --save-dev tailwind-float-label
2. Add @import 'tailwind-float-label' to your main css file
3. Configure css variable --float-label-background-color for background of float label
4. Plugin provides classes which must be set for label and input to make label floats.
   • .float-container Container which holds input control and label
   • .float-input Form input control
   • .float-always Use with .float-container to make label always visible (sticky)

<form class="max-w-xs mx-auto p-5 space-y-4"> <div class="float-container"> <label for="fullname" class="float-label px-2 text-gray-600" >Full Name</label > <input type="text" id="fullname" class="float-input w-full px-3 py-2 border border-gray-300" placeholder="Full Name" /> </div> </form>

If you need animation, add to .float-label following classes: transition-all duration-200

• https://github.com/notiz-dev/floating-form-field-tailwindcss

• https://tailwindow.github.io/component-tailwindcss/components/form/input-text/index.html
• https://github.com/you-dont-need/You-Dont-Need-JavaScript#Floating
• https://csslayout.io/floating-label/
• https://tailwindcomponents.com/component/login-form-with-float-label-input

MIT License (c) 2025