Better TailwindCSS class completion in VSCode

settings.json

{
  "tailwindCSS.experimental.classRegex": [
    "[cC]lass\\: '([^']*)'",
    "[cC]lassName\\: '([^']*)'",
    "tw`([^`]*)"
  ]
}

utils.ts

import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

/**
 * @example 
 *  ```ts
 *    const panelStyles = tw`flex gap-4 p-8 rounded-lg bg-blue-600 text-white`
 *  ```
 */
export function tw(strings: TemplateStringsArray, ...params: Array<string | number | undefined | null>): string {
  let str = ''
  strings.forEach((string, i) => {
    str += string + (params[i] ?? '')
  })
  return cn(str)
}

Requires the TailwindCSS extension for VSCode, and to have .vscode/settings.json.

Example usage:

const panelStyles = tw`flex gap-4 p-8 rounded-lg bg-blue-600 text-white`

With the tw tagged template function, and the provided settings you will get Tailwind classname completion no matter where you assign it to, compared to plain strings (which are harder to detect for the plugin). The caveat is that you need to import it.