https://github.com/unlight/tailwind-float-label

Tailwind plugin to add floating label, control with float label components
https://github.com/unlight/tailwind-float-label

float-label float-label-pattern floating-label tailwind-component tailwind-components tailwind-plugin tailwind-plugins tailwindcss-plugin

Last synced: 15 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/unlight/tailwind-float-label
• Owner: unlight
• License: mit
• Created: 2020-10-10T16:01:32.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2025-10-18T17:45:05.000Z (4 months ago)
• Last Synced: 2025-10-19T09:13:20.155Z (4 months ago)
• Topics: float-label, float-label-pattern, floating-label, tailwind-component, tailwind-components, tailwind-plugin, tailwind-plugins, tailwindcss-plugin
• Language: HTML
• Homepage: https://unlight.github.io/tailwind-float-label
• Size: 1.35 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# tailwind-float-label

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

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

## Setup and configuration

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)

```html

  


    Full Name

    

  


```

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

## Similar Projects

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

## Resources

- 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

## License

[MIT License](https://opensource.org/licenses/MIT) (c) 2025