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

gpoole · 2024-07-17T04:50:52Z

What I did

Update the documentation to explicitly show how to import global Tailwind styles that are created automatically by the Next.js app generator if users select "Tailwind" as their preferred styling system.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

Documentation
- Revamped Next.js styling docs with clearer structure and subsections.
- Added copy‑pasteable code snippets for CSS Modules (JS/TS), Sass setup (config and preview imports), Styled JSX (JSX/TSX), and Tailwind integration.
- Unified examples for Storybook previews and global stylesheet imports.
- Improved readability with embedded, language-specific snippets and consolidated guidance.

greptile-apps

PR Summary

Updated docs/get-started/frameworks/nextjs.mdx to include explicit instructions for importing global Tailwind styles.
Clarified integration steps for Tailwind CSS with Storybook in a Next.js project.

_{1 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

valentinpalkovic · 2025-06-23T09:04:53Z

@jonniebigodes, can you please take a look?

Sidnioulz

Thanks for your PR @gpoole! Considering how ubiquitious Tailwind is these days, I agree it'd help to show such a small snippet to get people started.

I'm requesting changes so the code example can be moved into a snippet for easier maintenance.

If you're up for it, you could make a few other improvements:

fix a few other snippets on that page that mix up TS and JS
add a "Next.js styling" heading to encompass all the styling options
maybe have a dedicated Tailwind section for visibility above PostCSS?
This could then allow the PostCSS section to explain that the framework will honour Next.js PostCSS config out of the box

(@jonniebigodes please let me know if you disagree to any of the above suggestions!)

Sidnioulz · 2025-08-14T09:34:09Z

docs/get-started/frameworks/nextjs.mdx

+  For Tailwind, import your global CSS into [`.storybook/preview.js|ts`](../../configure/index.mdx#configure-story-rendering):
+
+  ```js
+  // .storybook/preview.js|ts
+  import '../app/globals.css';
+  ```


This example should be embedded in a code snippet: https://storybook.js.org/docs/contribute/documentation/new-snippets.

This allows you to both show TS and JS examples (we usually at least want these two), and to show the filename being edited. You could then reword "[.storybook/preview.js|ts]" to say "preview config file" as it would be redundant with the immediate snippet under it.

@Sidnioulz, your suggestion is on point. With that in mind, @gpoole, are you okay with following up on this pull request and incorporating @Sidnioulz 's feedback so that we can make this available in the documentation? Let me know, and we'll go from there.

Sure I'll take a look 👍

coderabbitai · 2025-09-25T00:40:02Z

Walkthrough

This PR updates Next.js documentation by adding multiple reusable code snippets and restructuring the styling section. New snippets cover CSS Modules (JS/TS Button components), Sass configuration in next.config (JS/TS), Storybook preview imports for Sass and Tailwind (JS/TS), and a styled-jsx component (JS/TS). The Next.js guide (docs/get-started/frameworks/nextjs.mdx) is reorganized under “Next.js Styling,” replacing inline examples with CodeSnippets references and introducing/renaming subsections for Sass/Scss, CSS Modules, Styled JSX, and Tailwind. No runtime code changes; modifications are limited to docs.

Suggested labels

patch:yes

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title Check	⚠️ Warning	The current title only highlights clarifying Tailwind globals.css usage, but the pull request actually restructures the entire Next.js styling documentation by renaming sections, introducing new subsections, and adding multiple CodeSnippet integrations for Sass, CSS Modules, Styled JSX, and Tailwind. This mismatch makes the title too narrow and does not accurately summarize the primary scope of the changes.	Please update the title to reflect the broader scope of this PR, for example: “Docs: reorganize Next.js styling section and clarify Tailwind globals.css imports” or similar wording that covers both the documentation restructure and the Tailwind updates.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

docs/_snippets/nextjs-styling-tailwind.md (1)

1-7: Cover projects that opt into the src/ directory
Many projects say “yes” when create-next-app asks about the src/ directory. In that case this import path breaks. Let’s call out the alternate path right in the snippet.

Apply this diff to note the src/ directory variant:

 ```js filename=".storybook/preview.js" renderer="nextjs" language="js" tabTitle="JavaScript"
 import '../app/globals.css';
+// If you enabled Next.js' optional `src/` directory, use `../src/app/globals.css` instead.

import '../app/globals.css';
+// If you enabled Next.js' optional `src/` directory, use `../src/app/globals.css` instead.


</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used**: CodeRabbit UI

**Review profile**: CHILL

**Plan**: Pro

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between ab386d77a4de696c360e061ce3781fcb43801e62 and 8f458ed6aad5f72528480d2a1ba38f1bc817de54.

</details>

<details>
<summary>📒 Files selected for processing (6)</summary>

* `docs/_snippets/nextjs-styling-css-modules.md` (1 hunks)
* `docs/_snippets/nextjs-styling-sass-config.md` (1 hunks)
* `docs/_snippets/nextjs-styling-sass-preview.md` (1 hunks)
* `docs/_snippets/nextjs-styling-styled-jsx-component.md` (1 hunks)
* `docs/_snippets/nextjs-styling-tailwind.md` (1 hunks)
* `docs/get-started/frameworks/nextjs.mdx` (2 hunks)

</details>

<details>
<summary>🔇 Additional comments (4)</summary><blockquote>

<details>
<summary>docs/_snippets/nextjs-styling-sass-preview.md (1)</summary><blockquote>

`1-7`: **Clear Sass preview import example**
Nice job surfacing both JS and TS preview imports for the default Sass globals setup. This will save folks a trip to the Next.js starter to double-check the path.

</blockquote></details>
<details>
<summary>docs/_snippets/nextjs-styling-css-modules.md (1)</summary><blockquote>

`1-31`: **Polished CSS Modules snippet**
Highlighting the Storybook-friendly import plus the Sass variations in both JS and TS flavors is exactly the kind of clarity our readers need.

</blockquote></details>
<details>
<summary>docs/_snippets/nextjs-styling-styled-jsx-component.md (1)</summary><blockquote>

`1-63`: **Comprehensive styled-jsx example**
Great coverage of scoped, global, and responsive styles in both JS and TS snippets—readers get the full picture.

</blockquote></details>
<details>
<summary>docs/get-started/frameworks/nextjs.mdx (1)</summary><blockquote>

`434-502`: **Styling section reorg reads well**
The new “Next.js Styling” layout with CodeSnippets makes the page far easier to scan, and the Tailwind callout directly addresses a common setup pain point.

</blockquote></details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->

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

…ding Tailwind example

…properly

…tion heading

gpoole · 2025-09-25T02:03:46Z

Apologies for the noisy pushes on this change, I probably should have just started over. Preview looks ok to me, @Sidnioulz could you please check if this is what you were after?

I've avoided touching anything outside of the styles or I think the change could get a bit beyond what I was doing originally with the PR.

Sidnioulz

This is fantastic work, thank you so much @gpoole!

@jonniebigodes there are only a bunch of CJS/ESM changes to make, I've added GH suggestions. I'm letting you merge this once you've had time to review/apply them :)

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

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

nx-cloud · 2025-11-10T10:12:37Z

View your CI Pipeline Execution ↗ for commit 3f1fa49

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	49s	View ↗

☁️ Nx Cloud last updated this comment at 2025-11-10 10:23:46 UTC

jonniebigodes

@gpoole, sorry for the delayed response on this pull request, as I've been tasked with other documentation changes that required my attention. However, I've had time to check this, and it looks good on my end.
I will merge this once the checklist is cleared.

Hope you have a fantastic week.

Stay safe

gpoole requested review from jonniebigodes and kylegach as code owners July 17, 2024 04:50

greptile-apps bot reviewed Jul 17, 2024

View reviewed changes

jonniebigodes self-assigned this Jul 22, 2024

github-actions bot added the Stale label Jul 6, 2025

vanessayuenn added the documentation label Aug 13, 2025

github-actions bot added needs triage and removed Stale labels Aug 14, 2025

Sidnioulz requested changes Aug 14, 2025

View reviewed changes

github-actions bot added the Stale label Aug 27, 2025

jonniebigodes removed the request for review from kylegach September 24, 2025 11:53

gpoole force-pushed the patch-1 branch from 071e171 to 4defdc2 Compare September 25, 2025 00:39

gpoole force-pushed the patch-1 branch from 4defdc2 to 8f458ed Compare September 25, 2025 00:42

coderabbitai bot reviewed Sep 25, 2025

View reviewed changes

docs/_snippets/nextjs-styling-sass-config.md Outdated Show resolved Hide resolved

docs: reorganising nextjs styling section, extracting snippets and ad…

0d0445e

…ding Tailwind example

gpoole force-pushed the patch-1 branch from 8f458ed to 0d0445e Compare September 25, 2025 01:01

gpoole added 4 commits September 25, 2025 11:08

docs: updating nextjs styling snippets to follow snippet conventions …

1242db5

…properly

docs: fixing next.config.js example and out-of-date Next.js docs link

184a380

docs: fixing missing renderer from nextjs styling snippets

623d765

docs: indirectly reference config files and fix casing of styling sec…

7276c1a

…tion heading

github-actions bot removed the Stale label Sep 27, 2025

github-actions bot added the Stale label Oct 15, 2025

Sidnioulz self-requested a review November 3, 2025 09:08

Sidnioulz approved these changes Nov 3, 2025

View reviewed changes

docs/_snippets/nextjs-styling-css-modules.md Outdated Show resolved Hide resolved

docs/_snippets/nextjs-styling-sass-config.md Outdated Show resolved Hide resolved

docs/_snippets/nextjs-styling-sass-config.md Outdated Show resolved Hide resolved

Merge branch 'next' into patch-1

bdd58ae

github-actions bot removed the Stale label Nov 8, 2025

docs: switch NextJS sass sample to ESM

9415c36

docs: rewording of nextjs css modules snippet

666b568

Sidnioulz added ci:docs Run the CI jobs for documentation checks only. nextjs and removed needs triage labels Nov 10, 2025

Merge branch 'next' into patch-1

3f1fa49

github-actions bot added the Stale label Nov 23, 2025

jonniebigodes removed the Stale label Dec 3, 2025

Merge branch 'next' into patch-1

b4e6c87

jonniebigodes approved these changes Dec 15, 2025

View reviewed changes

jonniebigodes merged commit 8b8df12 into storybookjs:next Dec 15, 2025
9 of 10 checks passed

coderabbitai bot mentioned this pull request Dec 16, 2025

Docs: Fix broken links in framework pages #33369

Merged

8 tasks

gpoole deleted the patch-1 branch December 16, 2025 09:54

github-actions bot mentioned this pull request Dec 17, 2025

Release: Prerelease 10.2.0-alpha.7 #33336

Merged

18 tasks

Uh oh!

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

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

Uh oh!

Conversation

gpoole commented Jul 17, 2024 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Summary by CodeRabbit

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

Uh oh!

valentinpalkovic commented Jun 23, 2025

Uh oh!

Sidnioulz left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Sidnioulz Aug 14, 2025

Choose a reason for hiding this comment

Uh oh!

jonniebigodes Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

gpoole Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot commented Sep 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Suggested labels

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gpoole commented Sep 25, 2025

Uh oh!

Sidnioulz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nx-cloud bot commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jonniebigodes left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

gpoole commented Jul 17, 2024 •

edited by coderabbitai bot

Loading

Sidnioulz left a comment •

edited

Loading

coderabbitai bot commented Sep 25, 2025 •

edited

Loading

nx-cloud bot commented Nov 10, 2025 •

edited

Loading