babel-plugin-tailwind-dark

A Babel plugin to add custom dark class when compiling your code using Babel.

Usage

Install the plugin first:

npm install babel-plugin-tailwind-dark --save-dev

Add plugin in your .babelrc with the custom dark option:

{
  "plugins": [
    ["tailwind-dark", {
      "dark": {
        "bg-white": "bg-gray-800",
        "text-gray-900": "text-white"
      }
    }]
  ]
}

Enable dark mode in tailwind

Example

Example repo

Transforms

<div className="bg-white">
  <h1 className="text-gray-900">Dark mode is here!</h1>
</div>

to

<div className="bg-white dark:bg-gray-800">
  <h1 className="text-gray-900 dark:text-white">Dark mode is here!</h1>
</div>

Production

If purge is enabled, you need add dark classnames to the safelist

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    options: {
      safelist: ['dark:bg-gray-800', 'dark:text-white'],
    }
  },
}

Requirements

• tailwind 2
• React