tailwind-color-invert

a tailwind dark theme by inverting Tailwind intrinsic color palette .
designed for tailwindcss v4, similar to nightwind

see demo

what it does

provides a css file that simplely invert shades and black/white, other colors will preserve as is;

1.dark {
2	color-scheme: dark;
3
4	--color-black: white;
5	--color-white: black;
6
7	--color-red-50: --color-red-950;
8	--color-red-100: --color-red-900;
9        ...
10	--color-red-900: --color-red-100;
11	--color-red-950: --color-red-50;
12}
13

usage

1npm install tailwind-color-invert

in your css file that imports tailwindcss

1@import "tailwindcss";
2
3+ @import "tailwind-color-invert";
4
5@custom-variant dark (&:where(.dark, .dark *));
6

somewhere in your jsx

1document.documentElement.classList.toggle("dark");

invert your own color palette

the invert function also exported so you can use it invert your color palette;

1import invert from "tailwind-color-invert/invert";
2invert();

only provide ESM format