fix(modules): update scaffold tailwind (#553)

Updating how scoping tailwind logic for modules work. Confirmed it works
in local dev, local prod, and platform. Tested with multiple modules on
one page as well ensuring that tailwind styles don't leak into inserted
page.

Instead of needing 

```
.tailwind {
   @tailwind base;
}
```

in the index.css we are using the `tailwindcss-scoped-preflight` library
in the `tailwind.config.ts ` to scope it to `tailwind tw-${moduleName}`.

So the module component will need to be wrapped by  

```
<div className="tailwind tw-${moduleName}">
  Module
</div>
```

packages/pages/src/scaffold/modules/generate.ts

@@ -69,7 +69,7 @@ export const generateModule = async (
   if (response.useTailwind) {
     fs.writeFileSync(
       path.join(modulePath, "tailwind.config.ts"),
-      tailwindCode(projectStructure)
+      tailwindCode(projectStructure, response.moduleName)
     );
     fs.writeFileSync(path.join(modulePath, "postcss.config.js"), postcssCode());
   }
@@ -146,5 +146,6 @@ function handleCancel(moduleName: string, projectStructure: ProjectStructure) {
 const getDependencies = async () => {
   await updatePackageDependency("@yext/pages-components", null, true);
   await updatePackageDependency("tailwindcss", null, true);
+  await updatePackageDependency("tailwindcss-scoped-preflight", null, true);
   await installDependencies();
 };

packages/pages/src/scaffold/modules/templates.ts

@@ -10,7 +10,7 @@ export const moduleCode = (
   moduleName: string,
   useTailwind: boolean
 ): string => {
-  const tailwind = useTailwind ? ` className="tailwind"` : ``;
+  const tailwind = useTailwind ? ` className="tw-${moduleName}"` : ``;
   const formattedModuleName = formatModuleName(moduleName);
 
   return `import * as React from "react";
@@ -72,24 +72,31 @@ export default {
 
 export const indexCssCode = (useTailwind: boolean): string => {
   return useTailwind
-    ? `.tailwind {
-  @tailwind base;
-  @tailwind components;
-  @tailwind utilities;  
-}
+    ? `@tailwind base;
+@tailwind components;
+@tailwind utilities;  
 `
     : ``;
 };
 
-export const tailwindCode = (projectStructure: ProjectStructure) => {
+export const tailwindCode = (
+  projectStructure: ProjectStructure,
+  moduleName: string
+) => {
   return `import type { Config } from 'tailwindcss';
+  import { scopedPreflightStyles, isolateInsideOfContainer } from 'tailwindcss-scoped-preflight';
 
 export default {
+  important: '.tw-${moduleName}',
   content: ["./${projectStructure.config.rootFolders.source}/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    scopedPreflightStyles({
+      isolationStrategy: isolateInsideOfContainer('.tw-${moduleName}'),
+    }),
+  ]
 } satisfies Config
 `;
 };