Skip to content

Formatierer & Code

Tailwind Config Generator

Build a tailwind.config.js from your design tokens.

Runs in your browser

Brand colours

Font families

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx,html}"],
  theme: {
    extend: {
      colors: {
        primary: "#d4a259",
        secondary: "#3b82f6",
        accent: "#10b981",
      },
      fontFamily: {
        sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
        serif: ["Lora", "ui-serif", "Georgia", "serif"],
        mono: ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "monospace"],
      },
    },
  },
  plugins: [],
};

Anmerkung der Redaktion

Understanding · A design system, expressed as a config file.

Dieses ausführliche Kapitel ist derzeit nur auf Englisch verfügbar. Das Konvertierungstool oben funktioniert in Ihrer Sprache; der lange Erklärtext wurde noch nicht übersetzt.

Häufig gestellte Fragen

Quick answers.

›Which Tailwind versions are supported?

The generator produces syntax compatible with Tailwind CSS v3.x, including the `content` and `theme` object structures.

›Does this tool collect my design tokens?

No. The configuration object is built entirely within your browser and is not sent to any external server.

›Can I add custom colours?

Yes. You can define hex codes for your primary, secondary, and neutral palettes, which are then mapped to the `theme.extend.colors` object.

›Is a build step required?

The tool only generates the JavaScript configuration file. You will still need the Tailwind CSS CLI or a PostCSS setup to compile your final CSS.

Andere suchten auch nach

Verwandte Tools

More in this room.

Alle anzeigen in Formatierer & Code