omarkhatibco / tailwindcss-darkmode

Tailwind CSS plugin that adds variants for 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('tailwindcss-darkmode')()
  ]
};

Variants generated

Note: This variants are activated when the html or body has the class dark-mode.

• 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 Tailwind default config file.

Customize class name prefix for variants

dark is used as default prefix for variants generated. It´s possible to change dark for whatever you want, just pass any string as 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'
  ]
}