Modern jQuery Tags Input System Styled with TailwindCSS

TailwindCSS Tag Input System is a lightweight jQuery plugin that transforms standard input fields into interactive tag inputs with smooth animations and TailwindCSS styling. 

Features:

• Multiple input methods: Create tags by pressing Enter or typing commas.
• Duplicate prevention: Automatically prevents duplicate tag entries.
• Keyboard navigation: Full keyboard support with backspace deletion.
• Form integration: Maintains standard form submission behavior.
• Responsive design: Works across all screen sizes and devices.
• Customizable styling: Easy to modify tag appearance with TailwindCSS classes.
• Programmatic control: API methods for getting and setting values dynamically.

How to use it:

1. Load the necessary jQuery library and TailwindCSS in your document. For production, we recommend installing TailwindCSS properly using their CLI tool rather than the CDN. The CDN version lacks customization and purge capabilities.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="/path/to/cdn/jquery.min.js"></script>

2. Load the TailwindCSS Tag Input System files in the document.

<link rel="stylesheet" href="path/to/tailwindcss-tag-input.css">
<script src="path/to/tailwindcss-tag-input.js"></script>

3. Add the tag-input class to any standard input fields within your document. You can also pre-fill it with comma-separated values.

<input type="text" 
  class="tag-input" 
  name="languages" 
  value="JavaScript, HTML, CSS" 
  placeholder="Add more languages...">

4. Initialize the TailwindCSS Tag Input System on document ready.

$(document).ready(function() {
  $('.tag-input').each(function() {
    initializeTagInput($(this));
  });
});

5. The jQuery plugin automatically handles key keydown (for Enter and comma), blur (to create a tag when the input loses focus), and click events for tag removal. When a form is submitted, the hidden input associated with the tag system holds a clean, comma-separated string of the tag values.

$('form').on('submit', function() {
  const languageValue = $('input[name="languages"]').val();
  console.log(languageValue); // "JavaScript, HTML, CSS"
});

6. Set & get tag values programmatically.

// Retrieves all tag values as an array.
const tags = $('.tag-input').data('getValues')();
// Returns: ['JavaScript', 'HTML', 'CSS']

// Sets or overwrites the tags programmatically.
$('.tag-input').data('setValues')(['Python', 'Go']);

7. Add custom validation with the addTag function:

function addTag(tagText) {
  // Custom validation rules
  if (tagText.length < 2) {
    console.warn('Tag must be at least 2 characters long');
    return;
  }
  
  if (tagText.length > 20) {
    console.warn('Tag cannot exceed 20 characters');
    return;
  }
  
  // Proceed with normal tag creation
  tagText = tagText.replace(/,/g, '').trim();
  if (!tagText || tags.includes(tagText)) return;
  
  // Continue with tag creation logic...
}

Alternatives:

• Tagify: A more feature-rich tagging library that supports whitelist validation, AJAX loading, and complex templating.
• jQuery Tags Input: A simpler alternative that focuses on basic tagging functionality without modern styling frameworks.
• Select2: A versatile jQuery-based replacement for select boxes that also supports tagging.

Related Resources:

• 10 Best Tags Input Plugins In jQuery & Vanilla JavaScript

FAQs:

Q: How can I customize the appearance of the tags?
A: You can modify the tag styling directly in the addTag function within the core JavaScript file. The tag element is created from a string template, so you can change the TailwindCSS utility classes there to match your design system. For example, changing bg-blue-100 to bg-green-100 will alter the tag's background color.

Q: How do I handle server-side validation of tag inputs?
A: The component outputs comma-separated strings that can be split server-side for individual tag validation. Use standard form validation techniques to process the hidden input field value on form submission.

Q: Is there a maximum limit on the number of tags?
A: The component doesn't enforce a tag limit by default. You can add custom validation in the addTag function to implement maximum tag restrictions based on your application requirements.

Q: How do I customize the tag removal confirmation?
A: The current implementation removes tags immediately on click. Add a confirmation dialog by modifying the remove button click handler to prompt users before calling the removeTag function.

Q: How do I handle very long tag names?
A: Long tags may cause layout issues in narrow containers. Consider adding CSS text truncation or implementing character limits in the addTag function validation logic.

Q: What happens if a user pastes a comma-separated list of words into the input?
A: The current implementation processes tags on Enter or , keydown events. A pasted string would be treated as a single tag until one of those events occurs. To handle this, you could extend the blur event handler to split the pasted value by commas and add each part as a separate tag.

---

This awesome jQuery plugin is developed by iamitpkumar. For more Advanced Usages, please check the demo page or visit the official website.