# How to Modify the Global Styles in the ai-website-cloner-template

> Easily modify global styles in the ai-website-cloner-template by editing src/app/globals.css. Update CSS variables, Tailwind utilities, and dark mode for instant site-wide changes.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-06-30

---

**The ai-website-cloner-template stores all site-wide styles in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css), which is imported by the root layout at [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx), allowing you to change CSS variables, Tailwind utilities, and dark-mode themes to instantly update the entire application's appearance.**

The ai-website-cloner-template provides a centralized styling architecture built on Tailwind CSS v4 and CSS custom properties. Whether you need to adjust the color palette, typography, or dark-mode behavior, all global modifications flow through a single entry point. This guide explains exactly how to modify the global styles in the ai-website-cloner-template by editing the root stylesheet and its associated variables.

## Locating the Global Stylesheet Entry Point

The template wires global styles through the root layout component. In [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx), the stylesheet is imported at the top of the file:

```tsx
// src/app/layout.tsx
import "./globals.css";   // ← loads the global stylesheet

```

This single import ensures that every route in your Next.js application inherits the CSS custom properties and Tailwind directives defined in the global file.

## Anatomy of the globals.css File

The [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) file serves as the central configuration hub for the entire design system. It begins with Tailwind v4 imports and theming constructs:

```css
/* src/app/globals.css */
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

```

The file then defines the **CSS custom properties** (variables) that bridge Tailwind utilities to your design tokens:

```css
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* …additional token bridges… */
}

```

Following the theme bridge, the `:root` selector establishes the default light-mode palette using `oklch` color values, while the `.dark` class selector overrides these values for dark mode. Finally, the `@layer base` block applies foundational utilities to HTML elements.

## Key Modification Areas

When you modify the global styles in the ai-website-cloner-template, focus on these specific regions of [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css):

- **CSS Custom Properties**: Adjust variables like `--background`, `--primary`, and `--foreground` within the `:root` block to shift the entire color system. Changes here instantly propagate to any component using `bg-background` or `text-primary` utilities.

- **Dark-Mode Overrides**: Edit the `.dark` block to provide high-contrast or alternative palette values that activate automatically when the `dark` class is present on the `<html>` element.

- **Tailwind Base Layers**: Extend the `@layer base` directive to add global element resets or default typography rules that apply site-wide without requiring utility classes on every component.

- **Font Families**: Modify `--font-sans` and `--font-mono` values, or introduce new font variables like `--font-display`, then reference them in the base layer for headings or specific elements.

- **Radius Tokens**: Adjust the `--radius` variable and its derivatives (`--radius-sm`, `--radius-lg`) to uniformly change corner rounding across all components using `rounded-*` utilities.

## Step-by-Step Guide to Modifying Global Styles

Follow this sequence to safely update the global design tokens:

1. **Open [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css)** in your code editor.

2. **Locate the target CSS variable** in the `:root` block (e.g., `--primary`).

3. **Update the value** using `oklch()`, hex, rgb, or any valid CSS color format.

4. **Mirror the change** in the `.dark` block if the variable requires a dark-mode counterpart for contrast.

5. **Save the file**—Next.js hot-reloading will inject the new styles immediately without requiring a server restart.

No additional build configuration is necessary because Tailwind CSS v4 is already integrated via `postcss.config.mjs` and the implicit configuration supplied by Next.js 16.

## Practical Customization Examples

### Changing the Primary Accent Color

To rebrand the template with a teal accent, override the `--primary` variable in both light and dark contexts:

```css
/* src/app/globals.css */
:root {
  /* Replace default with teal */
  --primary: oklch(0.30 0.15 180);
}

.dark {
  /* Lighter teal for dark backgrounds */
  --primary: oklch(0.70 0.12 180);
}

```

### Adding a Custom Border Radius

Extend the design system with an extra-large radius token:

```css
/* src/app/globals.css */
:root {
  --radius-xl: calc(var(--radius) * 2);
}

@layer utilities {
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
}

```

Now apply it to components:

```tsx
// Example component usage
export default function Card() {
  return (
    <div className="bg-card p-6 rounded-xl shadow">
      Content with custom extra-large rounding
    </div>
  );
}

```

### Injecting a Custom Font Family

Add a display font for headings by defining a new variable and applying it in the base layer:

```css
/* src/app/globals.css */
:root {
  --font-display: "Playfair Display", serif;
}

@layer base {
  h1, h2, h3 {
    font-family: var(--font-display);
  }
}

```

## Summary

- The ai-website-cloner-template centralizes all global styling in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css), imported once in [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx).
- **CSS custom properties** defined in `:root` and `.dark` blocks control the color palette, typography, and spacing tokens used throughout the application.
- Modifying variables like `--background`, `--primary`, or `--radius` instantly updates all Tailwind utilities that reference those tokens.
- The `@layer base` directive allows you to set global element defaults without cluttering individual components.
- Tailwind v4 and PostCSS are pre-configured, so style changes reflect immediately via hot-reloading.

## Frequently Asked Questions

### Where is the global CSS file located in the ai-website-cloner-template?

The global CSS file is located at [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css). It is imported by the root layout file [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) (specifically at line 3), ensuring these styles apply to every page in the Next.js application.

### Do I need to restart the development server after editing globals.css?

No. The template uses Next.js with built-in hot-reloading for CSS. Any changes saved to [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) are injected instantly into the browser, allowing you to iterate on color variables and Tailwind utilities in real time.

### How do I add a dark-mode variant for a new color variable?

First, define your variable in the `:root` block for light mode. Then add a corresponding entry inside the `.dark` selector block with appropriate contrast values. The `@custom-variant dark` rule at the top of the file enables Tailwind to recognize the `.dark` class context automatically.

### Can I use standard hex colors instead of oklch in the global styles?

Yes. While the template defaults to `oklch()` for perceptual uniformity, you can replace any color value with hex, rgb(), hsl(), or any valid CSS color format. The CSS custom properties accept any color syntax that your target browsers support.