Match class functions that appear after an opening square bracket

packages/tailwindcss-language-service/src/util/find.test.ts

@@ -1081,3 +1081,30 @@ test('class functions work inside astro code fences', async ({ expect }) => {
     },
   ])
 })
+
+test('classFunctions are detected inside of arrays in javascript just after opening bracket', async ({ expect }) => {
+  let file = createDocument({
+    name: 'file.js',
+    lang: 'javascript',
+    settings: {
+      tailwindCSS: {
+        classFunctions: ['cn'],
+      },
+    },
+    content: js`
+      const list = [cn('relative')]
+    `,
+  })
+
+  let classLists = await findClassListsInHtmlRange(file.state, file.doc, 'js')
+
+  expect(classLists).toEqual([
+    {
+      classList: 'relative',
+      range: {
+        start: { line: 0, character: 18 },
+        end: { line: 0, character: 26 },
+      },
+    },
+  ])
+})

packages/tailwindcss-language-service/src/util/find.ts

@@ -179,7 +179,7 @@ export function matchClassFunctions(text: string, fnNames: string[]): RegExpMatc
   // - It needs to be in an expression position — so it must be preceded by
   // whitespace, parens, curlies, commas, whitespace, etc…
   // - It must look like a fn call or a tagged template literal
-  let FN_NAMES = /(?<=^|[:=,;\s{()])([\p{ID_Start}$_][\p{ID_Continue}$_.]*)[(`]/dgiu
+  let FN_NAMES = /(?<=^|[:=,;\s{()\[])([\p{ID_Start}$_][\p{ID_Continue}$_.]*)[(`]/dgiu
   let foundFns = findAll(FN_NAMES, text)
 
   // 3. Match against the function names in the document

packages/vscode-tailwindcss/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Prerelease
 
-- Nothing yet!
+- Match class functions that appear after an opening square bracket ([#1428](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1428))
 
 ## 0.14.25