@danestves/tailwindcss-darkmode

Tailwindcss DarkMode

Tailwind CSS plugin that adds variants for DarkMode.

Installation

# npm
npm install @danestves/tailwindcss-darkmode --save-dev

# yarn
yarn add --dev @danestves/tailwindcss-darkmode

Add the plugin to the plugins array in your tailwind.config.js file.

module.exports = {
  // ...

  plugins: [
    // ...
    require('@danestves/tailwindcss-darkmode')()
  ]
};

Actually the function receive two parameters:

• prefix: default to dark.
• activatorClass: default to dark-mode.

So if you want to rename the activatorClass you can make it as simple as:

module.exports = {
  // ...

  plugins: [
    // ...
    require('@danestves/tailwindcss-darkmode')('dark', 'my-custom-activator-class')
  ]
};

Variants generated

Note: These variants are activated when either the html or body tag has the class dark-mode. But you can change it.

• dark
• dark:hover
• dark:focus
• dark:active
• dark:disabled
• dark:odd
• dark:even
• dark:group-hover
• dark:focus-within

<div class="bg-gray-100 dark:bg-gray-800 border-t-4 border-green-500">
  <nav class="flex flex-wrap justify-end items-center p-4">
    <a class="text-gray-700 hover:bg-gray-300 dark:hover:bg-transparent dark:focus:text-green-500" href="#">Text</a>
  </nav>
</div>

🚨 Dark variants must be enabled on each utility in your tailwind.config.js file. 🚨

variants: {
    backgroundColor: [
      "responsive",
      "hover",
      "focus",
      "dark",
      "dark:hover",
      "dark:focus"
    ],
    borderColor: [
      "responsive",
      "hover",
      "focus",
      "dark",
      "dark:hover",
      "dark:focus"
    ],
    textColor: [
      "responsive",
      "hover",
      "focus",
      "group-hover",
      "dark",
      "dark:hover",
      "dark:focus",
      "dark:group-hover",
      "focus-within",
      "dark:focus-within",
      "dark:odd",
      "dark:even",
      "dark:active",
      "dark:disabled"
    ],
    borderStyle: ["responsive", "dark"]
  }

You can check the full list of default variants in the Tailwind default config file.

Customize class name prefix for variants

dark is used as default prefix for the variants that are generated. It´s possible to change dark for whatever you want, just pass any string as a param. For example, with prefers-dark:

module.exports = {
  // ...

  plugins: [
    // ...
    require('tailwindcss-prefers-dark-mode')('prefers-dark')
  ]
};

And variants must be named with the new prefix:

variants: {
  textColor: [
    'responsive',
    'hover',
    'focus',
    'group-hover',
    'prefers-dark',
    'prefers-dark:hover',
    'prefers-dark:focus',
    'prefers-dark:group-hover',
    'focus-within',
    'prefers-dark:focus-within'
  ];
}