Skip to content

Commit 8b8df12

Browse files
jonniebigodesjonniebigodes
authored
Merge pull request #28625 from gpoole/patch-1
Docs: Make Next.js Tailwind instructions more explicit for default globals.css
2 parents 29fb088 + b4e6c87 commit 8b8df12

6 files changed

Lines changed: 167 additions & 65 deletions

File tree

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
```js filename="src/components/Button.js" renderer="react" language="js"
2+
// This import will work in Storybook
3+
import styles from './Button.module.css';
4+
// Sass/Scss modules are also supported
5+
// import styles from './Button.module.scss'
6+
// import styles from './Button.module.sass'
7+
8+
export function Button() {
9+
return (
10+
<button type="button" className={styles.error}>
11+
Destroy
12+
</button>
13+
);
14+
}
15+
```
16+
17+
```ts filename="src/components/Button.ts" renderer="react" language="ts"
18+
// This import will work in Storybook
19+
import styles from './Button.module.css';
20+
// Sass/Scss modules are also supported
21+
// import styles from './Button.module.scss'
22+
// import styles from './Button.module.sass'
23+
24+
export function Button() {
25+
return (
26+
<button type="button" className={styles.error}>
27+
Destroy
28+
</button>
29+
);
30+
}
31+
```

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
```js filename="next.config.js" language="js" renderer="react"
2+
import path from 'node:path';
3+
4+
export default {
5+
// Any options here are included in Sass compilation for your stories
6+
sassOptions: {
7+
includePaths: [path.join(process.cwd(), 'styles')],
8+
},
9+
};
10+
```
11+
12+
```ts filename="next.config.ts" language="ts" renderer="react"
13+
import * as path from 'path';
14+
import type { NextConfig } from 'next';
15+
16+
const config: NextConfig = {
17+
// Any options here are included in Sass compilation for your stories
18+
sassOptions: {
19+
includePaths: [path.join(process.cwd(), 'styles')],
20+
},
21+
};
22+
23+
export default config;
24+
```

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
```js filename=".storybook/preview.js" language="js" renderer="react"
2+
import '../styles/globals.scss';
3+
```
4+
5+
```ts filename=".storybook/preview.ts" language="ts" renderer="react"
6+
import '../styles/globals.scss';
7+
```

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
```js filename="src/components/HelloWorld.js" renderer="react" language="js"
2+
// This will work in Storybook
3+
function HelloWorld() {
4+
return (
5+
<div>
6+
Hello world
7+
<p>scoped!</p>
8+
<style jsx>{`
9+
p {
10+
color: blue;
11+
}
12+
div {
13+
background: red;
14+
}
15+
@media (max-width: 600px) {
16+
div {
17+
background: blue;
18+
}
19+
}
20+
`}</style>
21+
<style global jsx>{`
22+
body {
23+
background: black;
24+
}
25+
`}</style>
26+
</div>
27+
);
28+
}
29+
30+
export default HelloWorld;
31+
```
32+
33+
```ts filename="src/components/HelloWorld.ts" renderer="react" language="ts"
34+
// This will work in Storybook
35+
function HelloWorld() {
36+
return (
37+
<div>
38+
Hello world
39+
<p>scoped!</p>
40+
<style jsx>{`
41+
p {
42+
color: blue;
43+
}
44+
div {
45+
background: red;
46+
}
47+
@media (max-width: 600px) {
48+
div {
49+
background: blue;
50+
}
51+
}
52+
`}</style>
53+
<style global jsx>{`
54+
body {
55+
background: black;
56+
}
57+
`}</style>
58+
</div>
59+
);
60+
}
61+
62+
export default HelloWorld;
63+
```

‎docs/_snippets/nextjs-styling-tailwind.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
```js filename=".storybook/preview.js" language="js" renderer="react"
2+
import '../app/globals.css';
3+
```
4+
5+
```ts filename=".storybook/preview.ts" language="ts" renderer="react"
6+
import '../app/globals.css';
7+
```

‎docs/get-started/frameworks/nextjs.mdx‎

Lines changed: 35 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -416,84 +416,45 @@ const preview: Preview = {
416416

417417
[`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.
418418

419-
### Styling
419+
## Next.js styling
420420

421-
#### Sass/Scss
421+
### Sass/Scss
422422

423-
[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)
423+
[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)
424424

425-
```js title=".storybook/preview.js|ts"
426-
import '../styles/globals.scss';
427-
```
425+
{/* prettier-ignore-start */}
428426

429-
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.
427+
<CodeSnippets path="nextjs-styling-sass-preview.md" />
430428

431-
```js title="next.config.js"
432-
import * as path from 'path';
429+
{/* prettier-ignore-end */}
433430

434-
export default {
435-
// Any options here are included in Sass compilation for your stories
436-
sassOptions: {
437-
includePaths: [path.join(process.cwd(), 'styles')],
438-
},
439-
};
440-
```
431+
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.
441432

442-
#### CSS/Sass/Scss Modules
433+
{/* prettier-ignore-start */}
434+
435+
<CodeSnippets path="nextjs-styling-sass-config.md" />
436+
437+
{/* prettier-ignore-end */}
438+
439+
### CSS/Sass/Scss Modules
443440

444441
[CSS modules](https://nextjs.org/docs/pages/building-your-application/styling/css-modules) work as expected.
445442

446-
```jsx title="src/components/Button.jsx"
447-
// This import will work in Storybook
448-
import styles from './Button.module.css';
449-
// Sass/Scss is also supported
450-
// import styles from './Button.module.scss'
451-
// import styles from './Button.module.sass'
443+
{/* prettier-ignore-start */}
452444

453-
export function Button() {
454-
return (
455-
<button type="button" className={styles.error}>
456-
Destroy
457-
</button>
458-
);
459-
}
460-
```
445+
<CodeSnippets path="nextjs-styling-css-modules.md" />
461446

462-
#### Styled JSX
447+
{/* prettier-ignore-end */}
448+
449+
### Styled JSX
463450

464451
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.
465452

466-
```jsx title="src/components/HelloWorld.jsx"
467-
// This will work in Storybook
468-
function HelloWorld() {
469-
return (
470-
<div>
471-
Hello world
472-
<p>scoped!</p>
473-
<style jsx>{`
474-
p {
475-
color: blue;
476-
}
477-
div {
478-
background: red;
479-
}
480-
@media (max-width: 600px) {
481-
div {
482-
background: blue;
483-
}
484-
}
485-
`}</style>
486-
<style global jsx>{`
487-
body {
488-
background: black;
489-
}
490-
`}</style>
491-
</div>
492-
);
493-
}
453+
{/* prettier-ignore-start */}
494454

495-
export default HelloWorld;
496-
```
455+
<CodeSnippets path="nextjs-styling-styled-jsx-component.md" />
456+
457+
{/* prettier-ignore-end */}
497458

498459
You can use your own babel config too. This is an example of how you can customize styled-jsx.
499460

@@ -513,11 +474,20 @@ You can use your own babel config too. This is an example of how you can customi
513474
}
514475
```
515476

516-
#### PostCSS
477+
### Tailwind
517478

518-
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.
479+
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,
480+
so you can just import your global CSS directly into [the preview config file](../../configure/index.mdx#configure-story-rendering):
481+
482+
{/* prettier-ignore-start */}
519483

520-
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))
484+
<CodeSnippets path="nextjs-styling-tailwind.md" />
485+
486+
{/* prettier-ignore-end */}
487+
488+
### PostCSS
489+
490+
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.
521491

522492
### Imports
523493
#### Absolute imports

0 commit comments

Comments
 (0)