Tailwind-Config-Generator

Tailwind-Konfiguration visuell erstellen: Farben, Schrift, Abstände, Radien und Schatten – Export für Tailwind v4 und v3.

Der Tailwind-Config-Generator stellt dein Design-System visuell zusammen: Farben mit Stufen 50 bis 950, Schriften, eine Typografie-Skala, Abstands-Basis, Radien, Schatten und Breakpoints. Daraus entsteht der fertige @theme-Block für Tailwind v4 und die Konfigurationsdatei für Tailwind v3. Alles läuft im Browser, nichts wird gespeichert.

Farben

Name

Basisfarbe

Stufen 50–950

Name

Basisfarbe

Stufen 50–950

Name

Basisfarbe

Stufen 50–950

Typografie

Überschriften

Fließtext

Code

Basisgröße

Verhältnis

Stufen größer

4xl · 48.8px

3xl · 39.1px

2xl · 31.3px

xl · 25px

lg · 20px

Abstände, Radien und Schatten

Abstands-Basis px

Radius klein px

Radius mittel px

Radius groß px

Radius extra groß px

Schatten klein

Schatten mittel

Schatten groß

Breakpoints

2xl

@import 'tailwindcss';

@theme {
  /* Farben */
  --color-primary-50: #f0f5fe;
  --color-primary-100: #dee9fc;
  --color-primary-200: #c4d9fb;
  --color-primary-300: #9ec2fd;
  --color-primary-400: #69a0fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #0866ea;
  --color-primary-700: #0056cd;
  --color-primary-800: #0046a9;
  --color-primary-900: #123e85;
  --color-primary-950: #0f2850;
  --color-secondary-50: #f5f4fe;
  --color-secondary-100: #e8e4fd;
  --color-secondary-200: #d7d0fc;
  --color-secondary-300: #c0b1fd;
  --color-secondary-400: #a285fa;
  --color-secondary-500: #8b5cf6;
  --color-secondary-600: #7935ec;
  --color-secondary-700: #6b1bd8;
  --color-secondary-800: #561fae;
  --color-secondary-900: #472887;
  --color-secondary-950: #2c1d52;
  --color-accent: #c9f45b;

  /* Schriften */
  --font-heading: 'Manrope Variable', system-ui, sans-serif;
  --font-body: 'Inter Variable', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Schriftgrößen */
  --text-4xl: 3.0518rem;
  --text-3xl: 2.4414rem;
  --text-2xl: 1.9531rem;
  --text-xl: 1.5625rem;
  --text-lg: 1.25rem;
  --text-base: 1rem;
  --text-sm: 0.8rem;
  --text-xs: 0.64rem;

  /* Abstände (Basis für p-4, gap-6 …) */
  --spacing: 0.25rem;

  /* Radien */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* Schatten */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Breakpoints */
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
}

Tailwind an dein Design anpassen

Tailwind liefert Standardwerte für Farben, Größen und Abstände. Für eine eigene Marke definierst du dein Theme neu. In Tailwind v4 geschieht das direkt in CSS mit dem @theme-Block, in v3 in der Datei tailwind.config.js.

Was der Generator ausgibt

Bereich	Tailwind v4	Tailwind v3
Farben	`--color-primary-500`	`colors.primary.500`
Schriften	`--font-heading`	`fontFamily.heading`
Schriftgrößen	`--text-xl`	`fontSize.xl`
Radien	`--radius-md`	`borderRadius.md`
Schatten	`--shadow-md`	`boxShadow.md`
Breakpoints	`--breakpoint-md`	`screens.md`

So gehst du vor

Design-Werte eintragen.
Ausgabe für deine Tailwind-Version kopieren.
Einzelne Farbskalen erzeugst du auch im Tailwind-Farbgenerator. Für weitere Formate wie JSON und SCSS nutzt du den Design-Token-Generator.

Beispiel

Du legst die Farbe „primary“ mit #3b82f6 und Stufen an, wählst Manrope für Überschriften und Inter für Text. Danach schreibst du im Markup bg-primary-600 font-heading rounded-lg. Mit der Abstands-Basis 4 px bleibt p-4 bei 16 px. Prüfe Textfarben auf den Flächen mit dem Farbkontrast-Prüfer.

Häufige Fragen

Wo füge ich den @theme-Block ein?

In Tailwind v4 in deine CSS-Hauptdatei, direkt nach dem Import von Tailwind. Danach stehen Klassen wie bg-primary-500, font-heading, text-xl und rounded-md bereit. Standardwerte, die du nicht überschreibst, bleiben erhalten.

Was macht die Abstands-Basis?

In Tailwind v4 ist --spacing der Grundwert, alle Klassen wie p-4 oder gap-6 sind Vielfache davon. Mit 4 px ergibt p-4 also 16 px. Ein anderer Wert skaliert alle Abstände gleichzeitig.

Wie funktioniert die Konfiguration in Tailwind v3?

Die Werte landen in theme.extend der Datei tailwind.config.js. Extend ergänzt die Standardwerte, statt sie zu ersetzen. Das Spacing-Basis-Konzept gibt es in v3 nicht, dort bleibt die Standardskala.

Werden die Schriften automatisch geladen?

Nein. Die Konfiguration benennt nur die Schriftfamilien. Die Fonts selbst bindest du separat ein, am besten selbst gehostet. Vorschläge und Vergleiche findest du in der Schriftkombinationen-Vorschau.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.