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;

.dark {
	color-scheme: dark;

	--color-black: white;
	--color-white: black;

	--color-red-50: --color-red-950;
	--color-red-100: --color-red-900;
        ...
	--color-red-900: --color-red-100;
	--color-red-950: --color-red-50;
}

usage

npm install tailwind-color-invert

in your css file that imports tailwindcss

@import "tailwindcss";

+ @import "tailwind-color-invert";

@custom-variant dark (&:where(.dark, .dark *));

somewhere in your jsx

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

invert your own color palette

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

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

only provide ESM format