Navigate your styles instantly.
Jump directly from any class or id in your HTML, JS, JSX, Vue, or PHP files to its corresponding CSS definition with a simple Ctrl+Click.
Hover over classes/IDs to preview styles, and Pro users get advanced JavaScript navigation and global search.
🎯 Core Navigation
- Instant Jump to Definition: Ctrl/Cmd + Click on any CSS class or ID to jump directly to its definition
- Context Menu: Right-click and select "Go to Style" option (Cmd+Shift+G on macOS)
- Real-time Progress: Status bar showing search progress
- Single File Navigation: Instant jump when class appears once
- Hover Style Previews: Hover over a class/ID (including in
querySelector,getElementById, etc.) to see its full CSS rule in a popup
🛠 Framework Support
| Framework | Example | Status |
|---|---|---|
| React/JSX | className="header" |
✅ |
| Vue.js | :class="'nav'" |
✅ |
| Angular | [class]="'sidebar'" |
✅ |
| HTML/PHP | class="content" |
✅ |
| JavaScript | querySelector('.wrapper') |
✅ (CSS preview on hover) |
📂 Smart Detection
The extension automatically detects CSS in:
- Linked CSS files (
<link href="...">) - CSS imports (
import './style.css') - Inline
<style>tags - Build directories (
dist/,build/)
Note: The payment gateway for Pro features is currently in progress. To get early access to Pro features or receive updates on availability, contact us at augustinedevv@gmail.com. One-time payment with lifetime updates will be available soon!
✅ Available Now
Choose from multiple CSS matches with file paths and line numbers when a class appears in multiple locations.
Ctrl+Click on querySelector, getElementById, classList.add, etc., to choose between:
- HTML element usage (e.g.,
<div class="wrapper">) - CSS style definition
Works in <script> tags or .js files.
Hover over querySelector('.wrapper') to see:
- CSS rules (free tier)
- CSS rules + HTML element usage (Pro tier, up to 3 lines)
Search in Tailwind CSS and Bootstrap files (enable goToStyle.searchInNodeModules in settings).
Search for .classname or #idname via Command Palette (Cmd+Shift+C on macOS) and jump to definitions.
Direct access for bugs and feature requests via StyleSense: Check License Status.
🔜 Coming Soon
- CSS Variable Navigation: Jump to
var(--color)definitions - SCSS/SASS Mixins: Navigate to
@mixindefinitions - Tailwind Docs Integration: Link directly to Tailwind documentation
- Team Workspace Config: Shared settings for teams
- Install from VS Code Marketplace
- Navigate: Ctrl+Click any CSS class or ID to jump to its definition
- Preview: Hover over classes/IDs (including in JS like
querySelector('.wrapper')) to preview CSS rules - Search: Use Command Palette (Cmd+Shift+P) for commands like StyleSense: Search CSS Class or ID
- Pro Access: For Pro features (once available), enter your license key via StyleSense: Enter Pro License Key
Access settings via Cmd+, on macOS or Ctrl+, on Windows/Linux. Search for "Go To Style" to customize behavior.
{
"goToStyle.enabled": true,
"goToStyle.debug": false,
"goToStyle.searchInNodeModules": false,
"goToStyle.additionalSearchPaths": [
"**/dist/**/*.css",
"**/build/**/*.css",
"**/output.css",
"**/styles.css"
],
"goToStyle.maxSearchResults": 100,
"goToStyle.showStatusBarInfo": true,
"goToStyle.frameworkDetection": true
}| Setting | Type | Default | Description |
|---|---|---|---|
goToStyle.enabled |
boolean | true |
Enable or disable all StyleSense features |
goToStyle.debug |
boolean | false |
Show detailed logs in Output panel (StyleSense channel) |
goToStyle.searchInNodeModules |
boolean | false |
[Pro] Search Tailwind/Bootstrap in node_modules |
goToStyle.additionalSearchPaths |
array | see above | Additional glob patterns for CSS file discovery |
goToStyle.maxSearchResults |
number | 100 |
Maximum number of CSS files to search |
goToStyle.showStatusBarInfo |
boolean | true |
Display search progress in status bar |
goToStyle.frameworkDetection |
boolean | true |
Auto-detect React/Vue/Angular syntax |
🛠 Enabling Key Features
Use Cmd+Shift+C or StyleSense: Search CSS Class or ID in Command Palette (Pro-only, available after payment gateway launch). Ensure goToStyle.additionalSearchPaths includes your CSS files (e.g., Tailwind's output.css).
Set goToStyle.searchInNodeModules to true for Pro users to search framework CSS in node_modules (available after payment gateway launch).
Ctrl+Click on querySelector('.wrapper') or getElementById('main') to choose between HTML element or CSS definition (Pro-only, available after payment gateway launch). Works in <script> tags or .js files.
Hover on querySelector('.wrapper') for CSS previews (free) or CSS + HTML previews (Pro, available after payment gateway launch).
| Shortcut | Action |
|---|---|
| Cmd+Shift+C | Open global CSS search (StyleSense: Search CSS Class or ID) |
| Cmd+Shift+G | Go to Style (StyleSense: Go to Style) |
| Cmd+Shift+L | Check license status (StyleSense: Check License Status) |
Tip: Customize keybindings in Preferences: Open Keyboard Shortcuts (JSON).
Tailwind Classes Not Found?
- Ensure
goToStyle.searchInNodeModulesistrue(Pro-only, available after payment gateway launch) - Add your Tailwind output file (e.g.,
output.css) togoToStyle.additionalSearchPaths - Run
npx tailwindcss -i ./src/input.css -o ./src/output.cssto generate CSS - Enable
goToStyle.debugand check Output channel for searched files
JS Navigation or Hover Not Working?
- Ensure the pattern matches (e.g.,
querySelector('.wrapper')orgetElementById('main')) - For
<script>tags in HTML, the extension detects JS context but treats the file as HTML - Enable
goToStyle.debugto log context detection and searched files (e.g., "Searching for class: wrapper (JS Context: true)") - Check if CSS/HTML files are in
goToStyle.additionalSearchPaths
Pro Features Not Working?
- Pro features will be available after the payment gateway is launched. Contact augustinedevv@gmail.com for updates or early access
Disable Unwanted Features
Set goToStyle.enabled to false or adjust specific settings (e.g., goToStyle.showStatusBarInfo to false for status bar).
File issues at GitHub
MIT
- Email: augustinedevv@gmail.com
- Issues: GitHub Issues
- Repository: github.com/raredevv/css-class-navigator
Made with ❤️ by Augustinedevv Team