DocsLink
Link
This link is highlighted if local path matches it's href value
Installation
Install Dependencies
npm i clsx tailwind-merge Create @/utils/cn.ts file
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Add color variables to TailwindCSS file
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}'
],
darkMode: 'class',
theme: {
extend: {
colors: {
secondary: 'var(--secondary)',
primary: 'var(--primary)'
}
}
}
}
export default config
Create color variables in globals.css file
.light body {
--primary: var(--neutral-800);
--secondary: var(--neutral-500);
}
.dark body {
--primary: white;
--secondary: var(--neutral-400);
}
@media (prefers-color-scheme: dark) {
:root {
--primary: white;
--secondary: var(--neutral-400);
}
}
