CODEWITHSUNDEEP
javascriptreactjstypescriptnext.jstailwind-css
Jarukit Jintanasathirakul
Jarukit Jintanasathirakul

Reputation: 101

tailwind dark: is not working on next.js?

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:

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  darkMode: 'class',
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'src/components/**/*.tsx',
      'src/pages/**/*tsx'
    ]
  },
  ...


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

Upvotes: 7

Views: 4871

Answers (3)

Kevin H.
Kevin H.

Reputation: 130

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']

Upvotes: 0

Murat Efe Doğan
Murat Efe Doğan

Reputation: 1

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.

Upvotes: 0

Jarukit Jintanasathirakul
Jarukit Jintanasathirakul

Reputation: 101

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

Upvotes: 3

Related Questions