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)
  ]
}

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