Vue Tailwind Searchable MultiSelect -

📦 Version Update: Now with Built-in Tailwind Styling – No Extra Imports Needed!

A Vue 3 component for a beautiful, searchable, and multi-select dropdown, styled with Tailwind CSS. Easily tag and filter your selections with a responsive UI and minimal setup.

✨ Features

• ✅ Vue 3 compatible
• 🎯 Built-in search filtering
• 🏷️ Displays selected items as tags
• 📦 Minimal dependencies
• 🎨 Tailwind CSS styled (auto-includes styles)
• 🧠 Keyboard & click-outside support

📦 Installation

npm install vue-3-tailwind-searchable-multiselect
🚀 Usage
1. Import the component and CSS

import MultiSelectDropdown from 'vue-3-tailwind-searchable-multiselect';

2. Register the component
js
Copy
Edit
export default {
  components: {
    MultiSelectDropdown
  }
}
3. Use it in your template

<MultiSelectDropdown v-model="selectedItems" 
:drop-down-data="dropDownData" 
placeholder="Choose from the list..." />

📋 Props
Prop	Type	Required	Description
dropDownData	Array	✅ Yes	Array of objects like { id, name, value } to display

📌 Example Data Format
js
Copy
Edit
dropDownData: [
  { id: 1, name: 'JohnDoe', value: 'JohnDoe' },
  { id: 2, name: 'JaneSmith', value: 'JaneSmith' },
  { id: 3, name: 'FooBar', value: 'FooBar' }
]
🎨 Customization
The component is styled using Tailwind CSS. You can:

Override styles using custom classes

Use Tailwind’s utility-first approach to theme components globally

✅ Compatibility
Vue 3

Tailwind CSS v3+ or bundled styles included (no Tailwind setup required)

📜 License
MIT

🙌 Author
Made with ❤️ by Your Name

🌐 NPM
📦 vue-3-tailwind-searchable-multiselect

yaml
Copy
Edit

---