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

You can fully customize the visual appearance of your cloned website by editing the 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, 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 functions as the root stylesheet imported by 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:

@tailwind base;
@tailwind components;
@tailwind utilities;

Because the project uses Tailwind CSS v4, any custom classes you write in 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, 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:

/* 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 handles immediate visual overrides, deeper design system changes require editing 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: Define custom design tokens (colors, fonts, spacing)
• src/app/globals.css: Apply immediate global overrides and custom CSS rules

Summary

• 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 with modifications to 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 imports 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 reflect immediately in the browser during development, though modifications to 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 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 to create reusable utility classes.

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