Tailwind dark：没有在 next.js 上工作吗？

Question

我正在使用自定义样板 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 '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 />
     ...

• 配置文件.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']
    },
...

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

谢谢