Convierte cualquier web en un tema de Tailwind v4

Abre una web, pulsa Stylasso y copia un bloque @theme. Obtienes los colores que la página pinta de verdad, sus fuentes, su escala tipográfica con interlineado y espaciado entre letras, sus radios y sus sombras, ya con los nombres que usa Tailwind CSS v4.

Lo que pegas

Esta es la exportación completa a Tailwind de Ledgerline, una web fintech ficticia que creamos para las demos. No se ha editado nada a mano.

@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;
}

Tres cosas en las que fijarse:

• Funciones, no solo códigos hex. primary es el color de los botones principales, text el color de texto más usado y border el de los separadores. Escribes bg-primary y text-muted, no bg-[#1d4ed8].
• La escala tipográfica conserva los detalles. Cada paso lleva su interlineado, su espaciado entre letras y su peso, así que text-6xl te da el mismo titular apretado de peso 800 que usa la web.
• Nombres de Tailwind donde encajan. Los tamaños se ajustan al paso de Tailwind más cercano (text-3xl, rounded-md), así que el resto de tus utilidades sigue funcionando.

Cómo usarlo en un proyecto con Tailwind v4

1. Abre la web cuyo estilo quieres tomar como punto de partida y pulsa el icono de Stylasso.
2. Elige Tailwind en la barra de exportación y pulsa Copy.
3. En tu archivo CSS principal, deja primero el @import de la fuente, luego @import "tailwindcss"; y después el bloque @theme.
4. Usa los tokens: <button class="bg-primary text-white rounded-md">.

Tailwind v4 lee las variables del tema directamente del CSS, así que no hay ningún tailwind.config.js que editar. Si sigues en la v3, copia la exportación de CSS variables y enlázalas en tu configuración.

¿Usas shadcn/ui?

Stylasso Pro genera un tema completo de shadcn/ui: todas las variables que espera shadcn, incluidas las de gráficos y barra lateral, con un bloque .dark. Para una web oscura como Afterhours (otra web de demo) escribe ambos bloques a partir de la paleta oscura; para una web clara, deduce el bloque oscuro. El principio de ese archivo:

@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 */

Preguntas

Relacionado

• Extraer los colores de cualquier web, con su función
• ¿Qué fuente usa esta web?
• Alternativa a ColorZilla para la paleta de toda una web
• Generador de DESIGN.md