CSS Theming hsl variables -> problem with Tailwind Intellisense VSCode extension

[dBianchii]

I was really looking forward to using the new themes and setting my new color variables

However,
The most important part (for me) is being able to fully take advantage of Tailwind CSS Intelisense plugin to use the colors globally in my project and have the colors being displayed in my inline classNames when I call bg- or text-

I usually preffer setting everything in tailwind.config.cjs and have it all in that file where I can change color hex values as I please

Button.tsx.-.kodix-t3-latest.-.Visual.Studio.Code.2023-04-18.14-38-06.mp4

Maybe this isn't just me, I am curious if other people went through something similar.

[its-monotype]

Is the problem that VSCode does not display color for HSL values? But the name of this color seems to speak for itself, why is it needed?

[shadcn]

@dBianchii I see. I believe this is a limitation of the intellisense plugin. I found tailwindlabs/tailwindcss-intellisense#409

To confirm I tried on play.tailwindcss.com and yeah this does not work either: https://play.tailwindcss.com/PGqCk0dlwn

The way we implemented theming with CSS variables is the recommended way to do it in Tailwind.

[dBianchii]

Is the problem that VSCode does not display color for HSL values? But the name of this color seems to speak for itself, why is it needed?

Seeing the color directly in my html is very important. Most classnames are text. When you see a color in there, it makes it easier to read your code and understand where the colors are being applied. Your eyes don't differenciate easily between different classes just as easily as it differentiates between text classes and colors together.
So I guess that's why I think this is important

[rvanbaalen]

Slightly tagging along on this subject; is there a way, other than hardcoding all HSL colors manually in the config, to create themes?

[its-monotype]

Is the problem that VSCode does not display color for HSL values? But the name of this color seems to speak for itself, why is it needed?

Seeing the color directly in my html is very important. Most classnames are text. When you see a color in there, it makes it easier to read your code and understand where the colors are being applied. Your eyes don't differenciate easily between different classes just as easily as it differentiates between text classes and colors together.
So I guess that's why I think this is important

Oh, I get your point. Indeed, it would be easier to recognize the code at a glance if they were highlighted.

[dBianchii]

Having this bug fixed in tailwind css extension intellisense would be a much more ideal solution.
@shadcn Have you considered having all variables set inside tailwind.config.js instead of having them inside a separate .css file like we have now?

[shadcn]

Slightly tagging along on this subject; is there a way, other than hardcoding all HSL colors manually in the config, to create themes?

@rvanbaalen You can define your colors inline like this:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#05B6D4',
          foreground: '#ffffff',
        },
      },
    },
  },
  plugins: [],
}

@shadcn Have you considered having all variables set inside tailwind.config.js instead of having them inside a separate .css file like we have now?

@dBianchii So the reason we do this is to have dark mode handled automatically for you.

<div class="bg-primary" /> will use handle both light and dark modes reading values from CSS variables. With one class name.

[dBianchii]

@shadcn I see, that makes a lot of sense. Thank you

[mikebuilds]

Weighing in here, personally I prefer the approach shadcn has used in custom variables without blowing out the amount of classes used for dark mode. Kind of feels like what tailwind has been missing to be honest.

[dBianchii]

@MJtH I agree. I've been using the custom themes and it works so well...
I will change the title of this post, as I really am liking this theming option, more than using custom tailwind dark:'' etc throughout the app

If anyone knows a workaround for this Tailwind intellisense, please let me know. I will be continuing to use the custom themes with hsl like this, but I really would also like having the colors show up in the code

[jokull]

I figured out a neat solution. Just add a debug layer that you can comment in/out. Use the PostCSS VSCode extension.

Notice the layer name is debug. It's a copy-paste of the shad variables, but with hsl instead of just the hsl values. This triggers a color tile. Not perfect but made it slightly easier for me to update color variables. It would be amazing to have an online variable builder that translates color values to the HSL values.

@layer debug {
  :root {
    --background: hsl(0 0% 100%);
    --foreground: hsl(222.2 47.4% 11.2%);

    --muted: hsl(227 14% 38%);
    --muted-foreground: hsa(0 0% 91%);

    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(222.2 47.4% 11.2%);

    --card: hsl(0 0% 100%);
    --card-foreground: hsl(222.2 47.4% 11.2%);

    --border: hsl(214.3 31.8% 91.4%);
    --input: hsl(214.3 31.8% 91.4%);

    --primary: hsl(241 100% 10%);
    --primary-foreground: hsl(210 40% 98%);

    --secondary: hsl(210 40% 96.1%);
    --secondary-foreground: hsl(222.2 47.4% 11.2%);

    --accent: hsl(210 40% 96.1%);
    --accent-foreground: hsl(222.2 47.4% 11.2%);

    --destructive: hsl(0 100% 50%);
    --destructive-foreground: hsl(210 40% 98%);

    --ring: hsl(215 20.2% 65.1%);
  }
}

[rajuashok]

I'm running into this too. What's even more frustrating is that shadcn (or maybe it's tailwind) is not respecting hsl(...) or hex syntax. The colors only work if I'm using the x y% z% syntax.

@jokull how are you getting the hsl(...) syntax to work?

[rajuashok]

AH.. nvm sry, just realized that my tailwind config looks like this:

border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        brand: "hsl(var(--brand))",

I changed this to remove the hsl(...) and moved the hsl to the globals.css file. However I'm curious why this was done this way in the first place? Why place the hsl(...) in tailwind config file instead of directly in the css var? Having it directly in the css var means vscode can actually show color previews which is so helpful during dev.

[tushar-singh]

I changed this to remove the hsl(...) and moved the hsl to the globals.css file. However I'm curious why this was done this way in the first place? Why place the hsl(...) in tailwind config file instead of directly in the css var? Having it directly in the css var means vscode can actually show color previews which is so helpful during dev.

It's how tailwind recommends using CSS variables. If you use color function in CSS you won't be able to do opacity modifiers like bg-background/50

https://tailwindcss.com/docs/customizing-colors#using-css-variables

[TheEdoRan]

I found a way to get color previews, it works great (by cloning and modifying the globals.css file) but it's a bit tricky to setup.
So, here's how I managed to do it.

Setup

1. First, create these two scripts and put them in your Next.js project's root folder (you can modify the CSS_ROOT const if your globals.css file is placed somewhere else):

./build-globals-edit-css.js

const { readFileSync, writeFileSync } = require("fs");
const path = require("path");

const CSS_ROOT = "src/app";

const file = readFileSync(path.join(__dirname, CSS_ROOT, "globals.css"), {
  encoding: "utf-8",
});

const fixed = file.replaceAll(
  /(.*--.+:)[ ]*(.+[ ]+.+%[ ]+.+%);/g,
  "$1 hsl($2);"
);

writeFileSync(path.join(__dirname, CSS_ROOT, "globals-edit.css"), fixed);

./fix-tailwind-vars.js

const { readFileSync, writeFileSync } = require("fs");
const path = require("path");

const CSS_ROOT = "src/app";

const file = readFileSync(path.join(__dirname, CSS_ROOT, "globals-edit.css"), {
  encoding: "utf-8",
});

const fixed = file.replaceAll(/(.*--.+:).*hsl\((.+)\);/g, "$1 $2;");

writeFileSync(path.join(__dirname, CSS_ROOT, "globals.css"), fixed);

2. Then, add this entry to your package.json scripts:

./package.json

"tw:fix": "node fix-tailwind-vars"

3. Finally, install the Run on Save extension for VS Code, and create a workspace configuration file for VS Code (.vscode/settings.json in your project's root folder) with this content:

./.vscode/settings.json

{
  "emeraldwalk.runonsave": {
    "commands": [
      {
        // If you have your CSS file somewhere else, you have to specify the
        // correct path here.
        "match": "./src/app/globals-edit.css",
        "cmd": "npm run tw:fix"
      }
    ]
  }
}

Usage

1. Execute the CSS edit file builder script just once, with:

node build-globals-edit-css

This command should have created a file called globals-edit.css in your CSS_ROOT.

2. Now, when you want to update your CSS, edit the globals-edit.css file, which has the hsl() function for every color var defined in globals.css. Don't edit globals.css directly. It is now an autogenerated file, thanks to the Run on Save extension that executes fix-tailwind-vars.js script after every change to the globals-edit.css file.

Enjoy, hopefully!

[jeromeSH26]

Came across this "old" topic, but I found a solution to get the color preview in VSCode, when using HSL color in globals.css together with tailwind.
Using the hsl command in the globals.css file

@layer base {
  :root {
    --secondary: hsl(299, 50%, 50%);
}

but removing this hsl command in the tailwind.config.ts file

const config: Config = {
        secondary: {
          DEFAULT: "var(--secondary)" /** instead of  DEFAULT: "hsl(var(--secondary))"*/,
...

no the best solution but it works and save time when searching the relevant color for our website.

[LucasMatuszewski]

Hey, I have created a Pull Request to Color Highlight VSCode extension to include WSL without function option and floats support:
enyancc/vscode-ext-color-highlight#200

It already supports RGB without function (disabled by default) so if you are using RGB like --primary: 200 200 200; it will work for you right now.

Here is how it looks for me:

Hopefully, @enyancc will accept my PR soon and publish a new version of the extension.

In the meantime, here is a link to download the packaged VSIX file (the extension as a file):
https://we.tl/t-VHTnVChsMR

To install it you can just go to "Extensions" sidebar, click the three dots menu icon (up-right corner of extensions), and select Install from VSIX... or with CLI: code --install-extension myextension.vsix

After installation, you have to enable hslWithoutFunction / rgbWithoutFunction options in settings. You can also set a list of languages / files this setting will work for (or exclude languages). And I prefer the "dot after" option instead of the full background color.

I may also create a forked new Extension dedicated to Tailwind (with only the minimum options we need) for better performance (the current plugin runs on every VSCode window and parses every text for any type of color definition, but I didn't notice any issues, all works fine with it enabled).

Please let me know if you would like that dedicated extension, and what are the most important/minimal features?

I've also tried to add this feature to the Color Info plugin, my RegEx worked fine but I couldn't debug it. But a minimalistic square with color is enough for me. If somebody would like to help with Color Info I can create a WIP PR (I was probably very close to make it work, but didn't have time to solve it).

BTW. It doesn't support highlighting custom class names in your code, sorry... It would be much more complicated ;)
But it will add color anywhere you have 000.00 000% 000% or 000, 000.00%, 000% in your code, including floats (or you can change extension settings to make it work only in CSS files, which will be better for performance).

So... No more unnecessary comments in your CSS files :D

[rustyx]

FWIW VSCode extension meouwu.css-var-color-decorator can decorate space-separated HSL color variables.

Seems to work sufficiently well for me.

[ajayvignesh01]

is there anything similar for intellij?

[turkgenciyim]

FWIW VSCode extension meouwu.css-var-color-decorator can decorate space-separated HSL color variables.

This is what I was looking for, thank you very much!

[lukasver]

FWIW VSCode extension meouwu.css-var-color-decorator can decorate space-separated HSL color variables.

This works perfectly fine and seems like the solution to the original issue. Thanks for sharing! 🚀

[famgz]

FWIW VSCode extension meouwu.css-var-color-decorator can decorate space-separated HSL color variables.

That's it! Thanks for sharing

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[rashmod]

FWIW VSCode extension meouwu.css-var-color-decorator can decorate space-separated HSL color variables.

This works perfectly fine and seems like the solution to the original issue. Thanks for sharing! 🚀

how does this solve the original issue? I tried it out and it still does not highlight the color when putting in the class names instead I have to go to the index.css file to see the highlight

[ndungtse]

FWIW VSCode extension meouwu.css-var-color-decorator can decorate space-separated HSL color variables.

This works perfectly fine and seems like the solution to the original issue. Thanks for sharing! 🚀

how does this solve the original issue? I tried it out and it still does not highlight the color when putting in the class names instead I have to go to the index.css file to see the highlight

Yes of course it doesn't @rashmod , just because this issue can only be resolved by tailwindcss intellisence if they can handle css variables colors in html's css classes. All above workarounds are for at least highlighting the in css. file

[rashmod]

Yes, I understand. Since we're using CSS variables for theming, it's unlikely that Tailwind CSS IntelliSense can detect which theme color to show as highlight.