CSS Controls

Speed up your CSS workflow with buttons & shortcuts for speedy CSS/Tailwind adjustments.

Yum Banner

Buttons

Buttons appear above the current line when a CSS or Tailwind number value is detected.
▲▼ - Increment/decrement the targetted number.
x1 - Cycle between 0.1x, 1x, and 10x step sizes.

Keyboard Shortcuts

The buttons are just a marketing ploy... the shortcuts are where the real magic happens ♡

Shortcut	Command
`Cmd+Up`	Increment number
`Cmd+Down`	Decrement number
`Cmd+Shift+Up`	Increase step size
`Cmd+Shift+Down`	Decrease step size
`Cmd+Right`	Jump to next value within current line
`Cmd+Left`	Jump to previous value within current line

Note about conflicts: You can always reassign the shortcuts to your liking or disable them altogether. The shortcuts only activate when the extension activates. i.e. you are editing a CSS, SCSS, Less, HTML, JSX, or TSX file and your cursor is positioned on a line that contains a valid CSS or Tailwind number value. This way they minimize conflicts with existing shortcuts..

Supported File Types

CSS
SCSS
Less
HTML (with Tailwind classes)
JSX/TSX (with Tailwind classes)

Requirements

VS Code or Cursor.

Feedback

Feel free to reach out with any questions, feedback, or suggestions.

Authors

Made with ❤️ by Rio Edwards