How to Add Tags Input in Tailwind CSS

In this tutorial, we’ll see how to add tags input using Tailwind CSS.

Basic Tailwind CSS Tags Input

Let’s start with a simple tags input field styled with Tailwind CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Tags Input Example</title>
   <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="flex items-center justify-center mt-20">
    <div class="w-1/2">
      <label for="tags" class="block mb-2 text-sm text-gray-600">Tags</label>
      <input 
        type="text" 
        class="w-full px-4 py-6 text-sm border border-gray-300 rounded outline-none" 
        name="tags" 
        value="Alpine Js, Tailwind CSS, PHP8.0" 
        autofocus
      >
    </div>
  </div>
  <script src="https://unpkg.com/@yaireo/tagify"></script>
  <script src="https://unpkg.com/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
  <script>
    // Initialize Tagify on the input element
    var input = document.querySelector('input[name=tags]');
    new Tagify(input);
  </script>
</body>
</html>

Basic Tailwind CSS Tags Input

saim ansari