Skip to content

[Bug]: nativewind styles aren't shown in build mode #31165

@jtomaszewski

Description

@jtomaszewski

Describe the bug

  1. I've created a fresh expo app with nativewind — using npx create-expo-stack@latest --nativewind as described in nativewind docs.

  2. I've added storybook — using npm create storybook@latest as described in storybook docs.

  3. 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

No one assigned

    Labels

    Type

    No type

    Projects

    Status

    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions