Javascript tailwind dark:在next.js上不工作吗？

我正在使用自定义样板文件next.js（10.0.5）和preact（10.5.12）、typescript（4.1.3）以及tailwind（2.0.2），并尝试从tailwind中实现暗模式特性

我已经按照指南添加了暗模式，但由于某些原因，它不起作用

问题： 当我点击change theme按钮时，该类确实发生了变化。我还有一个元素，它的类包括“dark:text-gray-100”，但当属性发生变化时，显示颜色没有变化

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

这是我的密码：

• tailwind.config.js

• _app.tsx

从“React”导入React
从“下一个主题”导入{ThemeProvider}
常量应用=（{Component，pageProps}）=>{
返回(
)
}
导出默认应用程序

• index.tsx

从“React”导入React
从“下一个主题”导入{useTheme}
从“src/components/main/Profile”导入配置文件
常量Home:React.FC=（）=>{
const{theme，setTheme}=useTheme（）
返回(
{
setTheme（theme=='light'？'dark'：'light'）
}}
>
改变主题
...

• profile.tsx

从“React”导入React
常量配置文件：React.FC=（）=>{
返回(
...

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

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

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

---

谢谢你

你真的不需要像2021年的next themes那样使用库，tailwind将满足黑暗模式的所有要求

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

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

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

export default App

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 />
     ...

import React from 'react'

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

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