Skip to content

Công cụ định dạng & Mã

Trình tạo cấu hình 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: [],
};

Ghi chú của biên tập viên

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

Chương phân tích chuyên sâu này hiện chỉ có sẵn bằng tiếng Anh. Công cụ chuyển đổi ở trên hoạt động bằng ngôn ngữ của bạn; bài viết giải thích dài chưa được dịch.

Các câu hỏi thường gặp

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.

Mọi người cũng tìm kiếm

Công cụ liên quan

More in this room.

Xem tất cả trong Công cụ định dạng & Mã