TW Class Finder Extension

This powerful tool seamlessly integrates into your development environment, offering real-time class suggestions and completions for Tailwind CSS, directly within your HTML, JS, JSX, TS, or TSX files. Just type tw: followed by your desired CSS property, and watch as a curated list of corresponding Tailwind classes appears.

Features

• When you want to add a Tailwind class but either forgot the name or value, just type tw:css-property and press space to see a list of suggestions.
• Streamline your workflow by reducing the need to frequently refer to the Tailwind documentation.

Installation

1. Launch Visual Studio Code.
2. Go to the Extensions view by clicking on the square icon in the sidebar or by pressing Ctrl+Shift+X.
3. Search for "twclassfinder" in the Extensions view search box.
4. Click on the Install button.

Usage

1. Open an HTML, JavaScript, or TypeScript React file in Visual Studio Code.
2. Type tw: followed by the name of the CSS property in the editor while you are inside class="" or className="".
3. Press Space to get a list of suggestions.

Contributing

Contributions are welcome! Please fork this repository and create a pull request with your changes. For major modifications, please open an issue first to discuss the changes.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgements

• Thanks to the Visual Studio Code team for providing a powerful extension development platform.
• This extension was inspired by the need to avoid frequent look-ups in the Tailwind documentation.

Contact

For support, feedback, or inquiries, please contact Janko Stanic.