1

在深色背景上使用 Tailwind 散文会使文本看起来太暗而无需手动配置

TLDR；如何让散文在深色背景上工作？

我有一个使用 Wordpress 运行 Sage 10 的站点，其中我使用 TailwindCSS (v3.0.18) 作为基本样式。该页面不处于暗模式，也不应该处于暗模式。但是我有一个页脚，它有一个深色背景，这在网站中很常见。我的问题是prose我添加到它的类会显示文本（等）很暗，不可读。我也想prose在深色背景上使用。prose-invert似乎不起作用。我不确定它是否只适用于dark:prose-invert？

我可以手动更改页脚中的所有元素，但如果 Tailwind 有一种无需手工劳动的方式来处理这种情况，我会更喜欢。

在图像中，您可以看到左侧部分prose变暗并最终变暗。正确的部分没有并且一直看起来应该是这样，但是缺少尺寸和所有花哨的东西。

在此处输入图像描述

此时我tailwind.conf.js的设置非常简约：

const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    // WP default php files
    './index.php',
    './functions.php',
    './author.php',
    './archive.php',
    './home.php',
    './front-page.php',
    './404.php',
    './search.php',
    './category.php',
    './page.php',
    './single.php',
    './taxonomy.php',
    // END WP default php files
    './resources/views/**/*.php',
    './resources/scripts/**/*.js',
  ],
  theme: {
    extend: {
      colors: {
        primary: colors.indigo,
        secondary: colors.yellow,
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

我使用 composer 将所有内容编译到一个 CSS 文件中，因此 Tailwind JIT 正在使用并扫描所有正确的文件，如您所见。

以下是编译后的 HTML 的一个非常小的示例（删除了很​​多东西，仅用于演示目的）：

<footer class="footer bg-stone-800 p-8">
  <div class="container mx-auto">
    <div class="sm:flex gap-x-3 mb-4">                      
      <div class="prose-invert footer__item sm:w-1/4 h-auto">
        <section class="widget block-15 widget_block">
          <h2>Text</h2>
        </section>          
      </div>
    </div>
  </div>
</footer>

4

0 回答 0