# How Extracted CSS Values Are Mapped to Tailwind CSS v4 Custom Properties

> Discover how AI Website Cloner maps extracted CSS values to Tailwind CSS v4 custom properties via a four-stage pipeline. Learn about computed styles, design tokens, and CSS variable injection for efficient styling.

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

---

**The AI Website Cloner template converts raw CSS values scraped from target websites into Tailwind CSS v4 custom properties through a four-stage pipeline that extracts computed styles, generates design tokens, injects them as CSS variables in [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css), and consumes them via utility classes merged by the `cn()` helper.**

The **JCodesMore/ai-website-cloner-template** automates the replication of existing websites by scraping their visual appearance and translating those styles into a maintainable Tailwind CSS v4 design system. Understanding how extracted CSS values are mapped to Tailwind CSS v4 custom properties reveals the mechanism that enables pixel-perfect cloning while preserving semantic design tokens.

## Stage 1: Extracting Computed Styles via Headless Browser

The pipeline begins with autonomous agents navigating the target site in a headless browser. For every significant element, the system invokes **`window.getComputedStyle(el)`** to capture exact numeric values—including hexadecimal colors like `#1a2b3c`, pixel measurements such as `12px`, and rem units like `0.5rem`.

These raw values are written into component specification markdown files stored under **`docs/research/components/`**. According to the repository’s inspection guidelines documented in **[`docs/research/INSPECTION_GUIDE.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/docs/research/INSPECTION_GUIDE.md)**, agents record these computed values to ensure the cloned implementation matches the source site down to the specific pixel.

## Stage 2: Generating the Design Token Map

A Node.js script—utilizing logic similar to **`scripts/sync-skills.mjs`**—processes the component specifications to deduplicate and group identical values. This script outputs a **[`design-tokens.json`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/design-tokens.json)** file that maps semantic names to the extracted raw values:

```json
{
  "color-primary": "#1a2b3c",
  "spacing-4": "1rem",
  "radius-sm": "0.25rem"
}

```

This tokenization step abstracts literal values into reusable design tokens, ensuring that identical colors or spacing values used across multiple components reference a single source of truth.

## Stage 3: Injecting CSS Custom Properties into globals.css

The generated token map is transformed into **CSS custom properties** inside **[`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css)**. The file imports Tailwind’s v4 base layers and declares a `:root` block containing `--tw-*` prefixed variables:

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

:root {
  /* Design-token custom properties generated from the extraction step */
  --tw-color-primary: #1a2b3c;
  --tw-spacing-4: 1rem;
  --tw-radius-sm: 0.25rem;
}

```

The **[`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tailwind.config.ts)** file (automatically generated from the same token map) maps these design-token names to the CSS variables:

```typescript
export default defineConfig({
  theme: {
    extend: {
      colors: {
        primary: "var(--tw-color-primary)"
      },
      spacing: {
        4: "var(--tw-spacing-4)"
      },
      borderRadius: {
        sm: "var(--tw-radius-sm)"
      }
    }
  }
})

```

Tailwind CSS v4 now resolves utility classes like `bg-primary` to `background-color: var(--tw-color-primary)`, dynamically linking the extracted value to the generated stylesheet.

## Stage 4: Consuming Tokens in Components with the cn() Utility

UI components consume these custom properties through standard Tailwind utility classes. The **`cn()`** helper function defined in **[`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts)** merges these classes while resolving conflicts:

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

/* `cn` merges Tailwind class lists while respecting the custom-property-based utilities */
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

```

Components import this utility to apply token-based classes:

```tsx
// src/components/ui/button.tsx
import { cn } from "@/lib/utils";

export function Button({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <button className={cn("bg-primary", "p-4", "rounded-sm", className)}>
      {children}
    </button>
  );
}

```

The **`cn()`** function combines **`clsx`** for conditional class construction and **`twMerge`** for intelligent Tailwind class deduplication, ensuring that utilities referencing the custom properties apply correctly without style conflicts.

## Summary

- **Browser extraction** captures exact computed styles via `getComputedStyle` and stores them in component specifications under `docs/research/components/`.
- **Token generation** deduplicates values into a [`design-tokens.json`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/design-tokens.json) map using pipeline scripts like `scripts/sync-skills.mjs`.
- **CSS injection** declares `--tw-*` custom properties in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css), linked to Tailwind v4 utilities through [`tailwind.config.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/tailwind.config.ts).
- **Component integration** uses the `cn()` helper from [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) to apply utility classes that resolve to the extracted CSS values.

## Frequently Asked Questions

### How does the template ensure color values extracted from the original site match exactly in the clone?

The template invokes `window.getComputedStyle(el)` on every target element to capture the browser-calculated values—including computed hex codes, RGBA values, and specific pixel measurements—then maps these exact values to CSS custom properties in [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css) via the design token pipeline.

### What is the purpose of the `cn()` utility function in [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts)?

The `cn()` function merges Tailwind CSS utility classes using `clsx` for conditional logic and `tailwind-merge` for deduplication, ensuring that classes referencing custom properties (like `bg-primary`) apply correctly without conflicting with other utilities or inline styles.

### Why does the template use `--tw-*` prefixes for CSS custom properties?

The `--tw-*` naming convention identifies these variables as Tailwind-specific design tokens, distinguishing them from other CSS variables while maintaining compatibility with Tailwind CSS v4's theme configuration system that maps semantic names to these custom properties.

### Where are the extracted CSS values initially stored before becoming custom properties?

Extracted values are first recorded in markdown component specifications within `docs/research/components/`, then processed into a centralized [`design-tokens.json`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/design-tokens.json) file that serves as the single source of truth before injection into [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) as CSS custom properties.