Shadcn Hsl Preview

Live shadcn HSL Color Previews in VS Code

The shadcn HSL Preview extension for Visual Studio Code provides immediate visual feedback for HSL colors written in the shadcn CSS variable syntax. As you define or adjust HSL values in your CSS, SCSS, LESS, PostCSS, JavaScript (JSX/TSX), or TailwindCSS files, a color swatch updates live. This feature streamlines your styling workflow, enabling quicker color decisions and ensuring accuracy directly within your development environment, boosting productivity when working with shadcn's color system.

Features:

• Live HSL Color Preview: Instantly visualizes HSL colors defined using shadcn's CSS variable syntax within your files.
• Automatic Updates: Color previews refresh automatically as you type or modify HSL values.
• Hover Information & Mixer: Displays detailed color information and a color mixer on hover of the HSL value.
• Color Conversion Utilities: Provides tools for converting color values, enhancing utility beyond simple previews.
• CSS Dialect Support: Works seamlessly with CSS, SCSS, LESS, and PostCSS files.
• JavaScript/TypeScript Integration: Supports previewing in JS, JSX, TS, and TSX files.
• TailwindCSS Compatibility: Recognizes and functions within files identified by the Tailwind Language Server.
• Conflict Avoidance: Deliberately excludes HEX color highlighting to prevent conflicts with other common extensions.

Summary:

shadcn HSL Preview is a Visual Studio Code extension tailored for developers using shadcn's HSL color syntax. It offers live color previews directly in the editor for various file types including CSS, JS, and TailwindCSS. Key functionalities include automatic preview updates, detailed color information with a mixer on hover, and conversion utilities, all designed to improve the efficiency and accuracy of your styling process without conflicting with existing HEX preview tools.