Dark mode does not work with CSS modules

[bsg3452gwd]

I am using Tailwind with CSS modules in Nuxt and it works great — however, dark mode does not work with CSS modules.

If I create a new CSS class and use @apply with say dark:text-gray-200, the dark variant will not be show up. It is as if I did not include a dark variant.

Is there something that I am missing? I would love to be able to use Tailwind dark variants with CSS modules. Thank you!

[mehdi-mashayekhi]

Help

[yayvery]

@webtinax @bsg3452gwd here is a solution if using postcss-modules:

import stringHash from 'string-hash'

// put this in your postcss-modules config
generateScopedName: (name, filename, css) => {
        if (name === 'dark') return 'dark'
        const i = css.indexOf(`.${name}`)
        const lineNumber = css.substr(0, i).split(/[\r\n]/).length
        const hash = stringHash(css).toString(36).substr(0, 5)

        return `_${name}_${hash}_${lineNumber}`
      }

This whitelists the dark class from having its name changed.

If using vite, this goes in vite.config.js:

{
  css: {
    modules: {
      generateScopedName: (name, filename, css) => {
        if (name === 'dark') return 'dark'
        const i = css.indexOf(`.${name}`)
        const lineNumber = css.substr(0, i).split(/[\r\n]/).length
        const hash = stringHash(css).toString(36).substr(0, 5)

        return `_${name}_${hash}_${lineNumber}`
      }
    }
  }
}

[christiandp7]

How can I implement this solution to a Next.js project?

[KyleRoss]

@christiandp7 I went down a slightly different path, but I was able to get this working 100% in Next v12. It may work in older versions of Next.js, but I haven't tested it.

next.config.js

module.exports = {
  webpack: config => {
    // Find the base rule that contains nested rules (which contains css-loader)
    const rules = config.module.rules.find(r => !!r.oneOf);

    // Interate over the found rules
    rules.oneOf.forEach(loaders => {
      // Focus on the the loaders that have an array of `use` statements
      if(Array.isArray(loaders.use)) {
        // Iterate over each of the loaders
        loaders.use.forEach(l => {
          // Only focus on loaders that are an object and have a `loader` property set to `css-loader`
          if(typeof l !== 'string' && typeof l.loader === 'string' && /(?<!post)css-loader/.test(l.loader)) {
            // If there are no module options originally set, skip this loader
            if(!l.options.modules) return;
            const { getLocalIdent, ...others } = l.options.modules;

            // Create a new options object with the `getLocalIdent` property set to a function
            l.options = {
              ...l.options,
              modules: {
                ...others,
                getLocalIdent: (ctx, localIdentName, localName) => {
                  // If the class name is `dark`, return it instead of hashing it
                  if(localName === 'dark') return localName;
                  // Otherwise, call the original function and return the value
                  return getLocalIdent(ctx, localIdentName, localName);
                }
              }
            };
          }
        });
      }
    });

    return config;
  }
};

[CathrynHowe]

I know of 3 ways, css variables, conditional classes in components and with a framework like styled components. Not sure which one to choose. I feel like css variables would allow me to write less code because it takes one action to toggle everything, instead of checking for theme in every component.

[mattiaz9]

For those who use gatsby this is how I managed to fix it in gatsby-config.js:

{
  resolve: `gatsby-plugin-sass`,
  options: {
    cssLoaderOptions: {
      modules: {
        namedExport: false,
        getLocalIdent: (context, localIdentName, localName, options) => {
          if (localName === "dark") return "dark"

          const basename = path.basename(context.resourcePath).replace(/\.module\.scss/, "")
          const hash = stringHash(localName).toString(36).substr(0, 5)

          return process.env.NODE_ENV === "production"
            ? `_${basename}_${hash}`
            : `_${basename}_${localName}_${hash}`
        }
      },
    },
  },
},

[tiarebalbi]

This still happening today, anyone looking at this problem? I'm facing this issue when running with create-react-app and storybook.

[jon-peel]

This is the last message here, and been a while now.
Did you come up with a solution?

[viowins]

How can i use next.js v13
my config file

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    fontLoaders: [
      { loader: '@next/font/google', options: { subsets: ['latin'] } },
    ],
    
  },
}

module.exports = nextConfig

[aantthony]

I was having this issue. Solved it by using an attribute rather than the "dark" class name.

As shown here:
https://tailwindcss.com/docs/dark-mode#customizing-the-class-name

module.exports = {
  darkMode: ['class', '[data-mode="dark"]'],
  // ...
}

CSS modules compilation changes the class names but it doesn't change attributes, so those settings work fine.

[quoctienkt]

Great, finally I found how it works :D

[ccatto]

Making module.css dark variant mode work with Next:

This is what is currently working for me in Next.js v15 which might be helpful for others:

• update our component
• update module with 2 styles one dark

// component.tsx

import styles from '@styles/layout.module.css';
import { useTheme } from 'next-themes';

export default function Page() {
  const { resolvedTheme } = useTheme();
  
    <div className={`${styles.testCatto} ${resolvedTheme === 'dark' ? styles.dark : ''}`}>

// layout.module.css

.testCatto {
  @apply bg-green-500;
}
.dark.testCatto {
  @apply bg-orange-500;
}

[ccatto]

please note this is to make it work with modules.css assuming we already have all the regular dark mode setup which has quite a bit of documentation out there; Hope this helps!