TailwindSearch is a powerful and intuitive VS Code extension that allows developers to quickly search and explore Tailwind CSS classes directly within their editor. Enhance your workflow by effortlessly finding the exact utility classes you need, complete with detailed documentation links. Ideal for
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Tailwind Search is a powerful and intuitive Visual Studio Code extension designed to streamline your Tailwind CSS workflow. It provides a beautiful, native-feeling sidebar to explore classes, alongside high-performance IntelliSense that delivers suggestions directly in your code editor.
Key Features
🔍 Fuzzy Search: Find exactly what you need with an advanced fuzzy search algorithm that handles typos and ranks results by relevance.
🚀 Built-in IntelliSense: Get instant Tailwind class suggestions as you type in HTML, JS, TS, React, Vue, and Svelte files.
📍 Quick Navigation: Use the "Jump to section" dropdown to skip directly to specific categories like Padding, Colors, or Typography.
🗃️ Premium Card UI: Browsing is easier than ever with our modern card-based design, featuring collapsible sections and clear category headers.
🕒 Recently Used: Access your most frequent classes in a dedicated "Recently Used" section for lightning-fast styling.
✨ Direct Actions:
Copy: One-click copy to clipboard.
Insert: Insert the class directly at your cursor position in the active editor.
Official Docs: Access the official Tailwind documentation page for any class instantly.
🎨 Auto-Theme Matching: No setup required! The extension automatically matches your VS Code theme (Dark, Light, or High Contrast) for a seamless experience.
Usage
Using the Sidebar
Click the Tailwind icon in the Activity Bar on the left.
Type in the search box to find utility classes.
Use the Jump to section dropdown to navigate between categories.
Click the + icon to insert a class, or the copy icon to save it to your clipboard.
Click the External Link icon (⇱) in any card header to open official documentation.
Using IntelliSense
Open any supported file type (.html, .js, .jsx, .ts, .tsx, .vue, .svelte).
Start typing class=" or className=".
Type a few characters (e.g., h- or bg-) and suggestions will appear automatically.
View real-time CSS property details for every suggestion in the list.
Recent History
The "Recently Used" section tracks your last 5 used classes.
Click a chip to quickly insert it again.
Clear your history anytime using the Trash Icon in the recent header.
Installation
Open VS Code.
Go to the Extensions view (Ctrl+Shift+X).
Search for "Tailwind Search".
Click Install.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgements
Thanks to the Tailwind CSS team for their incredible utility-first CSS framework.
Built with ❤️ for the Tailwind community.
For any issues or feature requests, please visit our Issues page.
