Skip to main content

Editing Styles

Vivid lets you quickly find, edit, and iterate on components in your browser.

Code Pane​

You can hold down ⌘ (Windows/Linux:Ctrl) while hovering over elements to inspect elements on the page. You can select any element by clicking it while pressing ⌘ (Windows/Linux:Ctrl). You'll see the element's source code and a code pane where you can edit this code to modify the original source file!

You can move between components and reach hidden components with the arrow keys: "upward" to a parent component with ↑, "downward" to a child component with ↓, and between adjacent sibling components with ← and →.

Permissions​

Before seeing the code pane, you'll be prompted to give file system permissions.

In the permissions pop-up, select your project's tailwind.config.js directory (the project's root directory).

Code Pane Not Showing?
Make sure you select the root directory of your project when prompted for permissions. If the code pane doesn't show up, you probably selected the wrong directory. Just click the Vivid logo in the bottom left to unselect the directory and try again!

Command Palette​

If you want to edit styling even faster, you can use the command palette with ⌘K (Windows/Linux:Ctrl). Typing a class in the command palette will preview that Tailwind class on the selected component. Scrolling through the suggested classes on the command palette will also preview those classes.

Hitting Enter will add the currently previewed class to the selected component. If the class you are trying to add conflicts with an existing class, Vivid will replace the old class with your new input.

To remove a class, type "r" in the command palette. The palette will display all currently applied classes that you can choose to remove.