https://github.com/tmkx/tailwind-bicolor

Auto handle tailwind dark mode color
https://github.com/tmkx/tailwind-bicolor

dark dark-mode dark-theme tailwind tailwindcss tailwindcss-plugin

Last synced: 8 days ago
JSON representation

Auto handle tailwind dark mode color

• Host: GitHub
• URL: https://github.com/tmkx/tailwind-bicolor
• Owner: tmkx
• Created: 2021-12-12T14:47:12.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-30T14:39:32.000Z (about 1 month ago)
• Last Synced: 2024-10-14T02:49:02.242Z (24 days ago)
• Topics: dark, dark-mode, dark-theme, tailwind, tailwindcss, tailwindcss-plugin
• Language: TypeScript
• Homepage: https://bicolor.fancier.dev
• Size: 159 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# tailwind-bicolor

Auto handle tailwind dark mode color, support `class` and `media`.

```html





```


> 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:

```html



```


will generate:

```css

.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

```javascript

// 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