tailwindcss-global-dark

tailwindcss-global-dark copied to clipboard

A TailwindCSS variant for class-based dark mode with Svelte's scoped stylesheets and CSS modules.

If you've ever tried to use TailwindCSS dark mode with Svelte and received an Unused CSS selector ".dark ..." error, this plugin is for you.

Motivations

TailwindCSS uses a global .dark class for its manual dark mode, and the dark: selector simply adds .dark as a parent selector. When the .dark selector gets scoped, it breaks manual dark mode functionality.

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

Usage

Simply replace dark: with gdark:

<style lang="postcss">
  .incorrect {
    @apply dark:bg-red-400;
    /* transpiles to - .dark .incorrect {...} */
  }

  .correct {
    @apply gdark:bg-green-400;
    /* transpiles to - :global(.dark) .correct {...} */
  }
</style>

Installation

$ npm i tailwindcss-global-dark

Add the plugin to tailwind.config.cjs:

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