設定

Tailwind はカスタムユーザーインターフェース構築のためのフレームワークであるため、最初からカスタマイズを念頭に置いて設計されています。

デフォルトでは、Tailwind はプロジェクトのルートにあるオプションの `tailwind.config.js` ファイルを探し、そこでカスタマイズを定義できます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

設定ファイルの各セクションはオプションなので、変更したい部分だけを指定するだけで済みます。 欠けているセクションは、Tailwind のデフォルト設定に戻ります。

​設定ファイルの作成

`tailwindcss` npm パッケージのインストール時に含まれる Tailwind CLI ユーティリティを使用して、プロジェクトの Tailwind 設定ファイルを作成します。

npx tailwindcss init

これにより、プロジェクトのルートに最小限の `tailwind.config.js` ファイルが作成されます。

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

​異なるファイル名の使用

`tailwind.config.js` 以外の名前を使用するには、コマンドライン引数として渡します。

npx tailwindcss init tailwindcss-config.js

カスタムファイル名を使用する場合は、Tailwind CLI ツールを使用して CSS をコンパイルする際に、コマンドライン引数として指定する必要があります。

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

Tailwind を PostCSS プラグインとして使用している場合は、PostCSS 設定でカスタム設定パスを指定する必要があります。

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
  },
}

または、`@config` ディレクティブを使用してカスタム設定パスを指定できます。

@config "./tailwindcss-config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

`@config` ディレクティブの詳細については、関数とディレクティブのドキュメントをご覧ください。

​ESM または TypeScript の使用

Tailwind CSS は ESM や TypeScript でも設定できます。

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

`npx tailwindcss init` を実行すると、プロジェクトが ES モジュールであるかどうかを検出し、適切な構文で設定ファイルが自動的に生成されます。

`--esm` フラグを使用して、ESM 設定ファイルを明示的に生成することもできます。

npx tailwindcss init --esm

TypeScript 設定ファイルを作成するには、`--ts` フラグを使用します。

npx tailwindcss init --ts

​PostCSS 設定ファイルの生成

`-p` フラグを使用すると、`tailwind.config.js` ファイルと同時に基本的な `postcss.config.js` ファイルも生成できます。

npx tailwindcss init -p

これにより、次のような `postcss.config.js` ファイルがプロジェクトに生成されます。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

​デフォルト設定全体の足場構築

ほとんどのユーザーにとって、設定ファイルはできるだけ小さく保ち、カスタマイズしたいものだけを指定することをお勧めします。

Tailwind のデフォルト設定全体を含む完全な設定ファイルを足場化したい場合は、`--full` オプションを使用します。

npx tailwindcss init --full

Tailwind が内部的に使用しているデフォルト設定ファイルと一致するファイルが得られます。

​設定オプション

​コンテンツ

`content` セクションでは、すべての HTML テンプレート、JS コンポーネント、および Tailwind クラス名を含むその他のファイルへのパスを設定します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  // ...
}

コンテンツソースの設定の詳細については、コンテンツ設定のドキュメントをご覧ください。

​テーマ

`theme` セクションでは、カラーパレット、フォント、タイプスケール、ボーダーサイズ、ブレークポイントなど、サイトのビジュアルデザインに関するすべてのものを定義します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

デフォルトのテーマとカスタマイズ方法の詳細については、テーマ設定ガイドをご覧ください。

​プラグイン

plugins セクションでは、追加のユーティリティ、コンポーネント、ベーススタイル、またはカスタムバリアントを生成するために使用できる、Tailwindにプラグインを登録できます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],
}

独自のプラグインの作成については、プラグイン作成ガイドをご覧ください。

​プリセット

presets セクションでは、Tailwindのデフォルトのベース設定を使用する代わりに、独自の カスタムベース設定を指定できます。

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

  // Project-specific customizations
  theme: {
    //...
  },
}

プリセットの詳細については、プリセットドキュメントをご覧ください。

​プレフィックス

prefix オプションを使用すると、Tailwindで生成されるすべてのユーティリティクラスにカスタムプレフィックスを追加できます。これは、名前の競合が発生する可能性のある既存のCSSの上にTailwindを重ねる際に非常に役立ちます。

たとえば、tw-プレフィックスを次のようにprefixオプションを設定することで追加できます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'tw-',
}

これで、すべてのクラスに設定されたプレフィックスが付加されます。

.tw-text-left {
  text-align: left;
}
.tw-text-center {
  text-align: center;
}
.tw-text-right {
  text-align: right;
}
/* etc. */

このプレフィックスは、バリアント修飾子の後に追加されることに注意することが重要です。つまり、sm:やhover:などのレスポンシブまたはステート修飾子を持つクラスでは、レスポンシブまたはステート修飾子が先にあり、カスタムプレフィックスはコロンの後に表示されます。

<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>

負の値のダッシュ修飾子は、プレフィックスの前に追加する必要があります。そのため、プレフィックスとしてtw-を設定した場合、-mt-8は-tw-mt-8になります。

<div class="-tw-mt-8">
  <!-- -->
</div>

プレフィックスは、Tailwindによって生成されたクラスのみに追加されます。**独自の カスタムクラスにはプレフィックスは追加されません。**

つまり、次のように独自のユーティリティを追加した場合

@layer utilities {
  .bg-brand-gradient { /* ... */ }
}

…生成されたバリアントには、設定されたプレフィックスは追加されません。

.bg-brand-gradient { /* ... */ }
.hover\:bg-brand-gradient:hover { /* ... */ }

独自のユーティリティにもプレフィックスを追加する場合は、クラス定義にプレフィックスを追加するだけです。

@layer utilities {
  .tw-bg-brand-gradient { /* ... */ }
}

​重要

important オプションを使用すると、Tailwindのユーティリティに!importantを付けるかどうかを制御できます。これは、高い特異性のセレクタを持つ既存のCSSとTailwindを使用する場合に非常に役立ちます。

ユーティリティを!importantとして生成するには、設定オプションでimportantキーをtrueに設定します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
}

これで、Tailwindのすべてのユーティリティクラスが!importantとして生成されます。

.leading-none {
  line-height: 1 !important;
}
.leading-tight {
  line-height: 1.25 !important;
}
.leading-snug {
  line-height: 1.375 !important;
}
/* etc. */

これは、@layer utilitiesディレクティブを使用してCSSで定義するカスタムユーティリティにも適用されます。

/* Input */
@layer utilities {
  .bg-brand-gradient {
    background-image: linear-gradient(#3490dc, #6574cd);
  }
}

/* Output */
.bg-brand-gradient {
  background-image: linear-gradient(#3490dc, #6574cd) !important;
}

​セレクタ戦略

importantをtrueに設定すると、要素にインラインスタイルを追加するサードパーティのJSライブラリを組み込む際に、いくつかの問題が発生する可能性があります。そのような場合、Tailwindの!importantユーティリティはインラインスタイルを無効にするため、意図したデザインが壊れる可能性があります。

これを回避するために、importantを#appのようなIDセレクタに設定できます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  important: '#app',
}

この設定により、すべてのユーティリティに指定されたセレクタがプレフィックスとして追加され、実際には!importantにすることなく、特異性を効果的に高めます。

importantセレクタを指定した後、サイトのルート要素がそれに一致するようにする必要があります。上記の例を使用すると、スタイルを正しく機能させるために、ルート要素のid属性をappに設定する必要があります。

設定がすべて完了し、ルート要素がTailwind設定のセレクタと一致すると、Tailwindのすべてのユーティリティは、プロジェクトで使用されている他のクラスを無効にするのに十分な特異性を持つようになります。**インラインスタイルを干渉することなく**

<html>
<!-- ... -->
<style>
  .high-specificity .nested .selector {
    color: blue;
  }
</style>
<body id="app">
  <div class="high-specificity">
    <div class="nested">
      <!-- Will be red-500 -->
      <div class="selector text-red-500"><!-- ... --></div>
    </div>
  </div>

  <!-- Will be #bada55 -->
  <div class="text-red-500" style="color: #bada55;"><!-- ... --></div>
</body>
</html>

セレクタ戦略を使用する場合は、ルートセレクタを含むテンプレートファイルがコンテンツ設定に含まれていることを確認してください。そうしないと、本番環境向けにビルドする際にすべてのCSSが削除されます。

​重要修飾子

あるいは、先頭に!文字を追加することで、任意のユーティリティを重要にすることができます。

<p class="!font-medium font-bold">
  This will be medium even though bold comes later in the CSS.
</p>

!は常にユーティリティ名の先頭に、バリアントの後、プレフィックスの前に置かれます。

<div class="sm:hover:!tw-font-bold">

これは、制御できないスタイルと競合しているため、特異性を高める必要があるまれな状況で役立ちます。

​セパレータ

separatorオプションを使用すると、修飾子（画面サイズ、hover、focusなど）とユーティリティ名（text-center、items-endなど）を区切るために使用する文字をカスタマイズできます。

デフォルトではコロン（:）を使用していますが、クラス名に特殊文字を使用できないPugなどのテンプレート言語を使用している場合は、これを変更すると便利です。

/** @type {import('tailwindcss').Config} */
module.exports = {
  separator: '_',
}

​コアプラグイン

corePluginsセクションでは、プロジェクトで必要ない場合は、Tailwindがデフォルトで生成するクラスを完全に無効にできます。

特定のコアプラグインを無効にするには、それらのプラグインをfalseに設定するオブジェクトをcorePluginsに指定します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}

有効にするコアプラグインを安全リストに登録する場合は、使用するコアプラグインのリストを含む配列を指定します。

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

Tailwindのコアプラグインをすべて無効にして、独自の カスタムプラグインを処理するためのツールとしてTailwindを使用する場合は、空の配列を指定します。

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

参考として、すべてのコアプラグインのリストを以下に示します。

​複数の設定を使用する

異なるTailwind設定を使用して複数のCSSファイルを生成する必要があるプロジェクトでは、@configディレクティブを使用して、各CSSエントリポイントにどの設定ファイルを使用するかを指定します。

@config "./tailwind.site.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

`@config` ディレクティブの詳細については、関数とディレクティブのドキュメントをご覧ください。

​JavaScriptでの参照

クライアント側のJavaScriptで設定値を参照すると便利な場合があります。たとえば、ReactやVueコンポーネントでインラインスタイルを動的に適用する場合などに、テーマの値の一部にアクセスできます。

これを容易にするために、Tailwindは設定オブジェクトの完全にマージされたバージョンを生成するために使用できるresolveConfigヘルパーを提供します。

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]
// => '1rem'

fullConfig.theme.screens.md
// => '768px'

fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'

これは推移的に多くのビルド時依存関係をプルインし、クライアント側のバンドルサイズを大きくすることに注意してください。これを回避するには、babel-plugin-prevalのようなツールを使用して、ビルド時に設定の静的バージョンを生成することをお勧めします。

​TypeScript 型

tailwind.config.jsファイルのファーストパーティのTypeScript型を提供しています。これにより、あらゆる種類の便利なIDEサポートが提供され、ドキュメントを参照することなく設定を変更することが容易になります。

Tailwind CLIで生成された設定ファイルには、デフォルトで必要な型アノテーションが含まれていますが、TypeScript型を手動で設定するには、設定オブジェクトの上に型アノテーションを追加するだけです。

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