小编Jar*_*kul的帖子

我正在使用自定义样板 next.js(10.0.5) 与 preact(10.5.12)、typescript(4.1.3) 和 tailwind(2.0.2) 并尝试从 tailwind 实现暗模式功能。

我已经按照下一个主题指南添加了黑暗模式，但由于某种原因它不起作用。

问题： 当我单击更改主题按钮时，类确实发生了变化，而且我有一个元素，其类包含“dark:text-gray-100”，但是当属性更改时，显示颜色没有更改。

预期行为：包含“dark:”作为类的元素应该更改样式。

这是我的代码：

• tailwind.config.js

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  darkMode: 'class',
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'src/components/**/*.tsx',
      'src/pages/**/*tsx'
    ]
  },
  ...

• _app.tsx

import React from 'react'
import { ThemeProvider } from 'next-themes'

const App = ({Component, pageProps}) => {
  return (
    <ThemeProvider attribute="class">
        <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default App

• 索引.tsx

import React from …