Turn any website into a Tailwind v4 theme

Open a site, click Stylasso, copy one @theme block. You get the colors the page really paints, its fonts, its type scale with line heights and tracking, its radii and shadows, already named the way Tailwind CSS v4 names them.

What you paste

This is the complete Tailwind export for Ledgerline, a fictional fintech site we built for demos. Nothing here was edited by hand.

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;800&display=swap");
/* Keep the @import line above every other rule, including @import "tailwindcss". */
/* Ledgerline style kit for Tailwind CSS v4, made with Stylasso (stylasso.pixlasso.com). Top of your CSS file: the font @import, then @import "tailwindcss", then this @theme block. */
/* Names Tailwind already has (gray-500, text-base, rounded-lg, shadow-md) are replaced by this page's values. */
@theme {
  --color-primary: #1d4ed8;
  --color-accent: #65a30d;
  --color-background: #ffffff;
  --color-text: #0f172a;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
  --color-blue-700: #1e3a8a;
  --color-surface: color-mix(in oklab, #0f172a 4%, #ffffff);
  --font-heading: Manrope, ui-sans-serif, system-ui, sans-serif;
  --font-sans: Manrope, ui-sans-serif, system-ui, sans-serif;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1.02;
  --text-6xl--letter-spacing: -2.7px;
  --text-6xl--font-weight: 800;
  --text-3xl: 1.75rem;
  --text-3xl--font-weight: 600;
  --text-xl: 1.25rem;
  --text-xl--letter-spacing: -0.6px;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.3;
  --text-base: 1rem;
  --text-base--line-height: 1.6;
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.6;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-2xs: rgb(226, 232, 240) 0px 0px 0px 1px inset;
  --shadow-xs: rgba(15, 23, 42, 0.06) 0px 1px 2px 0px, rgba(15, 23, 42, 0.12) 0px 8px 24px -12px;
}

Three things to notice:

• Roles, not just hex codes. primary is the color of the main buttons, text is the most used body color, border is what the page draws its dividers with. You write bg-primary and text-muted, not bg-[#1d4ed8].
• The type scale keeps its details. Each step carries its line height, letter spacing and weight, so text-6xl gives you the same tight 800-weight headline the site uses.
• Tailwind names where they fit. Sizes snap to the nearest Tailwind step (text-3xl, rounded-md), so the rest of your utilities keep working.

How to use it in a Tailwind v4 project

1. Open the site whose style you want to start from and click the Stylasso icon.
2. Pick Tailwind in the export bar and press Copy.
3. In your main CSS file, keep the font @import first, then @import "tailwindcss";, then the @theme block.
4. Use the tokens: <button class="bg-primary text-white rounded-md">.

Tailwind v4 reads theme variables straight from CSS, so there is no tailwind.config.js to edit. If you are still on v3, copy the CSS variables export instead and map them in your config.

Using shadcn/ui?

Stylasso Pro writes a complete shadcn/ui theme: every variable shadcn expects, including charts and sidebar, with a .dark block. For a dark site like Afterhours (another demo site) it writes both blocks from the dark palette; for a light site it derives the dark one. The start of that file:

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");
/* Keep the @import line above every other rule, including @import "tailwindcss". */
/* Afterhours as a shadcn/ui theme. This site is dark, so the theme applies in light and dark mode: replace your :root and .dark blocks in globals.css. */
:root, .dark {
  --radius: 12px;
  --background: oklch(15.3% 0.021 292.9);
  --foreground: oklch(94.0% 0.016 297.5);
  --card: oklch(20.0% 0.022 296.9);
  --card-foreground: oklch(94.0% 0.016 297.5);
  --popover: oklch(15.3% 0.021 292.9);
  --popover-foreground: oklch(94.0% 0.016 297.5);
  --primary: oklch(60.6% 0.219 292.7);
  --primary-foreground: oklch(100.0% 0.000 0);
  --secondary: oklch(20.0% 0.022 296.9);
  --secondary-foreground: oklch(94.0% 0.016 297.5);
  --muted: oklch(20.0% 0.022 296.9);
  --muted-foreground: oklch(68.0% 0.037 296.4);
  --accent: color-mix(in oklab, oklch(94.0% 0.016 297.5) 10%, oklch(15.3% 0.021 292.9));
  --accent-foreground: oklch(94.0% 0.016 297.5);
  --destructive: oklch(57.7% 0.245 27.3);
  --border: oklch(27.8% 0.032 297.8);
  --input: oklch(27.8% 0.032 297.8);
  --ring: oklch(60.6% 0.219 292.7);
  --chart-1: oklch(60.6% 0.219 292.7);
  --chart-2: oklch(77.3% 0.153 163.2);
  --chart-3: color-mix(in oklch, oklch(60.6% 0.219 292.7), oklch(15.3% 0.021 292.9) 18%);
  /* ...charts, sidebar and the rest of the variables */

Questions

Related

• DESIGN.md generator: turn any website into a DESIGN.md
• Extract the colors from any website, with roles
• What font is this website using?
• VisBug alternative for reading a site’s style
• CSS Peeper alternative for paste-ready exports