Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>CSS Variable HoverNew to Visual Studio Code? Get it now.
CSS Variable Hover

CSS Variable Hover

Ahmed Mahran

|
204 installs
| (2) | Free
Shows CSS variable and Tailwind CSS custom classes values on hover
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

logo

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.

readme_img

  • Hover over Tailwind CSS custom classes to see the corresponding CSS variable values.

readme_img

  • Support multiple variables definitions
  • Supports variables defined in media queries

readme_img

  • Automatically watches CSS, SCSS, and Tailwind configuration files for changes with option to refresh variables manually.

readme_img

  • Allows adding additional files to watch for CSS variables.

readme_img

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.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft