Tailwind CSS を Ruby on Rails プロジェクトに簡単に統合

すべての Web サイトにとってカスケード スタイル シート (CSS) の重要性は、どれだけ強調してもしすぎることはありません。最初の CSS 標準が 1996 年末に発行されて以来、私たちは機能とエコシステムに関してかなりの進歩を遂げてきました。

いくつかのフレームワークが登場し、人気があることが証明されていますが、最も新しいフレームワークの 1 つが Tailwind CSS です。

この投稿では、Ruby on Rails アプリケーションでの使用方法に入る前に、まず Tailwind のユーティリティ優先アプローチを検討します。 Tailwind を使用すると、カスタム CSS や長時間のデバッグ セッションを必要とせずに優れたウェブサイトを構築できることがわかります。

始めましょう!

Tailwind CSS:ユーティリティ第一のアプローチ

ほとんどの CSS フレームワーク (Foundation、Bootstrap、Bulma など) は、ボタンやフォーム フィールドなどのすぐに使用できるコンポーネントを提供しているため、ブロックをすばやく組み立ててインターフェースを形成できます。

通常、Bootstrap を使用してボタンを追加すると、次のようになります。

この例では、btn を適用することで単純なボタンが定義され、スタイルが設定されています。 と btn-primary クラス。 btn-primary 私たちのユースケースに適した色を設定します。しかし、そのインターフェースは私たちのニーズを満たすことができないため、カスタム CSS スタイルシートを追加してすべてのコンポーネントをカスタマイズします。

Tailwind は「実用性第一」のコンセプトです。ボタンなどのすぐに使用できるコンポーネントを提供する代わりに、カスタム デザインを構築するために作成できる低レベルのユーティリティ クラスが用意されています。そのため、事前定義されたクラスを HTML に直接適用する、スタイルに対するより機能的なアプローチが推奨されます。カスタム CSS の必要性を最小限に抑え、ユーティリティ クラスの制約を通じてデザインの一貫性を促進することを目的としています。

「ユーティリティファースト」とは、Tailwind が、複雑な設計を構築するために組み合わせることができるアトミックな単一目的のクラスを提供することを意味します。

Tailwind と Bootstrap を比較するコードをいくつか見てみましょう。まず、Tailwind で単純なボタンのスタイルを設定する方法を次に示します。

設定する一連のボタン要素クラスがあります。

• 背景色 bg-blue-500 : 「青」は事前に選択された色ですが、数値で色合いを設定できます。数値が大きいほど、色は暗くなります。
• ホバー時の背景色: hover:bg-blue-600 .
• 文字の色 text-white : ここは白なので番号は必要ありません。 text-red など、数値を指定しない場合は、常にデフォルトの色合いが存在します。
• 垂直パディング py-2 : 「p」はパディング、「y」は垂直軸、「2」は間隔の値で、ピクセル単位ではなく、Tailwind で定義されたスケールです。
• 水平パディング px-4 : 上記と同じですが、横軸は「x」です。
• 角を丸くする: rounded .

これは Bootstrap の例よりも冗長に見えますが、クラスを追加するだけでスタイルの各部分を調整できます。カスタム CSS クラスを作成する必要はありません。

これらの色に満足できないかもしれませんが、良いニュースは、カスタムの色を追加できることです。それについては後ほど説明します。

体重計についての一言

CSS はスペース (マージンやパディングなど) に関しては強力で、ピクセルとレム (root-em、ルート要素のサイズに対する相対的なサイズ) を操作できます。ただし、これは困難になりがちです。 Tailwind には、複雑さを隠しながら比例性を高める独自の間隔スケールが付属しています。

デフォルトでは、Tailwind は 0 ～ 96 の値を提供し、各ステップは他のステップに比例します。たとえば、値 16 は 8 の 2 倍のスペースがあります 。このおかげで、レムやピクセルを扱うために計算を行う必要がありません。好みの値を定義し、設計全体で再利用できます。

間隔の詳細については、Tailwind CSS のドキュメントを参照してください。

Ruby on Rails 環境での Tailwind のセットアップ

Ruby on Rails 7.x は、アプリケーション ジェネレーターで Tailwind を直接サポートします。

この記事に不必要な複雑さが加わることを避けるため、テスト構成 (-T) をスキップします。

Tailwind には、アプリケーションに必要な CSS ファイルを生成する優れた機能があります。他のフレームワークでは、フレームワークを定義する CSS ファイル全体 (使用しない部分も含む) を含める必要があります。対照的に、Tailwind はプロジェクトをスキャンし、プロジェクトに必要なクラスのみを含む CSS ファイルを生成します。

これを実現するには、小さなユーティリティを実行する必要があります。開発モードでは、作業中に最新の状態に保つウォッチャー デーモンを実行できます:bin/rails tailwindcss:watch .

ウォッチャー デーモンを Procfile に追加することもできます。 次に、foreman を使用します。 または overmind web を開始するには と css プロセス:

それでは、単純なランディング ページ内で使用してみましょう:

次に、http://localhost:3000/landing/index に移動します。

ランディング ページを分析する

すべてのランディング ページにはタイトルが必要です。 Tailwind を CSS フレームワークとして使用するようにアプリケーションを構成したため、ジェネレーターは機能します。

ここには標準の HTML のようなものが見つかります。 h1 タグには 2 つのクラスしかありません:

• font-bold :フォントの太さを制御します。
• text-4xl :フォント サイズを制御します。

text-4xl を変更すると text-xl へ ページをリロードすると、新しいスタイルが自動的に適用されます。 Foreman が実行されているターミナルを見ると、Tailwind がバックグラウンドでスタイルシートを再度生成していることがわかります。Tailwind を Ruby on Rails アプリケーションに統合するのは非常に簡単です (これは tailwindcss-rails gem に依存しています)。

Ruby on Rails 用に Tailwind を構成する

config/tailwind.config.js を編集できます。 このファイルを使用して、Tailwind の設定を調整します (色を追加する、使用するフォントを指定する、間隔を調整するなど)。

たとえば、背景とテキストに「銅」色を追加できます。

色合いは役に立ちますが、代わりに名前を付けることもできることに注意してください。たとえば、3 つの色合いだけが必要な場合は、ビューで数字の代わりに「ライト」、「ミディアム」、「ダーク」を使用できます。

これで、タイトルに色合いを使用できるようになります。

これについての詳細は、tailwindcss-rails gem の README と Tailwind CSS ドキュメントでご覧いただけます。

アセット パイプライン

bin/rails tailwindcss:watch の方法を見てきました。 ローカル開発モードでスタイルシートを常に更新します。スタイルシートを 1 回だけ構築する必要がある場合は、bin/rails tailwindcss:build を使用できます。 代わりに。

運用環境で使用する場合は、bin/rails assets:precompile を使用できます。 bin/rails tailwindcss:build を直接呼び出す .

Ruby on Rails アプリケーションのアセット パイプラインの詳細をご覧ください。

実際のレールへの追い風

フォームと応答性の高いナビゲーション バーなど、いくつかのビューでの Tailwind の実際的な使用法をいくつか確認してみましょう。

シンプルなフォーム

Ruby on Rails ジェネレーターを使用して、user を作成します。 リソース:

次に、users_controller.rb を変更できます。 ファイルを開き、フォームのビューを作成します。

各部分を個別にスタイルし、テキストの色、背景色、境界線、パディング、余白などを調整します。ここでは標準の Tailwind を超えるものは何もありませんが、ニーズに合わせてフォームをカスタマイズします。

応答性の高いナビゲーション バー

Tailwind のユーティリティ クラスを使用して、ブラウザの最小幅に基づいて条件付きブレークポイントを追加できます。たとえば、次のタイトルはウィンドウ サイズに応じて色が変わります。

デフォルトでは、色は暗い灰色です。ブラウザ ウィンドウの幅が 640 ピクセルから 1024 ピクセルの場合、青緑の色合いになります。ウィンドウの幅が 1024 ピクセルを超える場合、紫の色合いになります。

Tailwind は列も処理できるため、要素の列幅がウィンドウ サイズに基づいてどのように変化するかを示す例を次に示します。

この場合、ラベル「State」は 2 列または 3 列にまたがります。

ここでは、Tailwind のグリッド レイアウト ユーティリティを使用して、次のようなグリッドを定義します。

• デフォルトでは 1 列幅 (grid-cols-1) )
• 幅 640 ピクセルを超える 6 列の幅
• 幅 768 ピクセルを超える 8 列の幅

ブレークポイントとその幅:

• sm :640ピクセル
• md :768ピクセル
• lg :1024ピクセル
• xl :1280ピクセル
• 2xl :1536ピクセル

これまで見てきたように、Tailwind はページのデザインとコンポーネントのスタイルを簡素化します。

Tailwind と他のフレームワークの比較

Tailwind の使用方法を理解したところで、他のフレームワークとの主な違いを確認してみましょう。

• ユーティリティベース: 特定の CSS クラスを使用して各要素のスタイルを作成し、それぞれがスタイルの異なる部分に焦点を当てます。
• 必要なものを入手します: ウェブサイトの出荷に必要な部分のみを取得するため、読み込み時間が短縮されます。ビルド時間を最適化します。
• 拡張可能: 簡単な構成ファイルを通じて、TailwindCSS のデフォルトを拡張またはカスタマイズできます。
• 色のシェーディングが簡単: たとえば、ホバー状況を処理するために色の明るさや暗さを作成する方法を考える必要はありません。
• 単純な間隔: 非表示の比例スケールにより、間隔が単純化されます。
• カスタム CSS の削減: クラスを組み立てて要素をスタイル設定するだけなので、カスタム CSS への依存度が低くなり、HTML ファイルとスニペットを使用してスタイル（完全なテーマを含む）を共有できます。
• Ruby on Rails に優しい: Tailwind gem のおかげで、すべてがレイアウトとアセット パイプラインに統合されます。

まとめ

これまで見てきたように、Tailwind のユーティリティ第一のアプローチは Ruby on Rails に最適です。複雑なカスタム構成や追加のカスタム CSS を追加して、ニーズに合わせて Tailwind を調整するのに時間を費やす必要はありません。ビューとパーシャルを構想するとき、Tailwind ユーティリティ クラスを使用してそれらを形成し、スタイル設定することができます。

さらに詳しく知りたい場合は、Tailwind の活気に満ちたコミュニティや、(Tailwind の作成者による) TailwindUI などの製品のおかげで、すぐに使用できる多くのテンプレートやコンポーネントにアクセスできます。

コーディングを楽しんでください!

追記Ruby Magic の投稿を報道後すぐに読みたい場合は、Ruby Magic ニュースレターを購読して、投稿を 1 つも見逃さないようにしてください。

トーマス・リブーレ

ゲスト著者の Thomas は、フランスを拠点とするバックエンド コンサルタント兼クラウド インフラストラクチャ エンジニアです。 13 年以上にわたり、スタートアップや企業と協力してチーム、製品、インフラストラクチャを拡張してきました。彼は、フランスの GNU/Linux マガジンやブログにも何度か掲載されています。

Thomas Riboulet によるすべての記事