Next.js 15

Project Structure

Your Next.js project includes pre-configured color variables in the globals.css file located in the app directory.

Color Variables

All colors are defined as CSS custom properties in app/globals.css:

:root {
  --primary: /* Your primary color */;
  --secondary: /* Your secondary color */;
  --accent: /* Your accent color */;
  --text-on-primary: /* Text color for primary bg */;
  --text-on-secondary: /* Text color for secondary bg */;
  --text-on-accent: /* Text color for accent bg */;
}

Tailwind Configuration

Colors are automatically available in Tailwind CSS through the tailwind.config.ts file.

Using Colors in Components

Apply colors using Tailwind classes:

<div className="bg-primary text-text-on-primary">
  <h1>Primary Background</h1>
</div>

<button className="bg-accent text-text-on-accent">
  Call to Action
</button>

Server Components

All color variables work seamlessly with Next.js Server Components and Client Components.

Dark Mode Support

The template includes dark mode support. Colors automatically adjust based on the user's preference.