Transforme qualquer site em um tema do Tailwind v4
Abra um site, clique no Stylasso e copie um bloco @theme. Você recebe as cores que a página realmente pinta, as fontes, a escala tipográfica com altura de linha e espaçamento entre letras, os raios e as sombras, já com os nomes que o Tailwind CSS v4 usa.
O que você cola
Esta é a exportação completa para Tailwind do Ledgerline, um site fintech fictício que criamos para as demos. Nada foi editado à mão.
@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;
}
Três coisas para reparar:
- Funções, não só códigos hex.
primaryé a cor dos botões principais,texté a cor de texto mais usada eborderé a cor dos divisores. Você escrevebg-primaryetext-muted, nãobg-[#1d4ed8]. - A escala tipográfica mantém os detalhes. Cada passo traz a altura de linha, o espaçamento entre letras e o peso, então
text-6xlentrega o mesmo título apertado de peso 800 que o site usa. - Nomes do Tailwind onde cabem. Os tamanhos se ajustam ao passo do Tailwind mais próximo (
text-3xl,rounded-md), então o resto das suas utilidades continua funcionando.
Como usar em um projeto com Tailwind v4
- Abra o site cujo estilo você quer usar como ponto de partida e clique no ícone do Stylasso.
- Escolha Tailwind na barra de exportação e clique em Copy.
- No seu arquivo CSS principal, deixe primeiro o
@importda fonte, depois@import "tailwindcss";e em seguida o bloco@theme. - Use os tokens:
<button class="bg-primary text-white rounded-md">.
O Tailwind v4 lê as variáveis do tema direto do CSS, então não existe tailwind.config.js para editar. Se você ainda está na v3, copie a exportação de CSS variables e mapeie as variáveis na sua configuração.
Usa shadcn/ui?
O Stylasso Pro gera um tema completo de shadcn/ui: todas as variáveis que o shadcn espera, inclusive as de gráficos e barra lateral, com um bloco .dark. Para um site escuro como o Afterhours (outro site de demo), ele escreve os dois blocos a partir da paleta escura; para um site claro, ele deriva o bloco escuro. O começo desse arquivo:
@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 */
Perguntas
Funciona em qualquer site?
Em qualquer página web comum. Os navegadores não deixam extensões lerem as próprias páginas internas, as lojas de extensões nem o leitor de PDF embutido.
É a configuração real do site?
Não. O Stylasso lê o que o seu navegador renderiza, não os arquivos-fonte do site, então você recebe os valores que a página realmente usa mesmo quando ela não é feita com Tailwind. Nomes como primary são a melhor leitura do Stylasso sobre a função de cada cor, com base em onde ela é pintada.
Posso usar o estilo de um site no meu produto?
Cores, tamanhos e espaçamentos são fatos sobre uma página. Logos, imagens, textos e arquivos de fontes comerciais pertencem aos donos: o Stylasso nunca exporta o texto nem as imagens da página e, quando um site usa uma fonte paga, indica a fonte gratuita do Google mais parecida.