逆风黑暗: next.js不起作用吗？

Question

我正在使用自定义样板next.js(10.0.5)和preact(10.5.12)、类型记录(4.1.3)和顺风(2.0.2)，并试图从顺风实现暗模式特性。

我已经跟随的下一个主题行会添加黑暗模式，但由于某些原因，它不起作用。

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

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

这是我的密码：

• 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

• index.tsx

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

import Profile from 'src/components/main/profile'

const Home: React.FC = () => {
  const { theme, setTheme } = useTheme()
  return (
    <React.Fragment>
      <button
          className="mt-16 px-4 py-2 text-white dark:text-black bg-black dark:bg-white font-semibold rounded-md"
          onClick={() => {
            setTheme(theme === 'light' ? 'dark' : 'light')
          }}
        >
          Change Theme
        </button>
      <Profile />
     ...

• profile.tsx

import React from 'react'

const Profile: React.FC = () => {
  return (
    <section className='text-gray-700 dark:text-gray-100 body-font'>
    ...

Answer 1

我确实通过查看我的自定义tailwind.config.js.来解决我的问题

variants: {
    extend: {
      backgroundColor: ['dark'],
      textColor: ['dark']
    },
...

您应该启用要使用的实用程序。

谢谢

Answer 2

在2021年，你并不需要使用类似下一个主题的库，顺风将涵盖黑暗模式的所有需求。

查看这个漂亮的youtube视频资源，以获得更详细的解释。

https://www.youtube.com/watch?v=umm5pLv0EQw