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

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%);
  }
}

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.

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.

Hey, I have created a Pull Request to Color Highlight VSCode extension to include WSL without function option and floats support: https://github.com/enyancc/vscode-ext-color-highlight/pull/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 😄

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.

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

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

is there anything similar for intellij?

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

Seems to work sufficiently well for me.

You can use the vscode extension colorInfo and just write in comment the hsl color in comment:

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);

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

./package.json

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

1. 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.

1. 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!

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.