Docs: Make Next.js Tailwind instructions more explicit for default globals.css

docs/_snippets/nextjs-styling-css-modules.md

@@ -0,0 +1,31 @@
+```js filename="src/components/Button.js" renderer="react" language="js"
+// This import will work in Storybook
+import styles from './Button.module.css';
+// Sass/Scss modules are also supported
+// import styles from './Button.module.scss'
+// import styles from './Button.module.sass'
+
+export function Button() {
+  return (
+    <button type="button" className={styles.error}>
+      Destroy
+    </button>
+  );
+}
+```
+
+```ts filename="src/components/Button.ts" renderer="react" language="ts"
+// This import will work in Storybook
+import styles from './Button.module.css';
+// Sass/Scss modules are also supported
+// import styles from './Button.module.scss'
+// import styles from './Button.module.sass'
+
+export function Button() {
+  return (
+    <button type="button" className={styles.error}>
+      Destroy
+    </button>
+  );
+}
+```

docs/_snippets/nextjs-styling-sass-config.md

@@ -0,0 +1,24 @@
+```js filename="next.config.js" language="js" renderer="react"
+import path from 'node:path';
+
+export default {
+  // Any options here are included in Sass compilation for your stories
+  sassOptions: {
+    includePaths: [path.join(process.cwd(), 'styles')],
+  },
+};
+```
+
+```ts filename="next.config.ts" language="ts" renderer="react"
+import * as path from 'path';
+import type { NextConfig } from 'next';
+
+const config: NextConfig = {
+  // Any options here are included in Sass compilation for your stories
+  sassOptions: {
+    includePaths: [path.join(process.cwd(), 'styles')],
+  },
+};
+
+export default config;
+```

docs/_snippets/nextjs-styling-sass-preview.md

@@ -0,0 +1,7 @@
+```js filename=".storybook/preview.js" language="js" renderer="react"
+import '../styles/globals.scss';
+```
+
+```ts filename=".storybook/preview.ts" language="ts" renderer="react"
+import '../styles/globals.scss';
+```

docs/_snippets/nextjs-styling-styled-jsx-component.md

@@ -0,0 +1,63 @@
+```js filename="src/components/HelloWorld.js" renderer="react" language="js"
+// This will work in Storybook
+function HelloWorld() {
+  return (
+    <div>
+      Hello world
+      <p>scoped!</p>
+      <style jsx>{`
+        p {
+          color: blue;
+        }
+        div {
+          background: red;
+        }
+        @media (max-width: 600px) {
+          div {
+            background: blue;
+          }
+        }
+      `}</style>
+      <style global jsx>{`
+        body {
+          background: black;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default HelloWorld;
+```
+
+```ts filename="src/components/HelloWorld.ts" renderer="react" language="ts"
+// This will work in Storybook
+function HelloWorld() {
+  return (
+    <div>
+      Hello world
+      <p>scoped!</p>
+      <style jsx>{`
+        p {
+          color: blue;
+        }
+        div {
+          background: red;
+        }
+        @media (max-width: 600px) {
+          div {
+            background: blue;
+          }
+        }
+      `}</style>
+      <style global jsx>{`
+        body {
+          background: black;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default HelloWorld;
+```

docs/_snippets/nextjs-styling-tailwind.md

@@ -0,0 +1,7 @@
+```js filename=".storybook/preview.js" language="js" renderer="react"
+import '../app/globals.css';
+```
+
+```ts filename=".storybook/preview.ts" language="ts" renderer="react"
+import '../app/globals.css';
+```

docs/get-started/frameworks/nextjs.mdx

@@ -416,84 +416,45 @@ const preview: Preview = {
 
 [`next/head`](https://nextjs.org/docs/pages/api-reference/components/head) is supported out of the box. You can use it in your stories like you would in your Next.js application. Please keep in mind, that the Head `children` are placed into the head element of the iframe that Storybook uses to render your stories.
 
-### Styling
+## Next.js styling
 
-#### Sass/Scss
+### Sass/Scss
 
-[Global Sass/Scss stylesheets](https://nextjs.org/docs/pages/building-your-application/styling/sass) are supported without any additional configuration as well. Just import them into [`.storybook/preview.js|ts`](../../configure/index.mdx#configure-story-rendering)
+[Global Sass/Scss stylesheets](https://nextjs.org/docs/pages/building-your-application/styling/sass) are supported without any additional configuration as well. Just import them into [the preview config file](../../configure/index.mdx#configure-story-rendering)
 
-```js title=".storybook/preview.js|ts"
-import '../styles/globals.scss';
-```
+{/* prettier-ignore-start */}
 
-This will automatically include any of your [custom Sass configurations](https://nextjs.org/docs/pages/building-your-application/styling/sass#customizing-sass-options) in your `next.config.js` file.
+<CodeSnippets path="nextjs-styling-sass-preview.md" />
 
-```js title="next.config.js"
-import * as path from 'path';
+{/* prettier-ignore-end */}
 
-export default {
-  // Any options here are included in Sass compilation for your stories
-  sassOptions: {
-    includePaths: [path.join(process.cwd(), 'styles')],
-  },
-};
-```
+This will automatically include any of your [custom Sass configurations](https://nextjs.org/docs/pages/building-your-application/styling/sass#customizing-sass-options) in your Next.js config file.
 
-#### CSS/Sass/Scss Modules
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="nextjs-styling-sass-config.md" />
+
+{/* prettier-ignore-end */}
+
+### CSS/Sass/Scss Modules
 
 [CSS modules](https://nextjs.org/docs/pages/building-your-application/styling/css-modules) work as expected.
 
-```jsx title="src/components/Button.jsx"
-// This import will work in Storybook
-import styles from './Button.module.css';
-// Sass/Scss is also supported
-// import styles from './Button.module.scss'
-// import styles from './Button.module.sass'
+{/* prettier-ignore-start */}
 
-export function Button() {
-  return (
-    <button type="button" className={styles.error}>
-      Destroy
-    </button>
-  );
-}
-```
+<CodeSnippets path="nextjs-styling-css-modules.md" />
 
-#### Styled JSX
+{/* prettier-ignore-end */}
+
+### Styled JSX
 
 The built in CSS-in-JS solution for Next.js is [styled-jsx](https://nextjs.org/docs/pages/building-your-application/styling/css-in-js), and this framework supports that out of the box too, zero config.
 
-```jsx title="src/components/HelloWorld.jsx"
-// This will work in Storybook
-function HelloWorld() {
-  return (
-    <div>
-      Hello world
-      <p>scoped!</p>
-      <style jsx>{`
-        p {
-          color: blue;
-        }
-        div {
-          background: red;
-        }
-        @media (max-width: 600px) {
-          div {
-            background: blue;
-          }
-        }
-      `}</style>
-      <style global jsx>{`
-        body {
-          background: black;
-        }
-      `}</style>
-    </div>
-  );
-}
+{/* prettier-ignore-start */}
 
-export default HelloWorld;
-```
+<CodeSnippets path="nextjs-styling-styled-jsx-component.md" />
+
+{/* prettier-ignore-end */}
 
 You can use your own babel config too. This is an example of how you can customize styled-jsx.
 
@@ -513,11 +474,20 @@ You can use your own babel config too. This is an example of how you can customi
 }
 ```
 
-#### PostCSS
+### Tailwind
 
-Next.js lets you [customize PostCSS config](https://nextjs.org/docs/pages/building-your-application/configuring/post-css). Thus this framework will automatically handle your PostCSS config for you.
+Tailwind in Next.js [is supported via PostCSS](https://nextjs.org/docs/app/getting-started/css#tailwind-css). Storybook will automatically handle the PostCSS config for you, including any custom PostCSS configuration,
+so you can just import your global CSS directly into [the preview config file](../../configure/index.mdx#configure-story-rendering):
+
+{/* prettier-ignore-start */}
 
-This allows for cool things like zero-config Tailwind! (See [Next.js' example](https://github.com/vercel/next.js/tree/canary/packages/create-next-app/templates/default-tw))
+<CodeSnippets path="nextjs-styling-tailwind.md" />
+
+{/* prettier-ignore-end */}
+
+### PostCSS
+
+Next.js lets you [customize PostCSS config](https://nextjs.org/docs/pages/building-your-application/configuring/post-css). Thus this framework will automatically handle your PostCSS config for you.
 
 ### Imports
 #### Absolute imports