# How CSS Is Generated and Adapted for Cloned Sites in the AI Website Cloner Template

> Discover how AI website cloner generates CSS by extracting design tokens and compiling Tailwind 4 to create pixel-perfect cloned site stylesheets.

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

---

**The template extracts design tokens from the target website using `getComputedStyle()`, injects them as CSS custom properties into [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css), and compiles Tailwind 4 via PostCSS to produce pixel-perfect stylesheets.**

The JCodesMore/ai-website-cloner-template repository implements a data-driven CSS generation pipeline that mirrors the styling of any target website. By harvesting design tokens directly from the source and feeding them into a Tailwind 4-based build system, the template ensures that cloned sites match the original pixel-for-pixel while maintaining responsive and theming capabilities.

## Three-Stage CSS Generation Pipeline

The CSS adaptation process follows three tightly-coupled stages that transform scraped visual data into a compiled stylesheet.

### Stage 1: Design Token Extraction

During the Reconnaissance phase, the AI agent scrapes the target page and calls `getComputedStyle()` on every relevant element. This captures exact values for colors, spacing, border radius, and font families. These raw values are written into CSS custom properties within `:root` and `.dark` blocks, stored in the generated output under `docs/research/`. For example, the primary brand color is recorded as `--color-primary: oklch(0.205 0 0);`.

### Stage 2: Global CSS Scaffolding

The [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) file serves as the central stylesheet that bridges extracted tokens with Tailwind's utility system. It imports Tailwind's base, the Shadcn UI pre-flight styles, and defines a custom dark-mode variant:

```css
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

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

```

The extracted design tokens are injected after these imports, creating a single source of truth for variables like `--color-primary`, `--radius-lg`, and font families.

### Stage 3: Tailwind Compilation

The project runs Tailwind 4 via PostCSS as configured in `postcss.config.mjs`. The `@tailwindcss/postcss` plugin processes the `@tailwind` directives, resolves utility classes like `bg-primary` and `rounded-lg` against the custom properties, and outputs a final [`styles.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/styles.css). Next.js automatically bundles and serves this compiled stylesheet.

## Design Token Structure and Dark Mode Support

The template generates separate variable blocks for light and dark themes. The `:root` selector holds default tokens, while the `.dark` class overrides them for dark mode. This approach enables immediate theming without JavaScript runtime calculations.

Example generated token block:

```css
:root {
  --color-primary: oklch(0.205 0 0);
  --radius-lg: calc(var(--radius) * 1);
  --font-family-sans: "Inter", sans-serif;
}

.dark {
  --color-primary: oklch(0.95 0 0);
  --color-background: oklch(0.145 0 0);
}

```

Components reference these tokens through Tailwind utilities:

```tsx
<button className="bg-primary dark:bg-primary-foreground text-white rounded-lg">
  Toggle
</button>

```

## Safe Class Composition with tailwind-merge

To prevent conflicting utility classes at runtime, the repository uses **tailwind-merge** wrapped in a `cn` utility function. Located in [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts), this helper safely combines Tailwind class strings.

```typescript
import { twMerge } from "tailwind-merge";
import { clsx, type ClassValue } from "clsx";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

```

Usage in components ensures that dynamic class assignments don't create duplicate or conflicting utilities:

```tsx
import { cn } from "@/lib/utils";

export function Card({ children, className }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={cn("bg-primary rounded-lg p-4 shadow-lg", className)}>
      {children}
    </div>
  );
}

```

## Key Configuration Files

The CSS adaptation relies on several specific files in the repository:

| File | Role |
|------|------|
| [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) | Imports Tailwind, defines custom variants, and hosts the extracted design-token variables. |
| `postcss.config.mjs` | Configures PostCSS to run the `@tailwindcss/postcss` plugin for Tailwind 4 compilation. |
| [`package.json`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/package.json) | Declares Tailwind 4, `@tailwindcss/postcss`, and `tailwind-merge` dependencies. |
| [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) | Provides the `cn` wrapper around `twMerge` for safe class-name composition. |
| `docs/research/` | Contains the raw token extraction output that populates the `:root` and `.dark` blocks. |

## Summary

- **Design tokens are extracted** from the target website using `getComputedStyle()` during the Reconnaissance phase.
- **Global CSS scaffolding** in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) imports Tailwind 4 and injects custom properties for both light and dark modes.
- **Tailwind compilation** via PostCSS processes the tokens and generates utility classes that match the original site's exact values.
- **Runtime safety** is ensured through the `cn` utility in [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts), which uses `tailwind-merge` to prevent class conflicts.
- The pipeline is **data-driven**, allowing the cloned site to mirror the original design while maintaining Tailwind's responsive capabilities.

## Frequently Asked Questions

### How does the template extract exact colors from the target website?

The AI agent uses Chrome MCP or a similar browser tool to call `window.getComputedStyle(element)` on every relevant DOM node. It records the computed values for color, spacing, typography, and border radius, then writes these as CSS custom properties (e.g., `--color-primary: oklch(0.205 0 0);`) into the generated stylesheet.

### What version of Tailwind does the AI Website Cloner Template use?

The template uses **Tailwind 4**, which runs via PostCSS as specified in `postcss.config.mjs` and [`package.json`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/package.json). This version processes the `@import "tailwindcss"` directive in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) and compiles utility classes against the injected design tokens.

### How does the template handle dark mode in the generated CSS?

Dark mode is implemented through a custom variant defined in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) using `@custom-variant dark (&:is(.dark *))`. The token extraction generates separate variable blocks for `:root` (light mode) and `.dark` (dark mode), allowing Tailwind utilities like `dark:bg-primary-foreground` to resolve correctly.

### Where are the extracted design tokens stored before compilation?

The raw token extraction output is stored in the `docs/research/` directory (generated during the cloning process). These values are then injected into [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) as CSS custom properties within `:root` and `.dark` blocks, where Tailwind 4 reads them during compilation.