-
-
Notifications
You must be signed in to change notification settings - Fork 9.6k
Description
Describe the bug
-
I've created a fresh expo app with nativewind — using
npx create-expo-stack@latest --nativewind
as described in nativewind docs. -
I've added storybook — using
npm create storybook@latest
as described in storybook docs. -
I've configured storybook to be working with nativewind — as described in the above docs.
The bug: nativewind styles appear during storybook dev
command, but not during the storybook build
command.
More specifically, the styles seem to be placed in the CSS file that's built and loaded into the storybook preview; but the elements with tailwind classes such as bg-blue-500
don't have those classes, and so the tailwind styles do not appear.
I tried playing for 1-2h around it, using multiple options, configuring babel, reading through the whole internet - and for me the only way to make it work is switching back to webpack5 setup.
Do you have any idea what is missing in the vite/babel configuration on storybook's side? (As I guess the fault is somewhere there.)
Reproduction link
https://github.com/fullstackhouse/expo-nativewind-storybook-demo
Reproduction steps
git clone fullstackhouse/expo-nativewind-storybook-demo
cd expo-nativewind-storybook-demo
yarn build-storybook
npx http-server storybook-static
Open http://127.0.0.1:8080/?path=/docs/example-header--docs . The header should have blue background (as it does if you run yarn storybook
) — but it doesn't.
System
System:
OS: macOS 15.3.2
CPU: (8) arm64 Apple M1
Shell: 3.6.1 - /usr/local/bin/fish
Binaries:
Node: 22.13.0 - ~/.nodenv/versions/22.13.0/bin/node
Yarn: 1.22.22 - ~/.nodenv/versions/22.13.0/bin/yarn <----- active
npm: 11.3.0 - ~/.nodenv/versions/22.13.0/bin/npm
Browsers:
Chrome: 135.0.7049.96
Safari: 18.3.1
npmPackages:
@storybook/addon-essentials: ^8.6.12 => 8.6.12
@storybook/addon-interactions: ^8.6.12 => 8.6.12
@storybook/addon-onboarding: ^8.6.12 => 8.6.12
@storybook/blocks: ^8.6.12 => 8.6.12
@storybook/react: ^8.6.12 => 8.6.12
@storybook/react-native-web-vite: ^8.6.12 => 8.6.12
@storybook/test: ^8.6.12 => 8.6.12
eslint-plugin-storybook: ^0.12.0 => 0.12.0
storybook: ^8.6.12 => 8.6.12
Additional context
No response
Metadata
Metadata
Assignees
Type
Projects
Status