プリプロセッサとの併用

Tailwind は PostCSS プラグインであるため、Autoprefixer などの他の PostCSS プラグインと同様に、Sass、Less、Stylus、またはその他のプリプロセッサと併用できます。

重要なのは、Tailwind でプリプロセッサを使用する必要がないということです。Tailwind プロジェクトでは、通常、CSS をほとんど記述しないため、プリプロセッサを使用しても、カスタム CSS を多く記述するプロジェクトほどメリットがありません。

このガイドは、推奨される方法ではないため、制御できない理由でプリプロセッサと Tailwind を統合する必要がある人のための参考資料としてのみ存在します。

---

​PostCSS をプリプロセッサとして使用する

新しいプロジェクトに Tailwind を使用し、既存の Sass/Less/Stylus スタイルシートと統合する必要がない場合は、別のプリプロセッサを使用する代わりに、他の PostCSS プラグインを使用して使用するプリプロセッサ機能を追加することを強くお勧めします。

これには、いくつかの利点があります

• ビルドが高速になります。CSS は複数のツールで解析および処理する必要がないため、PostCSS のみを使用すると CSS のコンパイルがはるかに高速になります。
• 癖や回避策はありません。 Tailwind は CSS に @tailwind、@apply、theme() などの新しい非標準キーワードを追加するため、プリプロセッサから期待どおりの出力を得るために、CSS を煩わしく、直感的ではない方法で記述する必要があることがよくあります。PostCSS のみを使用することで、これを回避できます。

利用可能な PostCSS プラグインのかなり包括的なリストについては、PostCSS GitHub リポジトリ を参照してください。ただし、ここでは、独自のプロジェクトで使用し、推奨できる重要なプラグインをいくつか紹介します。

​ビルド時インポート

プリプロセッサが提供する最も便利な機能の 1 つは、CSS を複数のファイルに整理し、ブラウザではなく、ビルド時に `@import` ステートメントを事前に処理することで結合できることです。

PostCSS でこれを処理するための標準的なプラグインは、postcss-import です。

使用するには、npm 経由でプラグインをインストールします

npm install -D postcss-import

次に、PostCSS 設定の最初のプラグインとして追加します

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

`postcss-import` について注意すべき重要な点の 1 つは、CSS の仕様に厳密に準拠しており、ファイルの最上部を除くすべての場所で `@import` ステートメントを許可しないことです。

/* components.css */

.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

/* Will not work */
@import "./components/card";

この問題に対する最も簡単な解決策は、通常の CSS とインポートを同じファイルに混在させないことです。代わりに、インポート用のメインエントリポイントファイルを 1 つ作成し、すべての実際の CSS を別のファイルに保存します。

/* components.css */
@import "./components/buttons.css";
@import "./components/card.css";

/* components/buttons.css */
.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

/* components/card.css */
.card {
  padding: theme('spacing.4');
  /* ... */
}

この状況が発生する可能性が最も高いのは、`@tailwind` 宣言を含むメイン CSS ファイルです。

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

これは、各 `@tailwind` 宣言に別々のファイルを作成し、それらのファイルをメインスタイルシートにインポートすることで解決できます。これを簡単にするために、`node_modules` から直接インポートできる、各 `@tailwind` 宣言用の個別のファイルをすぐに使用できるように提供しています。

`postcss-import` プラグインは `node_modules` フォルダ内のファイルを自動的に検索するのに十分スマートであるため、パス全体を指定する必要はありません。たとえば、` "tailwindcss/base" ` で十分です。

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

​ネスティング

ネストされた宣言のサポートを追加するために、バンドルされた `tailwindcss/nesting` プラグインをお勧めします。これは、postcss-nested または postcss-nesting をラップし、選択したネスティングプラグインが Tailwind のカスタム構文を正しく理解できるようにする互換性レイヤーとして機能する PostCSS プラグインです。

`tailwindcss` パッケージ自体に直接含まれているため、使用するには、PostCSS 設定の Tailwind の前に追加するだけです

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

デフォルトでは、Sass のような構文を使用する postcss-nested プラグインを内部で使用します。これは、Tailwind CSS プラグイン API でネスティングサポートを提供するプラグインです。

postcss-nesting（現在策定中の CSS Nesting 仕様に基づく）を使用する場合は、まずプラグインをインストールしてください。

npm install -D postcss-nesting

次に、PostCSS 設定でプラグイン自体を tailwindcss/nesting の引数として渡します。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    autoprefixer: {},
  }
}

これは、何らかの理由で非常に特定のバージョンの postcss-nested を使用する必要があり、tailwindcss/nesting 自体にバンドルされているバージョンをオーバーライドしたい場合にも役立ちます。

プロジェクトで postcss-preset-env を使用している場合は、ネストを無効にして、代わりに tailwindcss/nesting で処理するようにしてください。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    'postcss-preset-env': {
      features: { 'nesting-rules': false },
    },
  }
}

​変数

現在、CSS 変数（正式にはカスタムプロパティ）は、ブラウザのサポートが非常に優れているため、プリプロセッサを使用しなくても変数を使用できます。

:root {
  --theme-color: #52b3d0;
}

/* ... */

.btn {
  background-color: var(--theme-color);
  /* ... */
}

Tailwind自体でCSS変数を広範囲に使用しているため、Tailwindを使用できる場合は、ネイティブのCSS変数を使用できます。

また、過去に変数を使用していたことのほとんどは、Tailwindの theme() 関数で置き換えることができる場合があります。この関数は、tailwind.config.js ファイルからすべてのデザイントークンにCSSで直接アクセスできるようにします。

.btn {
  background-color: theme('colors.blue.500');
  padding: theme('spacing.2') theme('spacing.4');
  /* ... */
}

関数とディレクティブのドキュメントで、theme() 関数の詳細をご覧ください。

​ベンダープレフィックス

CSS のベンダープレフィックスを自動的に管理するには、Autoprefixer を使用する必要があります。

使用するには、npm 経由でインストールします。

npm install -D autoprefixer

次に、PostCSS 設定のプラグインリストの最後に追加します。

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

---

​Sass、Less、または Stylus の使用

最良の開発エクスペリエンスを得るには、PostCSSのみを使用し、TailwindプロジェクトでSassやLessなどのプリプロセッサを使用しないことを強くお勧めします。

Sass、Less、Stylus などのプリプロセッシングツールで Tailwind を使用するには、プリプロセスされた CSS を PostCSS で実行できる追加のビルド手順をプロジェクトに追加する必要があります。プロジェクトで Autoprefixer を使用している場合は、すでにこのような設定がされています。

既存のビルドプロセスに Tailwind を統合する方法の詳細については、Tailwind を PostCSS プラグインとしてインストールするに関するドキュメントを参照してください。

プリプロセッサで Tailwind を使用する場合に理解しておくべき最も重要なことは、**Sass、Less、Stylus などのプリプロセッサは Tailwind の前に個別に実行される**ということです。これは、たとえば、Tailwind の theme() 関数の出力を Sass のカラー関数にフィードできないことを意味します。なぜなら、theme() 関数は、Sass が CSS にコンパイルされ、PostCSS にフィードされるまで実際に評価されないからです。

.alert {
  background-color: darken(theme('colors.red.500'), 10%);
}

それとは別に、一部のプリプロセッサは Tailwind と一緒に使用すると癖があり、以下に回避策を概説します。

​Sass

Sass で Tailwind を使用する場合、@apply で !important を使用するには、補間を使用して正しくコンパイルする必要があります。

.alert {
  @apply bg-red-500 !important;
}

.alert {
  @apply bg-red-500 #{!important};
}

これに加えて、Sass は、括弧で囲まない限り、Tailwind の screen() 関数で問題が発生します。

@media screen(md) {
  .foo {
    color: blue;
  }
}

@media (screen(md)) {
  .foo {
    color: blue;
  }
}

技術的には、これによりメディアクエリに括弧が追加されますが、それでも機能します。

​Stylus

Stylus で Tailwind を使用する場合、CSS ルール全体を @css で囲んで、Stylus がそれをリテラル CSS として扱うようにしないと、Tailwind の @apply 機能を使用できません。

.card {
  @apply rounded-lg bg-white p-4
}

@css {
  .card {
    @apply rounded-lg bg-white p-4
  }
}

ただし、これには大きなコストがかかります。つまり、**@css ブロック内で Stylus 機能を使用できない**ということです。

別のオプションは、@apply の代わりに theme() 関数を使用し、実際の CSS プロパティを長い形式で記述することです。

.card {
  border-radius: theme('borderRadius.lg');
  background-color: theme('colors.white');
  padding: theme('spacing.4');
}

これに加えて、補間を使用して括弧で囲まない限り、Stylus は Tailwind の screen() 関数で問題が発生します。

@media screen(md) {
  .foo {
    color: blue;
  }
}

@media ({'screen(md)'}) {
  .foo {
    color: blue;
  }
}

技術的には、これによりメディアクエリに括弧が追加されますが、それでも機能します。