javascript - tailwind dark: is not working on next.js?

Question

I'm using custom boilerplate next.js(10.0.5) with preact(10.5.12), typescript(4.1.3) and tailwind(2.0.2) and trying to implement darkmode feature from tailwind.

I've followed the next-themes guildline to add the darkmode but it is not working for some reason.

Problem: the class did change when I click on the change theme button also I've an element which its class included "dark:text-gray-100" but when the attribute changes, the display color didn't change.

Expected Behavior: the element that includes "dark:" as a class should change the styling.

Here's my code:

• 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'>
    ...

question from:https://stackoverflow.com/questions/65936616/tailwind-dark-is-not-working-on-next-js

Answer 1

I did solve my problem by look into my custom tailwind.config.js.

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

You should enable the utility that you want to work on.

Thank you