tailwind-bicolor

Auto handle tailwind dark color.

Usage no npm install needed!

<script type="module">
  import tailwindBicolor from 'https://cdn.skypack.dev/tailwind-bicolor';
</script>

README

tailwind-bicolor

Auto handle tailwind dark color.

<div class="bg-white dark:bg-black"></div>
<!-- Replace with below ↓↓↓ -->
<div class="bi:bg-white"></div>

Tested in tailwind 3.x only.

Features

  • bg-white to bg-black
  • bg-slate-50 to bg-slate-900
  • bg-slate-100 to bg-slate-800
  • bg-slate-200 to bg-slate-700
  • bg-slate-300/40 to bg-slate-600/40
  • and so on...

For example:

<div class="bi:bg-green-400"></div>

will generate:

.bi\:bg-green-400 {
  --tw-bg-opacity: 1;
  /* green-400 */
  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}
.dark .bi\:bg-green-400 {
  /* green-500 */
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

Usage

// tailwind.config.js
const { bicolor } = require('tailwind-bicolor');

module.exports = {
  // ...
  plugins: [bicolor()],
};

prefix support list:

  • bg (background-color)
  • text (color)
  • decoration (text-decoration-color)
  • border (border-color)
  • border-x, border-y, border-t, border-r, border-b, border-l
  • outline (outline-color)
  • accent (accent-color)
  • caret (caret-color)
  • fill
  • stroke
  • shadow
  • ring, ring-offset
  • divide