Skip to content

フォーマッター＆コード

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

編集者注

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

この詳細な解説章は現在、英語版のみで提供されています。上の変換ツールはあなたの言語で動作しますが、長文の解説記事はまだ翻訳されていません。

よくある質問

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.

他の人はこちらも検索しています

関連ツール

More in this room.

すべて表示 フォーマッター＆コード