Skip to main content

Using Tailwind IntelliSense within strings

Get more productive with Tailwind

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": [
    ".*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! 🎉

Using Tailwind within variables
Yay, it's working! 🎉

Get in touch

I'm not currenlty looking for freelancer work, but if you want to have a chat, feel free to contact me.