Question

所以我正在为我的 svelte + tailwind 应用程序使用故事书，我现在正在努力确保我可以切换黑暗模式。

所以对于我的 tailwind.config.js，我添加了这个

module.exports = {
  darkMode: "class",

我把这个插件安装到了故事书上 https://github.com/hipstersmoothie/storybook-dark-mode

使用此配置 .storybook/preview.js

export const parameters = {
  darkMode: {
    darkClass: "dark",
    stylePreview: false,
  },

通过查看 storybook iframe 的 DOM，我可以看到“dark”应用于正文。但是当我用这个 HTML 创建一个组件时

<div class="inline">
  <div class="w-8 h-8 bg-blue-500 dark:bg-green-500" />
</div>

盒子总是蓝色的。所以我想可能是 purgecss 删除了它，所以我在它的选项中添加了 safelist: ["dark"] 但没有任何运气。

为了让事情变得更复杂，我测试了这个组件

<div class="inline">
  <div class="w-8 h-8 bg-blue-500 dark:bg-green-500" />
</div>
<div class="inline dark">
  <div class="w-8 h-8 bg-blue-500 dark:bg-green-500" />
</div>

令我惊讶的是，其中一个盒子变成了绿色。

老实说，我不完全确定这是因为苗条、故事书、顺风还是暗模式故事书插件。

但是如果有人看到类似的东西，我真的很感激

Answer 1

您可以尝试在观看故事书时忽略 if (dp[i][j] = (arr[i] <= j){ (dp[i-1][j] || dp[i-1][j-arr[i]]); }else{ dp[i - 1][j]; }。

我不确定您的确切设置，但就我而言，我在 purgecss 中添加了条件以使故事书正常工作：

postcss.config.js

我的 const isProduction = !process.env.ROLLUP_WATCH && !process.env.LIVERELOAD && process.env.NODE_ENV !== 'development' module.exports = { plugins: [ require('tailwindcss'), ...(isProduction ? [purgecss] : []) ] }; 包含以下内容：

.storybook/preview.js

此后唯一仍然不起作用的是暗模式下的白色文本，因此我不得不将 export const parameters = { darkMode: { stylePreview: true, darkClass: 'dark', lightClass: 'light', } } 添加到我的 css 中。

Answer 2

我也遇到了这个问题，但这是因为我在 vc- 文件中定义了前缀 tailwind.config.js。

当我配置插件 https://github.com/hipstersmoothie/storybook-dark-mode 时，我在 dark 中使用了类 vc-dark 而不是 .storybook/preview.js：

export const parameters = {
  darkMode: {
    dark: { ...themes.dark },
    light: { ...themes.light },
    darkClass: 'dark',
    stylePreview: true
  }
}

应该

export const parameters = {
  darkMode: {
    dark: { ...themes.dark },
    light: { ...themes.light },
    darkClass: 'vc-dark',
    stylePreview: true
  }
}

不确定您 (OP) 是否在您的 tailwind.config.js 文件中定义了前缀，但如果其他人遇到同样的问题，则需要注意这一点。

即使有前缀，您仍然可以正常使用 dark 变体，只是在变体后引用类名时不要忘记使用前缀：

<div class="vc-bg-blue-500 dark:vc-bg-green-500" />

故事书暗模式不太好

2 个答案: