Skip to content

Formattatori e Codice

Generatore Configurazione Tailwind

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

Nota dell'editore

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

Questo capitolo approfondito è attualmente disponibile solo in inglese. Lo strumento di conversione qui sopra funziona nella tua lingua; il lungo articolo esplicativo non è stato ancora tradotto.

Domande frequenti

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.

Le persone cercano anche

Strumenti correlati

More in this room.

Vedi tutto in Formattatori e Codice