chore: detect utilities in css (#32143)

web/tailwind-common-config.ts

@@ -1,8 +1,16 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 import tailwindTypography from '@tailwindcss/typography'
 // @ts-expect-error workaround for turbopack issue
+import { cssAsPlugin } from './tailwind-css-plugin.ts'
+// @ts-expect-error workaround for turbopack issue
 import tailwindThemeVarDefine from './themes/tailwind-theme-var-define.ts'
 import typography from './typography.js'
 
+const _dirname = typeof __dirname !== 'undefined'
+  ? __dirname
+  : path.dirname(fileURLToPath(import.meta.url))
+
 const config = {
   theme: {
     typography,
@@ -148,7 +156,12 @@ const config = {
       },
     },
   },
-  plugins: [tailwindTypography],
+  plugins: [
+    tailwindTypography,
+    cssAsPlugin([
+      path.resolve(_dirname, './app/styles/globals.css'),
+    ]),
+  ],
   // https://github.com/tailwindlabs/tailwindcss/discussions/5969
   corePlugins: {
     preflight: false,