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

The ai-website-cloner-template stores all site-wide styles in src/app/globals.css, which is imported by the root layout at 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, the stylesheet is imported at the top of the file:

// 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 file serves as the central configuration hub for the entire design system. It begins with Tailwind v4 imports and theming constructs:

/* 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:

@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:

• 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 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:

/* 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:

/* 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:

// 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:

/* 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, imported once in 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. It is imported by the root layout file 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}