Kabiirk
commented
1 month ago Hi @drfarrell ,
I can try to work on this , but for my clarity , are you looking to implement something similar to a language server (like IntelliSense) or a create a database of all possible tailwind classes based on tailwind's config files and then filter through it via autocomplete logic ?
An example implementation could be like this :
// Sample dataset of Tailwind CSS classes (should include more classes or be fetched dynamically)
const tailwindClasses = [
'w-1/2', 'w-1/4', 'h-10', 'h-20', 'text-gray-800', 'bg-blue-500',
'hover:bg-blue-700', 'sm:text-lg', 'md:text-xl', 'rounded-full',
'flex', 'justify-center', 'items-center', 'space-x-4'
];
// HTML elements
const input = document.getElementById('tailwind-input');
const autocompleteList = document.getElementById('autocomplete-list');
let currentFocus = -1;
// Event listener for input field
input.addEventListener('input', function() {
const query = this.value;
closeSuggestions();
if (!query) return;
const suggestions = tailwindClasses.filter(item => item.startsWith(query));
suggestions.forEach((suggestion, index) => {
const div = document.createElement('div');
div.classList.add('autocomplete-item');
div.innerText = suggestion;
// Add click listener
div.addEventListener('click', () => {
input.value = suggestion;
closeSuggestions();
});
autocompleteList.appendChild(div);
});
});
// More logic for navigating via keyboard Up & Down etc.
// ...
// ...
Kitenite
Ashutoshdas-dev
Add in an auto-complete feature for the tailwind inputs, allowing a user to start typing and then be able to arrow up-and-down.
Kind of like this, from Sebastiano