Tailwind GPT - VS Code Extension

Description

Tailwind GPT is a VS Code extension that provides hover-based explanations for Tailwind CSS classes. It leverages the power of OpenAI's GPT-3.5 Turbo model to generate explanations in real-time as you hover over Tailwind CSS classes in your code.

This extension helps developers understand the purpose and effects of different Tailwind CSS classes directly within their development environment, eliminating the need to refer to external documentation or websites. It enhances the developer experience and speeds up the development process by providing contextual information at your fingertips.

Example

Features

• Real-time Explanations: As you hover over a Tailwind CSS class, the extension quickly retrieves and displays an explanation for that class using the GPT-3.5 Turbo model. The explanations provide details on the purpose, usage, and effects of the class.

• Tailwind CSS Support: The extension supports the latest version of Tailwind CSS and is regularly updated to ensure compatibility with new classes and features introduced in Tailwind CSS.

• Customizable Options: Tailwind GPT offers customizable options to adapt the extension to your preferences. You can configure the appearance of the tooltip, adjust the delay for fetching explanations, and customize the key bindings.

Installation

1. Open Visual Studio Code.

2. Go to the Extensions view by clicking on the square icon in the sidebar or pressing Ctrl+Shift+X (Cmd+Shift+X on macOS).

3. Search for "Tailwind GPT" in the Extensions Marketplace.

4. Click on the "Install" button next to the "Tailwind GPT" extension.

5. Once the installation is complete, click on the "Reload" button to activate the extension.

Usage

1. Open a project that uses Tailwind CSS in Visual Studio Code.

2. Hover over a Tailwind CSS class in your code.

3. A panel will appear with the explanation for the hovered classses.

4. Read the explanation to understand the purpose and effects of the classes.

Configuration

Tailwind GPT provides customizable options that you can modify to suit your preferences. To access the extension's configuration, follow these steps:

1. Go to the Extensions view in Visual Studio Code.

2. Click on the gear icon next to the "Tailwind GPT" extension.

3. Click on "Extension Settings" to open the settings file for the extension.

4. Modify the API_KEY.

5. Save the settings file.

Contributions and Bug Reports

If you encounter any issues, have suggestions for improvements, or would like to contribute to the Tailwind GPT extension, please visit the project's GitHub repository: Link to GitHub Repository

Feel free to submit bug reports, feature requests, or pull requests. Your contributions are highly appreciated.

Credits

Tailwind GPT is built by Matan Lasry and is powered by the OpenAI GPT-3.5 Turbo model.

Acknowledgments

We would like to thank OpenAI for providing access to the GPT-3.5 Turbo model, which made this extension possible.

Special thanks to the Tailwind CSS team for creating an amazing utility-first CSS framework that inspired this project.

Contact

If you have any questions, suggestions, or feedback, feel free to reach out to us:

• Email: matan8380@gmail.com