Tailwind CSS Color Preview

Most web developers nowadays use Visual Studio Code. In my opinion, Tailwind CSS is the best and most common framework for styling web pages. However, one annoying missing function is that the VS Code tailwind CSS color preview doesn’t work for HSL colors. In this article, I will describe some workarounds.

As you can see in the above screenshot, the background and foreground that are defined in HSL format, which is the default for Tailwind CSS, don’t show a preview of the color.
However, the example defined in hex notation is displayed as it should be. The nice thing more than getting the preview is that you can click the color, and it brings up a color palette, which makes it handy when you want to change the color.

What is HSL Colors

HSL stands for Hue, Saturation, and Lightness.
Hue is a degree on the color wheel from 0 to 360.

Saturation is how intensive the color is. 100% is full color, 0% is completely gray.
Lightness is how much light you want to give to the color. 0% is no light, and 100% is full light.

The nice thing about HSL is that you can select a value between 0 to 360 for the Hue to get the color you want, and then you can build a color palette with variations by just changing the saturation and lightness.

Workarounds for Tailwind CSS color preview

If you want to keep the original Tailwind CSS color configuration as close as possible to what you get when you set up a new project, the best way is to add a comment with HSL color after each row. Then, you will see a color preview, but the drawback is that you will not be able to use the color palette.

Another alternative is to wrap the HSL values in an HSL function directly, but then you also need to update your tailwind config file. The benefit of this is that you both get the preview and have access to the color palette.

Example of globals.css

@layer base {
  :root {
    --background: hsl(100 100% 50%);
    --foreground: hsl(40 100% 80%);

Example of tailwind.config.js

extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",

So, in the globals.css file, we have wrapped the values in an hsl function, and in tailwind.config.js, we have removed the hsl function.

The only potential drawback with this is that you might have to perform some updates when you upgrade your Tailwind version. But that is something you will run into anyway since Tailwind is making some changes regarding the configuration in Tailwind CSS 4.