A TailwindCSS variant for class-based dark mode with CSS modules.

In popular frameworks like Svelte, stylesheets are scoped with CSS modules by default. Using @apply dark:text-white in a scoped stylesheet will produce incorrect CSS for the class-based dark mode on TailwindCSS.

tailwindcss-global-dark introduces a gdark variant that adds the :global modifier to the .dark class used by TailwindCSS.

<style lang="postcss">
  .incorrect {
    @apply dark:bg-red-400
    /* compiles to .dark.svelte-1847890 .correct.svelte-1847890 */
  }

  .correct {
    @apply gdark:bg-green-400;
    /* compiles to .dark .correct.svelte-1847890 */
  }
</style>

Installation

$ npm i tailwindcss-global-dark

Add the plugin to tailwind.config.cjs:

module.exports = {
  ...
  theme: { ... },
  plugins: [require('tailwindcss-global-dark')]
};