Using Tailwind IntelliSense within strings

If you're using VS Code and writing your Tailwind classes within a variable, you've probably noticed that Tailwind IntelliSense doesn't work. However, if you're using a consistent naming scheme, you can fix this issue.

Here's an example of how I write Tailwind styles:

const baseStyles = 'flex items-center rounded ...'

const sizeStyles = {
  default: 'py-2 px-4',
  small: 'text-sm py-1.5 px-2.5',
}

const variantStyles = {
  primary: 'font-bold bg-blue-500 hover:bg-blue-600 ...',
  secondary: 'font-semibold bg-blue-50 text-blue-600 ...',
}

I use a consistent naming scheme with the word Styles at the end. In this case, I can go to Tailwind IntelliSense settings and add .*Styles.* to the tailwindCSS.classAttributes array:

// settings.json within VS Code
{
  "tailwindCSS.classAttributes": [
    "class",
    "className",
    "ngClass",
    ".*Styles.*" // Add ".*Styles.*" (or whatever matches your naming scheme)
  ]
}

If you're unfamiliar with Reguar expression (regex for short), here's a quick overview of the special characters I used:

1. The dot (.) is a wildcard character that matches any single character except newline characters. For example, the regex .Styles will match a string that starts with any character (except for a newline), followed by Styles, such as aStyles, bStyles, xStyles, etc.
2. The asterisk (*) is a quantifier that matches zero or more occurrences of the preceding element. It makes the preceding character optional and allows it to appear multiple times. For instance, the regex .*Styles.* matches Styles, aStylesB, someStyles: SomeType, etc.

If your naming convention differs from mine, feel free to adjust the regex accordingly. For example, if your naming starts with the word style, change the selector to style.*. If you want to support multiple naming schemes, add them as separate lines in the tailwindCSS.classAttributes array.

After that, you should be able to enjoy IntelliSense within your variables. This also works with TypeScript and nested objects! 🎉