https://github.com/ahmedd-mahmoud/css-variable-hover
CSS Variable Hover is a Visual Studio Code extension that provides hover information for CSS variables and Tailwind CSS custom classes. It helps you quickly see the values of CSS variables and their sources directly in your code.
https://github.com/ahmedd-mahmoud/css-variable-hover
css css-variables hover tailwindcss vscode vscode-extension
Last synced: 8 months ago
JSON representation
CSS Variable Hover is a Visual Studio Code extension that provides hover information for CSS variables and Tailwind CSS custom classes. It helps you quickly see the values of CSS variables and their sources directly in your code.
- Host: GitHub
- URL: https://github.com/ahmedd-mahmoud/css-variable-hover
- Owner: ahmedd-mahmoud
- License: mit
- Created: 2025-01-18T20:22:45.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-25T19:57:12.000Z (12 months ago)
- Last Synced: 2025-02-25T20:37:10.476Z (12 months ago)
- Topics: css, css-variables, hover, tailwindcss, vscode, vscode-extension
- Language: TypeScript
- Homepage:
- Size: 518 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# CSS Variable Hover
CSS Variable Hover is a Visual Studio Code extension that provides hover information for CSS variables and Tailwind CSS custom classes. It helps you quickly see the values of CSS variables and their sources directly in your code.
## Features
- Supports CSS, SCSS, JavaScript, TypeScript, React, Vue, and HTML files
- Hover over CSS variables to see their values and source files.
- Hover over Tailwind CSS custom classes to see the corresponding CSS variable values.
- Support multiple variables definitions
- Supports variables defined in media queries
- Automatically watches CSS, SCSS, and Tailwind configuration files for changes with option to refresh variables manually.
- Allows adding additional files to watch for CSS variables.
## Extension Settings
This extension contributes the following settings:
- `cssVarHover.enabled`: Enable/disable CSS variable value hover.
- `cssVarHover.watchedFiles`: Additional files to watch for CSS variables.
## Requirements
No additional requirements or dependencies are needed for this extension.