Override any of the default colors by defining new theme variables with the same name:
// style.css
@import "tailwindcss";
@theme {
--color-zinc-50: oklch(0.984 0.003 247.858);
--color-zinc-100: oklch(0.968 0.007 247.896);
--color-zinc-300: oklch(0.869 0.022 252.894);
--color-zinc-400: oklch(0.704 0.04 256.788);
--color-zinc-500: oklch(0.554 0.046 257.417);
--color-zinc-600: oklch(0.446 0.043 257.281);
--color-zinc-700: oklch(0.372 0.044 257.287);
--color-zinc-800: oklch(0.279 0.041 260.031);
--color-zinc-900: oklch(0.208 0.042 265.755);
--color-zinc-950: oklch(0.129 0.042 264.695);
//....
}
// app/layout.tsx
import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}