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>
    tag input
    saim ansari
    saim ansari

    I'm Saim Ansari, a full-stack developer with 4+ years of hands-on experience who thrives on building web applications that leave a lasting impression. When it comes to tech, I'm particularly adept at Laravel, React, Tailwind CSS, and the Tall Stack