Tailwind Utility Builder

1. カスタマイズ設定

Primary Color

Secondary Color

Font Family (comma区切り)

Border Radius (e.g. 0.375rem)

2. エクスポート

以下のボタンを押すと、tailwind.config.js 相当のコードを表示します。

プレビュー

Sample Button

Custom Card

This card uses your primary color as the border and title color. Font family, border radius, etc. are applied dynamically.

生成された Tailwind Config (プレビュー)

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#ec4899',
      },
      fontFamily: {
        custom: ['Inter, sans-serif', 'sans-serif'],
      },
      borderRadius: {
        custom: '0.375rem',
      },
    },
  },
};