🗽

【Tailwind和訳】CUSTOMIZATION/Presets

2021/10/23に公開

Tailwind CSS

tech

この記事について

この記事は、CUSTOMIZATION/Presets の記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

プリセット

再利用可能な独自の設定プリセットを作成します。

デフォルトでは、あなた自身のtailwind.config.jsファイルに追加された設定は、あなた自身の設定がオーバーライドや拡張のセットとして機能しながら、default configurationに知的ににマージされます。

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

tailwind.config.js

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

これは、同じブランドのために複数の Tailwind プロジェクトを管理しているチームにとって、色やフォント、その他の一般的なカスタマイズについて単一の情報源が欲しい場合に非常に便利です。

プリセットの作成

プリセットは通常の Tailwind の設定オブジェクトであり、tailwind.config.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")],
}

ご覧のように、プリセットには、テーマのオーバーライドや拡張機能、プラグインの追加、プレフィックスの設定など、これまでに慣れ親しんだすべての設定オプションを含めることができます。詳しくは、how configurations are mergedをお読みください。

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

tailwind.config.js

module.exports = {
  presets: [
    require('./tailwind-preset.js')
  ],
  // 今回のプロジェクトに合わせたカスタマイズはこちらへ
  theme: {
    extend: {
      minHeight: {
        48: '12rem',
      }
    }
  },
  variants: {
    extend: {
      backgroundColor: ['active']
    },
  },
}

デフォルトでは、プリセット自体は、あなた自身の設定と同様に、Tailwind のデフォルト設定を拡張します。 デフォルト設定を完全に置き換えるプリセットを作成したい場合は、プリセット自体に空のpresetsキーを含めてください。

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

詳しくは、「デフォルトの設定を無効にする」をご覧ください。

設定のマージ方法

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

tailwind.config.js内の以下のオプションは、プリセット内に同じオプションがある場合、単に置き換えられます。

purge
darkMode
prefix
important
variantOrder
separator

残りのオプションは、それぞれのオプションに最も適した方法で慎重にマージされますが、詳細は次のとおりです。

テーマ

themeオブジェクトは浅くマージされ、tailwind.config.jsのトップレベルのキーは、あらゆるプリセットの同じトップレベルのキーを置き換えます。ただし、extendキーは例外で、これはすべての設定で収集され、テーマ設定の残りの部分の上に適用されます。

themeオプションがどのように機能するかについては、テーマ設定のドキュメントで詳しく説明しています。

バリアント

variants オブジェクトはthemeオブジェクトと同様に浅くマージされ、トップレベルのキーはあらゆるプリセットの同じトップレベルのキーを置き換えます。extend キーは唯一の例外で、themeと同様にすべての設定で収集されます。

variants オプションがどのように機能するかについては、variants 設定のドキュメントで詳しく説明しています。

プリセット

presetsの配列は複数のコンフィギュレーションにまたがってマージされ、プリセットは自分のプリセットを含むことができます。

プラグイン

pluginsの配列は設定全体でマージされ、プリセットがプラグインを登録できるようにする一方で、プロジェクトレベルでプラグインを追加できるようにします。

つまり、プリセットによって追加されたプラグインを無効にすることはできません。もし、プリセットでプラグインを無効にしたいと思ったら、そのプラグインをプリセットから削除して、代わりにプロジェクト単位でプラグインを入れるか、プリセットを 2 つに分ける方が良いということです。

コアプラグイン

corePluginsオプションは、オブジェクトとして設定するか、配列として設定するかによって、動作が異なります。

corePluginsをオブジェクトとして設定した場合は、複数の設定にまたがってマージされます。

// ./example-preset.js
module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}
// tailwind.config.js
module.exports = {
  presets: [require("./example-preset.js")],
  // この設定はマージされます
  corePlugins: {
    cursor: false,
  },
}

corePluginsを配列として設定した場合、設定したプリセットで提供されるcorePluginsの設定を置き換えることができます。

// ./example-preset.js
module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}
// tailwind.config.js
module.exports = {
  presets: [require("./example-preset.js")],
  // これは、プリセットの設定を置き換えるものです。
  corePlugins: ["float", "padding", "margin"],
}

複数のプリセットを拡張する

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

tailwind.config.js

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

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

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

tailwind.config.js

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

デフォルト設定の無効化

デフォルトの設定を完全に無効にして、ベースの設定が全くない状態でスタートしたい場合は、presetsを空の配列に設定します。

tailwind.config.js

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

これは、Tailwind のデフォルトのすべてを完全に無効にしますので、色、フォントファミリー、フォントサイズ、スペーシング値などは、まったく生成されません。

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

// ./example-preset.js
module.exports = {
  presets: [],
  // ...
}
// tailwind.config.js
module.exports = {
  presets: [require("./example-preset.js")],
  // ...
}

Discussion

ログインするとコメントできます