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>