Export Tailwind

Générez un thème Tailwind depuis n'importe quel site

Design Snap est une extension Chrome gratuite qui transforme n'importe quel site web en thème Tailwind. Elle extrait les couleurs, polices, border-radius et ombres réels du site, puis génère un tailwind.config.js prêt à coller — ou un bloc @theme Tailwind v4 avec PRO. Sans fouiller les DevTools, sans copier les valeurs une à une.

Ajouter à Chrome — gratuit Voir les plans PRO

Plan gratuit · Sans compte · Analyse 100 % locale

Comment générer un thème Tailwind depuis un site web

Générer un thème Tailwind depuis un site existant tient en trois étapes avec Design Snap : installer l'extension, extraire les design tokens de la page, puis copier la configuration Tailwind générée dans votre projet. Tout s'exécute localement dans votre navigateur, en moins d'une minute.

  1. Installer

    Ajoutez Design Snap à Chrome depuis le Chrome Web Store. Plan gratuit, sans compte.

  2. Extraire

    Ouvrez le site dont vous voulez réutiliser le design et appuyez sur Extract. Couleurs, polices, radius et ombres apparaissent en une seconde environ.

  3. Copier la config Tailwind

    Cliquez sur Tailwind pour copier un objet theme.extend — ou Tailwind v4 (PRO) pour un bloc @theme CSS-first.

À quoi ressemble l'export Tailwind

Design Snap mappe les tokens extraits sur la structure de thème de Tailwind : les couleurs deviennent des entrées nommées dans theme.extend.colors, les typos détectées remplissent fontFamily, et les radius et ombres uniques atterrissent dans borderRadius et boxShadow. Tout est généré prêt à coller — aucune passe de nettoyage.

tailwind.config.js Gratuit
theme: {
  extend: {
    colors: {
      primary: '#6366f1',
      surface: '#f8fafc',
      ink: '#0f172a',
    },
    fontFamily: { sans: ['Inter'] },
    borderRadius: { md: '8px' },
    boxShadow: { sm: '0 1px 3px rgba(0,0,0,.1)' },
  },
}
theme.css Tailwind v4PRO
@theme {
  --color-primary: #6366f1;
  --color-surface: #f8fafc;
  --color-ink: #0f172a;
  --font-sans: 'Inter', sans-serif;
  --radius-md: 8px;
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .1);
}

Pourquoi extraire le thème plutôt que le reconstruire

Un thème Tailwind construit à partir des styles calculés réels d'un site est juste par construction. Design Snap classe les couleurs par fréquence d'apparition réelle sur la page, filtre les fallbacks génériques de polices et dédoublonne radius et ombres — le thème généré reflète le design system en usage, pas une estimation.

  • Couleurs classées par fréquence d'usage réelle — la couleur primaire du site sort en premier
  • Familles de polices custom uniquement ; les fallbacks génériques comme sans-serif sont filtrés
  • Border-radius et box-shadows uniques, dédoublonnés avec aperçu live
  • Fonctionne sur tout site lisible par Chrome : production, staging, localhost
  • Analyse 100 % locale — les pages que vous visitez ne sont jamais transmises

Export Tailwind — FAQ

Oui. Design Snap lit les styles calculés de n'importe quelle page, extrait ses couleurs (classées par usage réel), polices, border-radius et ombres, puis génère un objet de thème tailwind.config.js à coller directement dans votre projet. L'export Tailwind est inclus dans le plan gratuit.

Oui. Design Snap PRO exporte un bloc @theme Tailwind v4 en configuration CSS-first — variables de couleurs, polices, radius et ombres prêtes pour votre feuille de style principale. L'export tailwind.config.js classique (style v3) est gratuit.

L'export tailwind.config.js est gratuit, comme le JSON Style Dictionary, les variables CSS et les tokens Figma. L'export @theme Tailwind v4 fait partie de PRO (4,99 €/mois, 39 €/an ou 49 € à vie), avec l'export shadcn/ui, l'extraction du vrai dark mode et les snapshots illimités. Voir les tarifs.

Générateur de thème shadcn/ui

Mappez la palette d'un site sur les rôles sémantiques shadcn/ui, prêt pour globals.css.

Extraire les variables CSS

Listez toutes les custom properties déclarées sur :root de n'importe quel site.

Extracteur de palette

Les couleurs d'un site classées par usage réel, avec valeurs hex.

vs DevTools & CSS Peeper

Comment Design Snap se compare aux DevTools de Chrome et à CSS Peeper.