プリセット

デフォルトでは、独自の`tailwind.config.js`ファイルに追加する設定は、デフォルト設定とインテリジェントにマージされ、独自の構成はオーバーライドと拡張のセットとして機能します。

`presets`オプションを使用すると、ベースとして使用する異なる設定を指定できるため、複数のプロジェクトで再利用したいカスタマイズのセットを簡単にパッケージ化できます。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/tailwind-base')
  ],
  // ...
}

これは、同じブランドの複数のTailwindプロジェクトを管理するチームにとって非常に役立ちます。カラー、フォント、その他の共通のカスタマイズについて、単一の真実の情報源を持つことができます。

プリセットの作成

プリセットは通常のTailwind設定オブジェクトであり、`tailwind.config.js`ファイルに追加する設定とまったく同じ形状をしています。

my-preset.js

// Example preset
module.exports = {
  theme: {
    colors: {
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
    },
    extend: {
      flexGrow: {
        2: '2',
        3: '3',
      },
      zIndex: {
        60: '60',
        70: '70',
        80: '80',
        90: '90',
        100: '100',
      },
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

ご覧のとおり、プリセットには、テーマのオーバーライドと拡張、プラグインの追加、プレフィックスの設定など、これまで使用してきたすべての設定オプションを含めることができます。設定のマージ方法の詳細については、こちらをご覧ください。

このプリセットが`./my-preset.js`に保存されていると仮定すると、`presets`キーの下にある実際のプロジェクトの`tailwind.config.js`ファイルに追加して使用します。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./my-preset.js')
  ],
  // Customizations specific to this project would go here
  theme: {
    extend: {
      minHeight: {
        48: '12rem',
      }
    }
  },
}

デフォルトでは、プリセット自体は、独自の構成と同様に、Tailwindのデフォルト設定を拡張します。デフォルト設定を完全に置き換えるプリセットを作成する場合は、プリセット自体に空の`presets`キーを含めます。

// Example preset
module.exports = {
  presets: [],
  theme: {
    // ...
  },
  plugins: [
    // ...
  ],
}

詳細については、デフォルト設定の無効化に関する情報をご覧ください。

マージロジックの詳細

プロジェクト固有の設定（`tailwind.config.js`ファイルにあるもの）は、デフォルト設定に対してマージされるのと同じ方法でプリセットに対してマージされます。

`tailwind.config.js`の次のオプションは、プリセットに存在する場合、同じオプションを単に置き換えます。

content
darkMode
prefix
important
variantOrder
separator
safelist

残りのオプションは、それぞれオプションに最も適した方法で慎重にマージされ、以下で詳しく説明します。

my-preset.js

module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./my-preset.js'),
  ],
  // This configuration will be merged
  corePlugins: {
    cursor: false
  }
}

corePluginsを配列として設定した場合、設定済みのプリセットによって提供されるcorePlugins設定を置き換えます。

my-preset.js

module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./example-preset.js'),
  ],
  // This will replace the configuration in the preset
  corePlugins: ['float', 'padding', 'margin']
}

複数のプリセットの拡張

presetsオプションは配列であり、複数のプリセットを受け入れることができます。これは、再利用可能なカスタマイズを、独立してインポートできる構成可能なチャンクに分割したい場合に便利です。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/tailwind-colors'),
    require('@acmecorp/tailwind-fonts'),
    require('@acmecorp/tailwind-spacing'),
  ]
}

複数のプリセットを追加する際には、それらが何らかの形で重複する場合、独自のプリセットに対するカスタマイズと同じ方法で解決され、最後の設定が優先されることに注意することが重要です。

例えば、これらの設定の両方がカスタムカラーパレットを提供する場合（そしてextendを使用していない場合）、configuration-bのカラーパレットが使用されます。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/configuration-a'),
    require('@acmecorp/configuration-b'),
  ]
}

デフォルト設定の無効化

デフォルト設定を完全に無効化し、ベース設定なしで開始するには、presetsを空の配列に設定します。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [],
  // ...
}

これにより、Tailwindのデフォルト設定（色、フォントファミリー、フォントサイズ、スペース値など）はすべて完全に無効化されます。

プリセット内からこれを行うこともできます。プリセットがTailwindのデフォルトを拡張しない独自の完全なデザインシステムを提供する場合に便利です。

my-preset.js

module.exports = {
  presets: [],
  // ...
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./my-preset.js')
  ],
  // ...
}

プリセットの作成

マージロジックの詳細

テーマ

プリセット

プラグイン

コアプラグイン

複数のプリセットの拡張

デフォルト設定の無効化

このページについて