Tailwind Search

Theme by Dtinth

|

Updated: 13 Jan 2022

|

56 Stars

Having trouble memorizing all the utility classes in Tailwind? Remember the CSS code, but did not remember which is the corresponding Tailwind CSS utility class? Search for it here!

Categories

Overview

If you’ve ever felt overwhelmed by the multitude of utility classes in Tailwind CSS, you’re not alone. @dtinth’s Tailwind CSS Class Search is an innovative solution designed specifically for those who struggle to keep track of all these classes. Whether you’re trying to recall a class name for a specific CSS style or looking for a quick way to find which class corresponds to a piece of CSS code, this web application has you covered.

Built with Vue.js, this handy tool seamlessly parses the Tailwind CSS file and generates a searchable index. With its fast fuzzy-searching capabilities, you can quickly locate the utility class you need, making your development workflow far more efficient.

Features

• Searchable Index: Easily find utility classes by searching for their name or the corresponding CSS code you remember.
• Fast Fuzzy-Searching: The app leverages fuzzysort to provide quick, accurate search results for a smooth user experience.
• No Build System Required: Simply clone the Git repository, open the index.html file in your browser, and start searching—no setup necessary.
• Tailwind Default Build Check: Confirm if a class is part of Tailwind’s default build, perfect for quick prototyping while using CDN.
• Lightweight Deployment: Reduce the size of your CSS file from 1MB to approximately 20KB with purgecss, ensuring your app loads faster.
• VS Code Integration: Explore experimental integration with Visual Studio Code for a more streamlined development experience.
• Lazy Rendering: Result lists are rendered lazily, meaning you only load results on demand, enhancing performance.