My design looks different

A design looks different in your project from the preview: the fonts are wrong, everything is centred, the spacing is off. It’s almost always CSS that your project already had. Go through these checks in order.

1. Is it Tailwind CSS v4?

   The designs are written for Tailwind CSS v4. Check the tailwindcss version in your package.json: it should start with 4.

2. Did you add the setup?

   Dark mode and the font need two small additions. See Dark mode and fonts in your project.

3. Is your own CSS winning?

   This is the most common cause. Read on.

Why your CSS wins

Tailwind v4 keeps its classes in a CSS layer. Any CSS rule that isn’t in a layer beats every Tailwind class, however simple the rule is. Starter templates (Vite, Create React App, create-next-app) come with rules like that in index.css, App.css or globals.css.

Fix 1: rules for elements

Rules for h1, p, a, button, input or img can stay if you want them. Put them in the base layer, and Tailwind classes win again. Either import the file into the layer:

@import "tailwindcss";
@import "./styles.css" layer(base);

or wrap the rules themselves:

@layer base {
  h1 {
    font-size: 2.5rem;
  }
}

Fix 2: rules for the whole page

Rules on html, body, :root or #root pass down into every design, even inside a layer. Remove these:

• a font, font size, line height, colour or text-align;
• display: flex or place-items: center, which centre everything;
• a fixed width, max-width or padding.

For example, a new Vite project has both of these. Delete them:

body {
  display: flex;
  place-items: center;
}

#root {
  max-width: 1280px;
  padding: 2rem;
  text-align: center;
}

If nothing in your project is built on the starter CSS yet, delete the whole file and its import.

Other things that look wrong

• Dark mode is on when it shouldn’t be, or never turns on: check the dark mode line, and the dark class on your <html>.
• The font is wrong: load your theme’s font. Its link is in the code view, under Copy Google Fonts link.
• The colours are a different theme: the CLI and AI tools use the theme saved on your account. Pick the theme on the site while signed in, or use --look with the CLI.