Displaying color boxes next to the TailwindCSS class names indicating the color, anywhere such as in class or className attributes

Is it possible to display color boxes before any TailwindCSS class name related to colors, regardless of where I write the TailwindCSS class name?

I've noticed that this works perfectly in CSS files or within the HTML class or className attributes (e.g. border-error-400 in second photo).

I would assume this should work across the entire code, but I was disappointed to find that, as shown in the attached screenshot, the color indicator box doesn't appear when a TailwindCSS color class is written as the value of a JS object.

TLDR: Although the first solutions specifically respond to the example in the question, I suggest you consider a much more consistent approach: creating a function to which you always pass only TailwindCSS classes. Then, inform IntelliSense that the function named xy will accept only TailwindCSS classes, so it should handle it accordingly. See more: Solution #3.

Well, I checked my suggestion, and yes; TailwindCSS IntelliSense fully applies all of its features based on the correct regex patterns.

Note: A prerequisite for the proper validation of my answer is the installation of TailwindCSS IntelliSense.

• How to install TailwindCSS IntelliSense - StackOverflow
• About customizing TailwindCSS IntelliSense - StackOverflow

---

Solution #1 for plain JavaScript objects

This gives you the correct answer, although I don't think it's the best way. With regex, we can declare the syntax of JS objects so that it attempts to search for TailwindCSS class names in all strings placed as values, and suggest TailwindCSS class names as hints.

TailwindCSS IntelliSense with this setting:

{
  "tailwindCSS.experimental.classRegex": [
    ":\\s*?[\"'`]([^\"'`]*).*?,",
  ],
}

Note: For open settings press CtrlP and type Preferences: Open User Settings (JSON).

Important: The downside, is that it will be valid for every object. I think this might be a waste of energy and an unnecessary overcomplication of the process.

---

Solution #2 for plain JavaScript variables

Similarly to objects, regex can also be written for variables.

TailwindCSS IntelliSense with this setting:

{
  "tailwindCSS.experimental.classRegex": [
    "(?:const|let|var)\\s+[\\w$_][_\\w\\d]*\\s*=\\s*['\\\"](.*?)['\\\"]",
  ],
}

Note: For open settings press CtrlP and type Preferences: Open User Settings (JSON).

Important: The repeated downside, once again, is that it will be valid for every string. I think this might be a waste of energy and an unnecessary overcomplication of the process.

---

Solution #3 with a special function (recommended)

The advantage of the function is that wherever you want to use a TailwindCSS class, you just need to call it, and it will work immediately, whereas the previous solution will only be available within JS objects.

Instead of relying on regex, I recommend creating a "fake" function that accepts a string as a parameter and simply returns that parameter as the result. This way, you can explicitly tell TailwindCSS IntelliSense that the parameters passed to this function definitely contain TailwindCSS class names, so it will work correctly and consistently anywhere later on.

function tw (input: TemplateStringsArray | string, ...interpolations: any[]): string {
  if (typeof input === "string") {
    return input;
  }

  let result = input[0];
  for (let i = 0; i < interpolations.length; i++) {
    result += interpolations[i] + input[i + 1];
  }
  return result;
}

And the parameters of the tw function will be correctly handled by TailwindCSS IntelliSense with this setting:

{
  "tailwindCSS.classFunctions": [
    "tw",
  ],
}

Note: For open settings press CtrlP and type Preferences: Open User Settings (JSON).

Note: The tw function doesn't need to be overcomplicated. I simply allowed it to accept the three basic types of string inputs. All three invocation styles return a single concatenated string. For example, in example_4, the result would be "bg-red-500 text-green-400".