From 0d0445e7cabacdad4a7f6125d189ea7987acd936 Mon Sep 17 00:00:00 2001
From: Greg Poole <greg.poole@protonmail.com>
Date: Thu, 25 Sep 2025 11:00:30 +1000
Subject: [PATCH 1/7] docs: reorganising nextjs styling section, extracting
 snippets and adding Tailwind example

---
 docs/_snippets/nextjs-styling-css-modules.md  | 15 +++
 docs/_snippets/nextjs-styling-sass-config.md  | 10 ++
 docs/_snippets/nextjs-styling-sass-preview.md |  3 +
 .../nextjs-styling-styled-jsx-component.md    | 31 ++++++
 docs/_snippets/nextjs-styling-tailwind.md     |  3 +
 docs/get-started/frameworks/nextjs.mdx        | 96 +++++++------------
 6 files changed, 96 insertions(+), 62 deletions(-)
 create mode 100644 docs/_snippets/nextjs-styling-css-modules.md
 create mode 100644 docs/_snippets/nextjs-styling-sass-config.md
 create mode 100644 docs/_snippets/nextjs-styling-sass-preview.md
 create mode 100644 docs/_snippets/nextjs-styling-styled-jsx-component.md
 create mode 100644 docs/_snippets/nextjs-styling-tailwind.md

diff --git a/docs/_snippets/nextjs-styling-css-modules.md b/docs/_snippets/nextjs-styling-css-modules.md
new file mode 100644
index 000000000000..f131787f6680
--- /dev/null
+++ b/docs/_snippets/nextjs-styling-css-modules.md
@@ -0,0 +1,15 @@
+```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'
+
+export function Button() {
+  return (
+    <button type="button" className={styles.error}>
+      Destroy
+    </button>
+  );
+}
+```
\ No newline at end of file
diff --git a/docs/_snippets/nextjs-styling-sass-config.md b/docs/_snippets/nextjs-styling-sass-config.md
new file mode 100644
index 000000000000..b295e35cf9d8
--- /dev/null
+++ b/docs/_snippets/nextjs-styling-sass-config.md
@@ -0,0 +1,10 @@
+```js title="next.config.js"
+import * as path from 'path';
+
+export default {
+  // Any options here are included in Sass compilation for your stories
+  sassOptions: {
+    includePaths: [path.join(process.cwd(), 'styles')],
+  },
+};
+```
\ No newline at end of file
diff --git a/docs/_snippets/nextjs-styling-sass-preview.md b/docs/_snippets/nextjs-styling-sass-preview.md
new file mode 100644
index 000000000000..fec900ae77d2
--- /dev/null
+++ b/docs/_snippets/nextjs-styling-sass-preview.md
@@ -0,0 +1,3 @@
+```js title=".storybook/preview.js|ts"
+import '../styles/globals.scss';
+```
\ No newline at end of file
diff --git a/docs/_snippets/nextjs-styling-styled-jsx-component.md b/docs/_snippets/nextjs-styling-styled-jsx-component.md
new file mode 100644
index 000000000000..74bfc7d320c6
--- /dev/null
+++ b/docs/_snippets/nextjs-styling-styled-jsx-component.md
@@ -0,0 +1,31 @@
+```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>
+  );
+}
+
+export default HelloWorld;
+```
\ No newline at end of file
diff --git a/docs/_snippets/nextjs-styling-tailwind.md b/docs/_snippets/nextjs-styling-tailwind.md
new file mode 100644
index 000000000000..4ee594f232af
--- /dev/null
+++ b/docs/_snippets/nextjs-styling-tailwind.md
@@ -0,0 +1,3 @@
+```js title=".storybook/preview.js|ts"
+import '../app/globals.css';
+```
\ No newline at end of file
diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx
index 208cfce1e302..b8f53b781b39 100644
--- a/docs/get-started/frameworks/nextjs.mdx
+++ b/docs/get-started/frameworks/nextjs.mdx
@@ -455,82 +455,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.
 
-## Sass/Scss
+## Next.js Styling
+
+### 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)
 
-```js title=".storybook/preview.js|ts"
-import '../styles/globals.scss';
-```
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="nextjs-styling-sass-preview.md" />
+
+{/* prettier-ignore-end */}
 
 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.
 
-```js title="next.config.js"
-import * as path from 'path';
+{/* prettier-ignore-start */}
 
-export default {
-  // Any options here are included in Sass compilation for your stories
-  sassOptions: {
-    includePaths: [path.join(process.cwd(), 'styles')],
-  },
-};
-```
+<CodeSnippets path="nextjs-styling-sass-config.md" />
+
+{/* prettier-ignore-end */}
 
-## CSS/Sass/Scss Modules
+### 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.
 
@@ -550,11 +513,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/14/app/building-your-application/styling/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.
 
 ## Absolute imports
 

From 1242db5e3de944255cddc3cd67afe826606106d6 Mon Sep 17 00:00:00 2001
From: Greg Poole <greg.poole@protonmail.com>
Date: Thu, 25 Sep 2025 11:08:37 +1000
Subject: [PATCH 2/7] docs: updating nextjs styling snippets to follow snippet
 conventions properly

---
 docs/_snippets/nextjs-styling-css-modules.md  | 18 +++++++++-
 docs/_snippets/nextjs-styling-sass-config.md  | 16 ++++++++-
 docs/_snippets/nextjs-styling-sass-preview.md |  6 +++-
 .../nextjs-styling-styled-jsx-component.md    | 34 ++++++++++++++++++-
 docs/_snippets/nextjs-styling-tailwind.md     |  6 +++-
 5 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/docs/_snippets/nextjs-styling-css-modules.md b/docs/_snippets/nextjs-styling-css-modules.md
index f131787f6680..60a77db1cc72 100644
--- a/docs/_snippets/nextjs-styling-css-modules.md
+++ b/docs/_snippets/nextjs-styling-css-modules.md
@@ -1,4 +1,20 @@
-```jsx title="src/components/Button.jsx"
+```js filename="src/components/Button.js" renderer="react" language="js"
+// 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'
+
+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 is also supported
diff --git a/docs/_snippets/nextjs-styling-sass-config.md b/docs/_snippets/nextjs-styling-sass-config.md
index b295e35cf9d8..9527c4836306 100644
--- a/docs/_snippets/nextjs-styling-sass-config.md
+++ b/docs/_snippets/nextjs-styling-sass-config.md
@@ -1,4 +1,4 @@
-```js title="next.config.js"
+```js filename="next.config.js" language="js"
 import * as path from 'path';
 
 export default {
@@ -7,4 +7,18 @@ export default {
     includePaths: [path.join(process.cwd(), 'styles')],
   },
 };
+```
+
+```ts filename="next.config.ts" language="ts"
+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;
 ```
\ No newline at end of file
diff --git a/docs/_snippets/nextjs-styling-sass-preview.md b/docs/_snippets/nextjs-styling-sass-preview.md
index fec900ae77d2..0ccd34e8fc3e 100644
--- a/docs/_snippets/nextjs-styling-sass-preview.md
+++ b/docs/_snippets/nextjs-styling-sass-preview.md
@@ -1,3 +1,7 @@
-```js title=".storybook/preview.js|ts"
+```js filename=".storybook/preview.js" language="js"
+import '../styles/globals.scss';
+```
+
+```ts filename=".storybook/preview.ts" language="ts"
 import '../styles/globals.scss';
 ```
\ No newline at end of file
diff --git a/docs/_snippets/nextjs-styling-styled-jsx-component.md b/docs/_snippets/nextjs-styling-styled-jsx-component.md
index 74bfc7d320c6..bedbb5a7d858 100644
--- a/docs/_snippets/nextjs-styling-styled-jsx-component.md
+++ b/docs/_snippets/nextjs-styling-styled-jsx-component.md
@@ -1,4 +1,36 @@
-```jsx title="src/components/HelloWorld.jsx"
+```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 (
diff --git a/docs/_snippets/nextjs-styling-tailwind.md b/docs/_snippets/nextjs-styling-tailwind.md
index 4ee594f232af..3731975dc89a 100644
--- a/docs/_snippets/nextjs-styling-tailwind.md
+++ b/docs/_snippets/nextjs-styling-tailwind.md
@@ -1,3 +1,7 @@
-```js title=".storybook/preview.js|ts"
+```js filename=".storybook/preview.js" language="js"
+import '../app/globals.css';
+```
+
+```ts filename=".storybook/preview.ts" language="ts"
 import '../app/globals.css';
 ```
\ No newline at end of file

From 184a380f9c8248d09a2d7488cd614d614115fa21 Mon Sep 17 00:00:00 2001
From: Greg Poole <greg.poole@protonmail.com>
Date: Thu, 25 Sep 2025 11:38:52 +1000
Subject: [PATCH 3/7] docs: fixing next.config.js example and out-of-date
 Next.js docs link

---
 docs/_snippets/nextjs-styling-sass-config.md | 4 ++--
 docs/get-started/frameworks/nextjs.mdx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/_snippets/nextjs-styling-sass-config.md b/docs/_snippets/nextjs-styling-sass-config.md
index 9527c4836306..2bb55b5d80df 100644
--- a/docs/_snippets/nextjs-styling-sass-config.md
+++ b/docs/_snippets/nextjs-styling-sass-config.md
@@ -1,7 +1,7 @@
 ```js filename="next.config.js" language="js"
-import * as path from 'path';
+const path = require('path');
 
-export default {
+module.exports = {
   // Any options here are included in Sass compilation for your stories
   sassOptions: {
     includePaths: [path.join(process.cwd(), 'styles')],
diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx
index b8f53b781b39..8f9f1af308df 100644
--- a/docs/get-started/frameworks/nextjs.mdx
+++ b/docs/get-started/frameworks/nextjs.mdx
@@ -515,7 +515,7 @@ You can use your own babel config too. This is an example of how you can customi
 
 ### Tailwind
 
-Tailwind in Next.js [is supported via PostCSS](https://nextjs.org/docs/14/app/building-your-application/styling/tailwind-css). Storybook will automatically handle the PostCSS config for you, including any custom PostCSS configuration,
+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 */}

From 623d76513335bbcdf392b89fa5da0e8e1493ba2d Mon Sep 17 00:00:00 2001
From: Greg Poole <greg.poole@protonmail.com>
Date: Thu, 25 Sep 2025 11:59:29 +1000
Subject: [PATCH 4/7] docs: fixing missing renderer from nextjs styling
 snippets

---
 docs/_snippets/nextjs-styling-sass-config.md  | 4 ++--
 docs/_snippets/nextjs-styling-sass-preview.md | 4 ++--
 docs/_snippets/nextjs-styling-tailwind.md     | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/_snippets/nextjs-styling-sass-config.md b/docs/_snippets/nextjs-styling-sass-config.md
index 2bb55b5d80df..0e887e9f8e3a 100644
--- a/docs/_snippets/nextjs-styling-sass-config.md
+++ b/docs/_snippets/nextjs-styling-sass-config.md
@@ -1,4 +1,4 @@
-```js filename="next.config.js" language="js"
+```js filename="next.config.js" language="js" renderer="react"
 const path = require('path');
 
 module.exports = {
@@ -9,7 +9,7 @@ module.exports = {
 };
 ```
 
-```ts filename="next.config.ts" language="ts"
+```ts filename="next.config.ts" language="ts" renderer="react"
 import * as path from 'path';
 import type { NextConfig } from 'next';
 
diff --git a/docs/_snippets/nextjs-styling-sass-preview.md b/docs/_snippets/nextjs-styling-sass-preview.md
index 0ccd34e8fc3e..aa6900d46f3d 100644
--- a/docs/_snippets/nextjs-styling-sass-preview.md
+++ b/docs/_snippets/nextjs-styling-sass-preview.md
@@ -1,7 +1,7 @@
-```js filename=".storybook/preview.js" language="js"
+```js filename=".storybook/preview.js" language="js" renderer="react"
 import '../styles/globals.scss';
 ```
 
-```ts filename=".storybook/preview.ts" language="ts"
+```ts filename=".storybook/preview.ts" language="ts" renderer="react"
 import '../styles/globals.scss';
 ```
\ No newline at end of file
diff --git a/docs/_snippets/nextjs-styling-tailwind.md b/docs/_snippets/nextjs-styling-tailwind.md
index 3731975dc89a..8da3519c8b54 100644
--- a/docs/_snippets/nextjs-styling-tailwind.md
+++ b/docs/_snippets/nextjs-styling-tailwind.md
@@ -1,7 +1,7 @@
-```js filename=".storybook/preview.js" language="js"
+```js filename=".storybook/preview.js" language="js" renderer="react"
 import '../app/globals.css';
 ```
 
-```ts filename=".storybook/preview.ts" language="ts"
+```ts filename=".storybook/preview.ts" language="ts" renderer="react"
 import '../app/globals.css';
 ```
\ No newline at end of file

From 7276c1ad72f38fcf0aad2244935772aa94cada55 Mon Sep 17 00:00:00 2001
From: Greg Poole <greg.poole@protonmail.com>
Date: Thu, 25 Sep 2025 12:00:39 +1000
Subject: [PATCH 5/7] docs: indirectly reference config files and fix casing of
 styling section heading

---
 docs/get-started/frameworks/nextjs.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx
index 8f9f1af308df..ca68708e1bb8 100644
--- a/docs/get-started/frameworks/nextjs.mdx
+++ b/docs/get-started/frameworks/nextjs.mdx
@@ -455,11 +455,11 @@ 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.
 
-## Next.js Styling
+## Next.js styling
 
 ### 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)
 
 {/* prettier-ignore-start */}
 
@@ -467,7 +467,7 @@ const preview: Preview = {
 
 {/* prettier-ignore-end */}
 
-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.
+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.
 
 {/* prettier-ignore-start */}
 

From 9415c367dc2c19527abe444b751f85f3d8f793bc Mon Sep 17 00:00:00 2001
From: Greg Poole <greg.poole@protonmail.com>
Date: Mon, 10 Nov 2025 10:20:55 +1100
Subject: [PATCH 6/7] docs: switch NextJS sass sample to ESM

---
 docs/_snippets/nextjs-styling-sass-config.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/_snippets/nextjs-styling-sass-config.md b/docs/_snippets/nextjs-styling-sass-config.md
index 0e887e9f8e3a..0c8ec47ac6b6 100644
--- a/docs/_snippets/nextjs-styling-sass-config.md
+++ b/docs/_snippets/nextjs-styling-sass-config.md
@@ -1,7 +1,7 @@
 ```js filename="next.config.js" language="js" renderer="react"
-const path = require('path');
+import path from 'node:path';
 
-module.exports = {
+export default {
   // Any options here are included in Sass compilation for your stories
   sassOptions: {
     includePaths: [path.join(process.cwd(), 'styles')],
@@ -21,4 +21,4 @@ const config: NextConfig = {
 };
 
 export default config;
-```
\ No newline at end of file
+```

From 666b56887316e4c9f9bdb2d668c0d8add44e8b50 Mon Sep 17 00:00:00 2001
From: Greg Poole <greg.poole@protonmail.com>
Date: Mon, 10 Nov 2025 10:27:07 +1100
Subject: [PATCH 7/7] docs: rewording of nextjs css modules snippet

---
 docs/_snippets/nextjs-styling-css-modules.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/_snippets/nextjs-styling-css-modules.md b/docs/_snippets/nextjs-styling-css-modules.md
index 60a77db1cc72..a42fbeb229d9 100644
--- a/docs/_snippets/nextjs-styling-css-modules.md
+++ b/docs/_snippets/nextjs-styling-css-modules.md
@@ -1,7 +1,7 @@
 ```js filename="src/components/Button.js" renderer="react" language="js"
 // This import will work in Storybook
 import styles from './Button.module.css';
-// Sass/Scss is also supported
+// Sass/Scss modules are also supported
 // import styles from './Button.module.scss'
 // import styles from './Button.module.sass'
 
@@ -17,7 +17,7 @@ export function 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 is also supported
+// Sass/Scss modules are also supported
 // import styles from './Button.module.scss'
 // import styles from './Button.module.sass'
 
@@ -28,4 +28,4 @@ export function Button() {
     </button>
   );
 }
-```
\ No newline at end of file
+```