Skip to content

Formatters & 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: [],
};

Redactionele opmerking

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

Dit uitgebreide hoofdstuk is momenteel alleen in het Engels beschikbaar. De conversietool hierboven werkt in jouw taal; de lange uitleg is nog niet vertaald.

Veelgestelde vragen

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.

Mensen zoeken ook naar

Gerelateerde tools

More in this room.

Bekijk alles in Formatters & Code