我现在在开发一个UI组件库，用Nativewind来管理样式，同时搭配Storybook、React Native Web和Vite做组件预览，但碰到了个棘手的问题——所有Nativewind的样式都完全不生效，不管是自定义的Tailwind CSS变量还是默认样式都没效果。但特别奇怪的是，一模一样的配置在Expo Web上运行完全正常，一到Storybook这里就掉链子了。

下面是我的相关配置文件，麻烦帮忙看看哪里出问题了：

1. tailwind.config.js #

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  content: [
    "./.storybook/**/*.{js,jsx,ts,tsx}",
    "../registry/**/*.{js,jsx,ts,tsx}",
    "./.stories/**/*.{js,jsx,ts,tsx}",
  ],
  // eslint-disable-next-line
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors: {
        border: "var(--border)",
        input: "var(--input)",
        ring: "var(--ring)",
        background: "var(--background)",
        foreground: "var(--foreground)",
        primary: {
          DEFAULT: "var(--primary)",
          foreground: "var(--primary-foreground)",
        },
        secondary: {
          DEFAULT: "var(--secondary)",
          foreground: "var(--secondary-foreground)",
        },
        destructive: {
          DEFAULT: "var(--destructive)",
          foreground: "var(--destructive-foreground)",
        },
        success: {
          DEFAULT: "var(--success)",
          foreground: "var(--success-foreground)",
        },
        warning: {
          DEFAULT: "var(--warning)",
          foreground: "var(--warning-foreground)",
        },
        muted: {
          DEFAULT: "var(--muted)",
          foreground: "var(--muted-foreground)",
        },
        accent: {
          DEFAULT: "var(--accent)",
          foreground: "var(--accent-foreground)",
        },
        popover: {
          DEFAULT: "var(--popover)",
          foreground: "var(--popover-foreground)",
        },
        card: {
          DEFAULT: "var(--card)",
          foreground: "var(--card-foreground)",
        },
        sidebar: {
          DEFAULT: "var(--sidebar-background)",
          foreground: "var(--sidebar-foreground)",
          primary: "var(--sidebar-primary)",
          "primary-foreground": "var(--sidebar-primary-foreground)",
          accent: "var(--sidebar-accent)",
          "accent-foreground": "var(--sidebar-accent-foreground)",
          border: "var(--sidebar-border)",
          ring: "var(--sidebar-ring)",
        },
      },
      borderRadius: {
        xl: "calc(var(--radius) + 4px)",
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
        full: "100%",
      },
    },
  },
  plugins: [],
};

2. global.css #

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --radius: 0.625rem;
    --background: #ffffff;
    --foreground: #252525;
    --card: #ffffff;
    --card-foreground: #252525;
    --popover: #ffffff;
    --popover-foreground: #252525;
    --primary: #343434;
    --primary-foreground: #fbfbfb;
    --secondary: #f7f7f7;
    --secondary-foreground: #343434;
    --success: #22c55e;
    --warning: #eab308;
    --muted: #f7f7f7;
    --muted-foreground: #8e8e8e;
    --accent: #f7f7f7;
    --accent-foreground: #343434;
    --destructive: #ef4444;
    --border: #ebebeb;
    --input: #ebebeb;
    --ring: #b5b5b5;
    --chart-1: #f97316;
    --chart-2: #06b6d4;
    --chart-3: #3b82f6;
    --chart-4: #84cc16;
    --chart-5: #f59e0b;
    --sidebar: #fbfbfb;
    --sidebar-foreground: #252525;
    --sidebar-primary: #343434;
    --sidebar-primary-foreground: #fbfbfb;
    --sidebar-accent: #f7f7f7;
    --sidebar-accent-foreground: #343434;
    --sidebar-border: #ebebeb;
    --sidebar-ring: #b5b5b5;
  }

  .dark:root {
    --background: #252525;
    --foreground: #fbfbfb;
    --card: #343434;
    --card-foreground: #fbfbfb;
    --popover: #444444;
    --popover-foreground: #fbfbfb;
    --primary: #ebebeb;
    --primary-foreground: #343434;
    --secondary: #444444;
    --secondary-foreground: #fbfbfb;
    --muted: #444444;
    --muted-foreground: #b5b5b5;
    --accent: #5f5f5f;
    --accent-foreground: #fbfbfb;
    --destructive: #dc2626;
    --success: #16a34a;
    --warning: #ca8a04;
    --border: rgba(255, 255, 255, 0.1);
    --input: rgba(255, 255, 255, 0.15);
    --ring: #8e8e8e;
    --chart-1: #8b5cf6;
    --chart-2: #10b981;
    --chart-3: #f59e0b;
    --chart-4: #ec4899;
    --chart-5: #dc2626;
    --sidebar: #343434;
    --sidebar-foreground: #fbfbfb;
    --sidebar-primary: #8b5cf6;
    --sidebar-primary-foreground: #fbfbfb;
    --sidebar-accent: #444444;
    --sidebar-accent-foreground: #fbfbfb;
    --sidebar-border: rgba(255, 255, 255, 0.1);
    --sidebar-ring: #707070;
  }
}

3. Storybook配置文件（.storybook/main.js） #

import { join, dirname } from "path";
import type { StorybookConfig } from "@storybook/react-native-web-vite";
import { createRequire } from "module";
import { createBuildStoriesPlugin } from "../plugins/buildStories";

const require = createRequire(import.meta.url);

/**
 * 用于解析包的绝对路径，适配Yarn PnP或 monorepo 场景
 */
function getAbsolutePath(value) {
  return dirname(require.resolve(join(value, "package.json")));
}

const config: StorybookConfig = {
  stories: [
    "../.stories/**/*.mdx",
    "../.stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    getAbsolutePath("@storybook/addon-onboarding"),
    getAbsolutePath("@storybook/addon-links"),
    getAbsolutePath("@storybook/addon-essentials"),
    getAbsolutePath("@storybook/addon-interactions"),
  ],
  framework: {
    name: getAbsolutePath("@storybook/react-native-web-vite"),
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  viteFinal: async (config) => {
    // 自定义的构建插件，应该和样式问题无关？
    config.plugins?.push(createBuildStoriesPlugin());
    return config;
  },
};
export default config;

目前我自己排查下来，感觉大概率是Storybook的Vite配置没正确集成Nativewind的编译流程，导致Tailwind类被直接移除了。有没有大佬遇到过类似的问题，给点解决思路或者排查方向呀？

内容来源于stack exchange