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

admin管理员组

文章数量:1384788

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/ponents/**/*.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/ponents/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'>
    ...

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/ponents/**/*.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/ponents/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'>
    ...

• javascript
• reactjs
• typescript
• next.js
• tailwind-css

Share Improve this question Follow asked Jan 28, 2021 at 11:54 Jarukit JintanasathirakulJarukit Jintanasathirakul 10111 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

In my case I use ts so I changed tailwind.config.TS and nothing happens then I add darkMode: 'class', to tailwind.config.JS. Somehow, it worked in js config.

I learned that TailwindCSS automatically removes the dark class from the bundled CSS if it is not used in any className attribute in JSX. To force TailwindCSS to bundle the dark class, I added the following to my tailwind.config.ts:

safelist: ['dark']

本文标签： javascripttailwind dark is not working on nextjsStack Overflow