CSS Insight

CSS Insight is a powerful Visual Studio Code extension that enhances your development workflow by providing a hover feature to display the CSS styles associated with Bootstrap, Tailwind, and custom classes and IDs directly in your HTML files. It also includes a completion provider that suggests CSS classes as you type.

Features

• Hover to View CSS: Hover over any class or ID in your HTML files to see the associated CSS styles.
• CSS Class Suggestions: Get suggestions for Bootstrap, Tailwind, and custom CSS classes as you type.
• Custom CSS Support: Configure the extension to include your custom CSS file for hover and completion features.

Installation

1. Install the extension from the Visual Studio Code Marketplace.
2. Open your HTML file and start using the hover and completion features.

Configuration

Add the following setting in your VS Code settings to include your custom CSS file:

"cssInsight.customCSSPath": "path/to/your/custom.css"

Usage

• Hover to View CSS: Hover over any class or ID in your HTML file to see the associated CSS styles.
• CSS Class Suggestions: Start typing a class name in your HTML file, and the extension will suggest matching CSS classes.

Development

To contribute to the development of this extension:

1. Clone the repository.
2. Run npm install to install the dependencies.
3. Open the project in Visual Studio Code.
4. Press F5 to start debugging the extension.

License

This extension is licensed under the MIT License.

Contact

For any questions or feedback, please contact abdussamadarefi@gmail.com.