Tailwind CSSのカスタマイズ方法を解説、基本的な機能を維持しつつ、スタイルを変更・追加するテクニック

Tailwind CSSはユーティリティクラスのフレームワークですが、すべてのスタイルは用意されていません。カラーを増やしたり、ブレイクポイントを増やしたり、マージンやパディングの値を増やしたり、カスタマイズ方法を紹介します。

また、Tailwind UIのUIコンポーネントをそのまま使用すると、似たデザインになってしまうことがあります。そんな時にもカスタマイズができると独自のデザインで実装できます。

Customizing Tailwind CSS
by allround.io

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• Tailwind CSSのカスタマイズの準備
• スペースとブレークポイントをカスタマイズ
• ベースのスタイルを拡張
• プリセットの使用と作成
• 終わりに

はじめに

Bootstrapの黄金期のように、Tailwind CSSのような人気のあるCSSフレームワークが登場すると、多くのWebサイトが非常に似たものになってしまう危険が伴います。特に、Tailwind UIのUIコンポーネントを使用すると、Webサイトやアプリのほぼすべての部分で美しいデフォルトを簡単に使用できます。誤解しないでほしいのですが、これらのコンポーネントは全体的に美しく、それらを使用してサイトやアプリを素早くローンチすることは非常に理にかなっていると思います。

ただし、欠点として、そのサイトやアプリが他のサイトや他のアプリと外観が似てしまうことです。つまり、デザインに永続的な印象を残し、独自のデザインがもたらすブランド認知度を得るチャンスを逃すことになります。

皮肉なことに、TailwindはベースとなるUIシステムとして非常に適しており、カスタマイズや独自のデザインにするのも非常に簡単です。多くの人は、独自デザインの利点を過小評価し、カスタマイズを後回しにしているようです。しかし、それではもったいないです！ この記事では、Tailwind CSSの基本的な機能を維持しつつ、デザインを変えるためのスタイルを変更・追加するテクニックを解説します。

Tailwind CSSやユーティリティクラスを使用したことがない人は、こちらの記事をご覧ください。すでに、Tailwindに慣れ親しんでいる人はすばらしいです、さっそく始めてみましょう！

Tailwind CSSについて詳しく知りたい人は、以前の記事も参考にどうぞ。

• Tailwind CSSが私には合わなかった理由
• Tailwind CSSのメリットとデメリット
• Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる
• CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」
• Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました
• Tailwind CSSですぐに実装できるUIコンポーネントのまとめ -tailblocks

Tailwind CSSのカスタマイズの準備

まずは、HTML/CSSとJavaScriptだけで構成された非常に基本的なファイルを用意しましょう。VueやLaravelなどのフレームワークを使用したTailwind CSSのセットアップは、既存のビルドステップに統合するためのより良い方法があるため、異なる場合があります。それを行う方法の解説は、公式に素晴らしいドキュメントが用意されています。

ここではシンプルに、必要最低限のものをターミナルから作成します。

次に、先ほど作成したPostCSSの構成ファイルに、以下の基本構成を追加して、CSSをコンパイルする際に何をすべきかを認識させる必要があります。一般的にTailwindはPostCSSのプラグインであり、他のプリプロセッサでも使用できます。

最後に、1つのコマンドを入力するだけですべてをまとめてコンパイルできるように、npmスクリプトを作成したいと思います。これがこのチュートリアルのビルドステップです。前述のように、Tailwind CSSを異なるフレームワークに統合する場合、このステップは通常の手順と異なるものになるかもしれません。

これで、完了です！
HTMLファイルにcompiled.cssをインクルードすることを確認すれば、OKです。テンプレートに必要なのはこれだけです。完了したら、カスタマイズを開始しましょう。

ベーステーマのスタイル、カラー・マージン・角丸・フォントなどのデフォルトを変更する際には、1つのファイルですべてをカスタマイズすることができます。そのファイルが上記で作成されたtailwind.config.jsです。デフォルトでは、下記のようになっています。

なぜ空なのか、実際のデフォルトのテーマはどこからきているのか、疑問に思ったかもしれません。デフォルトについて知りたい人のために、カスタマイズしなかった場合に適用されるデフォルトのファイル（defaultConfig.stub.js）を紹介します。

この記事の目的はカスタマイズなので、まずは独自のブランドカラーを追加してみましょう。

この新しいカラーのクラスをHTMLで使用できるようにするには、上記で定義したように、ターミナルからPostCSSコンパイラを呼び出して、ビルドステップを1回実行します。

これで、primaryと呼ばれる新しいクラスが利用できるようになりました。このクラスは上記で定義したすべてのプレフィックスと修飾語（light, dark）を使用できます。新しいクラスをボタンに適用して、ホバー時にダークになるように試してみましょう。

スペースとブレークポイントをカスタマイズ

レイアウトの重要な要素であるスペースとブレークポイントは、プロジェクトに応じて変更したり拡張したりする必要があるかもしれません。幸いなことに、これらをカスタマイズすることは、上記の独自カラーを追加することに比べると、さほど難しいことではありません。ただし、ブレークポイントは正しい順序で宣言する必要があるため、注意してください。
スペースとブレークポイントのカスタマイズ方法をまとめたので、解説します。

上部に新しいrequireステートメントがあり、スペースとブレークポイント用に2つの新しいブロックがあります。まず、スペースについて解説します。スペースはカラーを追加したのとよく似ています。実際、カラーと同じように機能しますが、lightのような修飾子に対応していないことだけが異なります（※スペースにはそういった修飾子は必要ありませんが）。

新しく定義したスペースを使用して、レイアウトに大きなスペースを追加することができるようになりました。例えば、.mama-bearというクラスを使用すると、すべての辺に15remのスペースを追加できます。

ブレークポイントは通常のCSS（メディアクエリを記述する場合）と同様で、記述の順序が重要で、ここが注意点です。この原則がTailwind CSSのブレークポイントにも当てはまります。デフォルトのsmの640pxより小さなブレークポイントを追加したい場合は、それより前に記述する必要があります。上記では、requireステートメントを使用してデフォルトのすべてのブレークポイントを取得し、改めてブレークポイントを定義する際に新しくxsを加えています。このようにしないと、メディアクエリが通常のCSSファイルにあるのと同様に、ブレークポイントも上書きされてしまいます。順序が重要です！

ベースのスタイルを拡張

独自のカラーを追加し、独自のスペースとブレークポイントを追加しました。今度はTailwindのベーススタイルを拡張することについて解説します。

Tailwindは完全にリセットされるため、クラスを適用しない限り、例えば通常のh1は見出しのように見えなくなっていることがすぐに分かると思います。これはデザインによるもので、実際にはかなりの柔軟性を提供します。ただし、複雑なコンポーネントを実装する際には、多くのクラスを使用しなくても、基本要素を特定のスタイルにしたいことがあります。それをするには、@applyルールを使用するのが良いでしょう。このルールにより、下記のように指定したCSSのセレクタに一連のルールを適用することができます。

これで、HTMLに直接クラスを適用することなく、CSSで要素に定義済みのプロパティを追加することができました。これにより、定義されたシステムから離れたり、同じことを繰り返すことなく、すべての要素に適切なデフォルトのスタイルを適用することができます。これは新しいユーティリティクラスを作成するのではなく、システムの一部を上書きするだけなので、カスタムCSSを必要とするより複雑な要素に最適です。

プリセットの使用と作成

Tailwind CSSを技術的にカスタマイズする方法を見てきましたが、もう一つのコンセプトとしてプリセットの使用方法についても知っておくべきでしょう。実際、Tailwind CSSのデフォルトのスタイルもプリセットに過ぎません。カラーやフォントなどの情報を一元管理したい場合や同じクライアントの異なるプロジェクトに携わる場合に、プリセットが非常に役立ちます。

プリセットを使用すると、1つのファイルtailwind.config.jsをベースとしてデフォルトのプリセットを拡張したのと同じように拡張して使用できます。つまり、すべての構成ファイルは、プリセットそのものです。下記のように構成ファイルに記述することで、プロジェクトのベースとして他のプリセットを使用できます。

プリセットの変数は配列であるため、複数のプリセットを基本にして、それらをベースにして構築することもできることが分かると思います。プリセットを使用する際の注意点は、ルールが重複している場合は通常のCSSと同様に順序通りに上書きされることです。

終わりに

この記事で解説した内容は、Tailwind CSSを使用してカスタムレイアウトを実装するために必要なすべてものばかりですが、まだカバーされていないこともあります。プラグインや本番環境で使用するためにTailwind CSSを最適化する方法について調べることをお勧めします。

プラグインについては、How To Write A Plugin For Tailwind CSSの記事をお勧めします。

公式サイトのOptimizing for Productionは、最適化について学ぶための良い出発点となります。

最後に、この記事で解説したソースコードはGitHubからダウンロードできます。