white c letter with a black background

constt

Realtime Colors Tailwind V4 Export

How to change the export format of realtime colors to make it work in tailwind v4

Tags:

realtimecolors

colors

tailwind

format

To Change the Format you need to click on the Export Button on the Realtime Colors Website and click on custom code. Then just paste this in

@theme {
    /* Light Mode */
    --color-text: ${text.oklch};
	--color-bg: ${bg.oklch};
	--color-primary: ${primary.oklch};
	--color-secondary: ${secondary.oklch};
	--color-accent: ${accent.oklch};

    /* Dark Mode */
	--color-dText: ${textD.oklch};
	--color-dBg: ${bgD.oklch};
	--color-dPrimary: ${primaryD.oklch};
	--color-dSecondary: ${secondaryD.oklch};
	--color-dAccent: ${accentD.oklch};
}

You may need to fix the formatting of the tabs/spaces in your own editor.