# How to Customize the Appearance of the Cloned Website Using globals.css

> Customize your cloned website appearance by editing globals.css. This central stylesheet lets you control global styles and import Tailwind CSS for a unique look.

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

---

**You can fully customize the visual appearance of your cloned website by editing the [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) file, which serves as the central stylesheet that imports Tailwind CSS and applies global styles across all pages.**

The JCodesMore/ai-website-cloner-template uses a standard Next.js architecture where global styling is centralized in a single CSS file. By modifying [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css), you can override default Tailwind utilities, inject custom CSS rules, and establish site-wide branding elements that apply to every page of your cloned website.

## What is globals.css and Where to Find It

In the repository structure, [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) functions as the root stylesheet imported by [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx). This file is processed by the Next.js build pipeline and serves as the entry point for all global styling decisions.

The file currently imports Tailwind CSS directives and establishes base styling for the `html` and `body` elements:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

```

Because the project uses **Tailwind CSS v4**, any custom classes you write in [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css) will be processed by Tailwind’s JIT compiler. This allows you to keep the stylesheet minimal while still leveraging the full power of Tailwind’s utility system.

## Key Customization Techniques

When you customize the appearance of the cloned website using [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css), you have three primary approaches available:

### Override Default Tailwind Utilities

You can redefine base styles that affect the entire document structure. This is useful for changing default font families, background colors, or spacing scales that differ from Tailwind's defaults.

### Add Custom CSS Rules

For branding elements that must persist across all pages—such as site-wide header backgrounds, custom link colors, or global transition effects—you can write standard CSS rules that complement Tailwind's utility classes.

### Inject Additional Imports

The file supports additional `@import` statements for third-party CSS libraries or custom design tokens. These imports are processed by the Next.js build pipeline and integrated into the final stylesheet.

## Practical Implementation Examples

Here is how to implement common customization scenarios in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css):

```css
/* src/app/globals.css */

/* Existing Tailwind import (keep this) */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ------------------------------------------------------------------
   Custom global styles – add your branding here
------------------------------------------------------------------ */

/* Example: change the default font for the whole site */
html {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Example: set a site-wide background color */
body {
  @apply bg-gray-50;
}

/* Example: customize link appearance globally */
a {
  @apply text-primary-600 underline;
}
a:hover {
  @apply text-primary-800;
}

/* Example: add smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Example: global container width utility */
.container {
  @apply max-w-7xl mx-auto px-4;
}

```

## Deep Customization with tailwind.config.ts

While [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css) handles immediate visual overrides, deeper design system changes require editing [`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tailwind.config.ts) at the project root. This configuration file controls custom colors, spacing scales, and typography tokens that Tailwind utilities reference.

For comprehensive branding changes, you should edit both files:

- **[`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tailwind.config.ts)**: Define custom design tokens (colors, fonts, spacing)
- **[`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css)**: Apply immediate global overrides and custom CSS rules

## Summary

- **[`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css)** is the central stylesheet imported by the root layout and applied to every page of your cloned website.
- The file processes **Tailwind CSS v4** directives through the JIT compiler, allowing utility classes and custom CSS to coexist.
- You can override base HTML styles, create global component rules, and import third-party libraries to customize the appearance.
- For design-system level changes, pair edits to [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css) with modifications to [`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tailwind.config.ts).

## Frequently Asked Questions

### Can I use standard CSS without Tailwind in globals.css?

Yes. While the file imports Tailwind directives, you can write standard CSS rules alongside them. The Next.js build pipeline processes both Tailwind utilities and custom CSS rules, allowing you to mix approaches based on your needs.

### Will changes to globals.css affect all pages of the cloned website?

Yes. Because [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) imports [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css) at the root level, every page in the application inherits these styles. This ensures consistent branding and layout behavior across the entire site.

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

No. Next.js features hot module replacement (HMR) for CSS files. Changes to [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css) reflect immediately in the browser during development, though modifications to [`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tailwind.config.ts) may require a server restart to regenerate utility classes.

### How do I add custom fonts to the cloned website?

Import the font in [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css) using an `@import` statement or `<link>` tag in the layout, then apply it to the `html` or `body` selector. For Tailwind integration, extend the `fontFamily` theme in [`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tailwind.config.ts) to create reusable utility classes.