Custom color, fonts

1- Custom colors

The project uses Tailwind CSS 4 color scheme. So you can easily customize the colors

Please check this guide for a better view - https://tailwindcss.com/docs/colors

How to custom color?

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);
  //....
}

2- Custom fonts

The template uses Next.js Google fonts, so please read this tutorial, which will help you to customize the font - https://nextjs.org/docs/app/getting-started/images-and-fonts#optimizing-fonts

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

PreviousInstallation NextCSS

Last updated 27 days ago

Was this helpful?