プリプロセッサでの使用

Sass、Less、Stylusなどの一般的なCSSプリプロセッサでTailwindを使用するためのガイド。


TailwindはPostCSSプラグインであるため、Autoprefixerなどの他のPostCSSプラグインと同じように、Sass、Less、Stylus、またはその他のプリプロセッサで使用することを妨げるものは何もありません。

Tailwindでプリプロセッサを使用する必要はないことに注意することが重要です。通常、Tailwindプロジェクトで作成するCSSはごくわずかであるため、プリプロセッサを使用することは、多くのカスタムCSSを作成するプロジェクトの場合ほど有益ではありません。

このガイドは、何らかの理由でTailwindをプリプロセッサと統合する必要がある、または統合したい人のためのリファレンスとしてのみ存在します。


Using PostCSS as your preprocessor

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

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

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

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

Build-time imports

プリプロセッサが提供する最も便利な機能の1つは、CSSを複数のファイルに編成し、ブラウザではなく事前に@importステートメントを処理することにより、ビルド時にそれらを組み合わせる機能です。

PostCSSでこれを処理するための正規のプラグインはpostcss-importです。

これを使用するには、npmを介してプラグインをインストールします。

# npm
npm install postcss-import

# yarn
yarn add postcss-import

次に、PostCSSコンフィギュレーションの最初のプラグインとして追加します。

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

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

これは動作しません、`@ import`ステートメントを最初に指定する必要があります。

/* components.css */

.btn {
  @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}

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

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

インポートと実際のCSSに別々のファイルを使用する

/* components.css */
@import "./components/buttons.css";
@import "./components/card.css";
/* components/buttons.css */
.btn {
  @apply px-4 py-2 rounded font-semibold bg-gray-200 text-black;
}
/* components/card.css */
.card {
  @apply p-4 bg-white shadow rounded;
}

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

これは動作しません。`@import`ステートメントを最初に指定する必要があります

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

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

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

これを解決するには、@tailwind宣言をそれぞれ独自のファイルに入れます。 これを簡単にするために、node_modulesから直接インポートできるフレームワーク自体を含む@tailwind宣言ごとに個別のファイルを提供します。

提供されているCSSファイルをインポートします

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

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

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

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

Nesting

ネストされた宣言のサポートを追加するには、次の2つのオプションがあります。

  • postcss-nested Sassによく似た構文を使用します。

  • postcss-nesting これはCSSNesting仕様に準拠しており、将来的にはブラウザで直接利用できるようになることを願っています。

これらのプラグインのいずれかを使用するには、npmを介してそれらをインストールします。

# npm
npm install postcss-nested  # or postcss-nesting

# yarn
yarn add postcss-nested  # or postcss-nesting

次に、それらをPostCSS構成に追加します。これは、Tailwind自体の後、Autoprefixerの前のどこかにあります。

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'), // or require('postcss-nesting')
    require('autoprefixer'),
  ]
}

Variables

最近のCSS変数(正式にはカスタムプロパティとして知られています)のブラウザのサポートは本当に優れています。 したがって、実際には変数のプラグインはまったく必要ないかもしれません。

ただし、IE11をサポートする必要がある場合は、postcss-custom-propertiesプラグインを使用して、変数のフォールバックを自動的に作成できます。

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

# npm
npm install postcss-custom-properties

# yarn
yarn add postcss-custom-properties

次に、それをPostCSS構成に追加します。これは、Tailwind自体の後、Autoprefixerの前のどこかにあります。

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested'),
    require('postcss-custom-properties'),
    require('autoprefixer'),
  ]
}

Future CSS features

postcss-preset-envプラグインを使用して、今後数十のCSS機能のサポートをプロジェクトに追加できます。

使用するには、npm経由でインストールしてください。

# npm
npm install postcss-preset-env

# yarn
yarn add postcss-preset-env

次に、Tailwind自体の後のどこかでPostCSS構成に追加します。

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-preset-env')({ stage: 1 }),
  ]
}

CSS変数、ネスト、および自動プレフィックスがすぐに使える状況になっていることに注意することが重要です。 したがって、postcss-preset-envを使用している場合は、これらの機能に個別のプラグインを追加する必要はありません。


Using Sass, Less, or Stylus

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

正確な手順は、使用しているビルドツールによって異なるため、Tailwindを既存のビルドプロセスに統合する方法の詳細については、インストールドキュメントを参照してください。

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

これは動作しません、Sassが最初に処理されます

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

最も結束していて、効率よい開発エクスペリエンスを得るには、PostCSSのみを使用することをお勧めします。

それとは別に、Tailwindで使用する場合、各プリプロセッサには独自の癖が1つか2つあります。これについては、以下の回避策で概説します。

Sass

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

これは動作しません、Sassは!importantについて不平を言います

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

回避策として補間を使用する

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

Less

TailwindをLessで使用する場合、Tailwindの@screenディレクティブをネストすることはできません。

これは動作しません、Lessはそれがメディアクエリであることを認識していません

.card {
  @apply rounded-none;

  @screen sm {
    @apply rounded-lg;
  }
}

代わりに、通常のメディアクエリをtheme()関数と一緒に使用して画面サイズを参照するか、単に@screenディレクティブをネストしないでください。

通常のメディアクエリとtheme()を使用する

.card {
  @apply rounded-none;

  @media (min-width: theme('screens.sm')) {
    @apply rounded-lg;
  }
}

トップレベルで@screenディレクティブを使用します

.card {
  @apply rounded-none;
}
@screen sm {
  .card {
    @apply rounded-lg;
  }
}

Stylus

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

これは動作しません、スタイラスは@applyについて文句を言います

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

@cssを使用して、スタイラスとしての処理を回避します

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

ただし、これにはかなりのコストがかかります。つまり、@cssブロック内でスタイラス機能を使用することはできません。

もう1つのオプションは、@applyの代わりにtheme()関数を使用し、実際のCSSプロパティを長い形式で書き出すことです。

Use theme() instead of @apply

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

これに加えて、Stylusは@screenディレクティブのネストを(Lessのように)サポートしていません。

これは動作しません、スタイラスはそれがメディアクエリであることを認識していません

.card {
  border-radius: 0;

  @screen sm {
    border-radius: theme('borderRadius.lg');
  }
}

代わりに、通常のメディアクエリをtheme()関数と一緒に使用して画面サイズを参照するか、単に@screenディレクティブをネストしないでください。

通常のメディアクエリとtheme()を使用する

.card {
  border-radius: 0;

  @media (min-width: theme('screens.sm')) {
    border-radius: theme('borderRadius.lg');
  }
}

トップレベルで@screenディレクティブを使用します

.card {
  border-radius: 0;
}
@screen sm {
  .card {
    border-radius: theme('borderRadius.lg');
  }
}

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!