Tailwind CSS Algolia Search

Introduction

In this tutorial, we will integrate Algolia search into a project using Tailwind CSS and Material Tailwind v3. We will use the provided design for the search input and icon.

Algolia Search Demo

⌘ K

Algolia Search Implementation (HTML & JavaScript)

To integrate Algolia Search into a plain HTML and JavaScript project, follow these steps:

1. Include Algolia Search Dependencies

Add the following <link> and <script> tags to your HTML file to include the necessary Algolia Search dependencies:

1
2<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
3<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
4

2. Add the Search Input and Icon

Add the following HTML code to your file where you want the search input to appear:

1
2<div class="group relative">
3<div class="relative h-10 w-full min-w-[200px]">
4<input
5type="email"
6placeholder="Search"
7readonly=""
8class="w-full aria-disabled:cursor-not-allowed outline-none focus:outline-none text-slate-800 dark:text-white placeholder:text-slate-600/60 bg-transparent ring-transparent border border-slate-200 transition-all duration-300 ease-in disabled:opacity-50 disabled:pointer-events-none data-[error=true]:border-red-500 data-[success=true]:border-green-500 text-sm rounded-md py-2 px-2.5 ring shadow-sm data-[icon-placement=start]:ps-9 data-[icon-placement=end]:pe-9 hover:border-slate-800 hover:ring-slate-800/10 focus:border-slate-800 focus:ring-slate-800/10 peer"
9/>
10</div>
11<div class="absolute top-[calc(50%-1px)] right-2.5 -translate-y-2/4">
12<kbd class="rounded border border-slate-100 bg-white px-1 pt-px pb-0 text-xs font-medium text-slate-900 shadow shadow-black/5">
13<span class="mr-0.5 inline-block translate-y-[1.5px] text-base">
14⌘
15</span>
16K
17</kbd>
18</div>
19<div id="docsearch" class="absolute inset-0 w-full opacity-0"></div>
20</div>
21

3. Initialize Algolia Search

Add the following JavaScript code to initialize Algolia Search with your credentials. Make sure to replace YOUR_APP_ID, YOUR_INDEX_NAME, and YOUR_SEARCH_API_KEY with your actual Algolia credentials:

1
2<script>
3docsearch({
4container: "#docsearch",
5appId: "YOUR_APP_ID",
6indexName: "YOUR_INDEX_NAME",
7apiKey: "YOUR_SEARCH_API_KEY",
8});
9</script>
10

By following these steps, you will have successfully integrated Algolia Search into your plain HTML and JavaScript project.