DEV Community

Francisco Moretti
Francisco Moretti

Posted on • Originally published at franciscomoretti.com

4

Color Highlighting for Tailwind CSS Variables in VS Code

When working with Tailwind CSS variables in VS Code, having visual color indicators can significantly improve your development workflow. This is particularly useful when working with Shadcn UI components, which heavily rely on CSS variables for theming.

The Solution

  1. Install the Color Highlight extension by Sergii N from the VS Code Marketplace

  2. Enable HSL color highlighting by adding this to your VS Code settings.json:

{
  "color-highlight.matchHslWithNoFunction": true
}
Enter fullscreen mode Exit fullscreen mode

Result

With this setup, you'll see color indicators next to your Tailwind CSS variables, making it easier to identify and work with colors in your stylesheets, especially when customizing Shadcn UI themes:

Color highlighting in VS Code

This simple configuration works with both standard CSS colors and HSL values, making your Tailwind CSS and Shadcn UI development experience more visual and intuitive.

Image of Datadog

Measure and Advance Your DevSecOps Maturity

In this white paper, we lay out a DevSecOps maturity model based on our experience helping thousands of organizations advance their DevSecOps practices. Learn the key competencies and practices across four distinct levels of maturity.

Get The White Paper

Top comments (1)

Collapse
 
tyler36 profile image
tyler36

Great tip! Thank you.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay