chore: detect utilities in css (#32143)

web/tailwind-css-plugin.ts

@@ -0,0 +1,25 @@
+// Credits:
+// https://github.com/tailwindlabs/tailwindcss-intellisense/issues/227
+
+import type { PluginCreator } from 'tailwindcss/types/config'
+import { readFileSync } from 'node:fs'
+import { parse } from 'postcss'
+import { objectify } from 'postcss-js'
+
+export const cssAsPlugin: (cssPath: string[]) => PluginCreator = (cssPath: string[]) => {
+  if (process.env.NODE_ENV === 'production') {
+    return () => {}
+  }
+  return ({ addUtilities, addComponents, addBase }) => {
+    const jssList = cssPath.map(p => objectify(parse(readFileSync(p, 'utf8'))))
+
+    for (const jss of jssList) {
+      if (jss['@layer utilities'])
+        addUtilities(jss['@layer utilities'])
+      if (jss['@layer components'])
+        addComponents(jss['@layer components'])
+      if (jss['@layer base'])
+        addBase(jss['@layer base'])
+    }
+  }
+}