babel-plugin-tailwind-dark v1.3.2

babel-plugin-tailwind-dark

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

Requirements

• tailwind 2
• React

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

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>