Tailwind CSS は、多くのクラスを提供する人気のある CSS フレームワークの 1 つです。このクラスは、Web 開発ワークフローを合理化し、強化するのに役立ちます。膨大な数のクラスの中には、開発者がおそらくまだ聞いたことがないクラス、過小評価されているクラス、または比較的新しいクラスもあります。

これらのクラスには、開発ワークフローを合理化し、Web インターフェイスの美しさを高め、生産性を向上させる計り知れない可能性があります。

このチュートリアルでは、コンテナ クラス、サイズ ユーティリティ、スペース ユーティリティ、ラインクランプ ユーティリティ、リング ユーティリティ、およびトランケート ユーティリティの 6 つのクラスを調べます。このチュートリアルでは Tailwind の CDN を使用します。

コンテナクラス

コンテナ クラスを使用すると、ブラウザに基づいてサイズを拡大縮小するコンテナを作成できます。現在のブレークポイントの最小幅と一致するように要素の最大幅を設定するように設計されており、さまざまな画面サイズに対応できるようになります。

この応答性は、ビューポート サイズに基づいてコンテナの幅を調整することで実現され、コンテナ内のコンテンツがさまざまなデバイス間で適切に表示されるようになります。

詳しく説明すると、Tailwind CSS は、特定の最小幅に対応する、sm、MD、lg、xl、2xl などの事前定義されたブレークポイントのセットを使用します。これらのブレークポイントは、さまざまな画面サイズにさまざまなスタイルを適用するため、カスタム メディア クエリを作成しなくても、レスポンシブ デザインを簡単に作成できます。 

コンテナ クラスはこれらのブレークポイントを利用して最大幅を適宜調整し、コンテナ内のコンテンツがブラウザのビューポート サイズに合わせて拡大縮小されて適応するようにします。 

これにより、ブレークポイントごとにカスタム CSS を記述する必要がなく、コンテンツの応答性が向上し、すべてのデバイスで適切に表示されるようになります。プロジェクト全体で一貫したレイアウト構造を提供することで時間を節約します。

以下はコンテナ クラスを示す例です:

  
Container Class
  

    This is a demonstration of the container class in Tailwind CSS. The
    container is centered and scales its size based on the viewport size.
  
  

    
      Click Me
    
  

ブラウザで結果を確認すると、次のようになります:

コンテナの幅が現在のブレークポイントに基づいて自動的に調整され、さまざまなデバイス間でコンテンツが適切に表示されることがわかります。

サイズユーティリティ

サイズユーティリティを使用すると、要素の幅と高さを同時に制御できます。この機能は、正方形の要素を作成したり、プロジェクト全体で要素の寸法が一貫していることを確認したりする場合に特に便利です。

サイズ ユーティリティには、特定のピクセル サイズに対するサイズ 48 などの固定ピクセル サイズや、スケールに基づいて幅と高さを適用するサイズ 2 などの Tailwind 設定からの事前定義されたサイズなど、さまざまなオプションが用意されています。 Tailwind 構成で定義されています。

サイズユーティリティの使用方法は次のとおりです:

  

    

      
Size 48
    
    

      
Size 64
    
    

      
Size 80
    
  

最初のボックスの場合、size-48 は幅と高さの両方を間隔スケールの 48 に設定します。 2 番目と 3 番目のボックスも同様の構造に従い、size-64 クラスと size-80classes がサイズを設定することを目的としています。

ブラウザで結果を確認すると、次のようになります:

スペースユーティリティ

スペース ユーティリティは要素間の間隔を制御するように設計されており、一貫した間隔で視覚的に魅力的なレイアウトを簡単に作成できます。 

Tailwind は、スペースを管理するための 2 つの主要なクラスを提供します。水平方向のスペース用の space-x と垂直方向のスペース用の space-y です。これらのクラスをコンテナ要素に適用すると、直接の子要素間にスペースが自動的に適用されます。

これは、デザイン全体で一貫した間隔を維持するために重要です。間隔を指定するカスタム CSS を記述する必要がなくなり、時間を節約でき、デザインの他の側面に集中できるようになります。

以下は、スペース ユーティリティを使用してフレックス コンテナ内のボタン間に水平方向のスペースを追加する方法の例です。

  

    

      

        
Card 1 Title
        

          Card 1 description or additional information.
        
      
    
    

      

        
Card 2 Title
        

          Card 2 description or additional information.
        
      
    
    

      

        
Card 3 Title
        

          Card 3 description or additional information.
        
      
    
  

上記のコードでは、space-y-4 ユーティリティが各カードの子要素間に垂直方向の間隔を適用し、それによって各カード内に一貫した間隔要素が作成されます。

ブラウザで結果を確認すると、次のようになります:

ラインクランプユーティリティ

行クランプ ユーティリティは、テキストのオーバーフローを制御するための強力なツールです。これは、一定の行数の後のテキストを視覚的に切り詰めるのに役立ちます。これは、特に目的の表示領域を超える可能性のある動的コンテンツを扱う場合に、クリーンで均一なレイアウトを維持するのに役立ちます。

以下は、ラインクランプ ユーティリティを使用してテキストを制御するカードの例です。

  

    
Card Title
    

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor
      et velit aliquam efficitur. Sed velit nisi, lacinia eu nisl id, lacinia
      lacinia nisl.
    
  
  

    #tag1
    #tag2
  

説明テキストは、テキストを 3 行に制限する line-clamp-3 クラスを使用して制御されます。テキストが 3 行を超える場合は切り詰められ、切り捨てを示す省略記号が追加されます。

これにより、カードの見た目がすっきりし、ユーザーは多すぎるテキストに圧倒されることなく内容をすぐに理解できるようになります。

ブラウザで結果を確認すると、次のようになります:

リングユーティリティ

リング ユーティリティは、要素の周囲に境界線を適用するために使用されます。また、要素にアウトライン シャドウやフォーカス リングを追加する方法も提供します。これは、古い shadow-outline クラスやshadow-xs クラスの優れた代替品であり、よりカスタマイズ可能なフォーカス状態を可能にします。 

カスタム CSS を必要とせずに、ボタンや入力フィールドなどのインタラクティブな要素に関する視覚的なフィードバックを提供することで、ユーザー エクスペリエンスを向上させます。リング ユーティリティは高度にカスタマイズ可能で、リングの幅、色、不透明度を制御できます。

以下はリングユーティリティの使用例です:

  

    
      Button 1
    
    
      Button 2
    
    
      Button 3
    
  

上記のコードでは、リング ユーティリティを使用してボタン要素の周囲にリング アウトラインを適用しています。これは幅と色の点でカスタマイズできます。

さらに、他のユーティリティと組み合わせて、ホバーやフォーカスなどのさまざまな状態に基づいてリングの外観を変更します。

このアプローチでは、ユーザーがボタンを操作するときに視覚的なフィードバックを提供することで、インタラクティブでアクセスしやすいデザインが可能になります。

ブラウザで結果を確認すると、次のようになります:

切り捨てユーティリティ

truncate ユーティリティは、Tailwind のテキスト オーバーフロー ユーティリティの 1 つで、余分なコンテンツを非表示にして省略記号 (...) に置き換えることによって、コンテナからオーバーフローしたテキストを切り詰めるのに使用されます。

これにより、指定された領域からテキストがこぼれることがなく、きれいでプロフェッショナルな外観が維持されます。テキストのオーバーフローによるレイアウトの問題を防ぎ、時間を節約します。

以下は、truncate ユーティリティの使用方法を示す例です:

  
Card Title
  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc
    at cursus pellentesque, nisl eros pellentesque quam, a faucibus nisl nunc id
    nisl.
  

truncate クラスは

タグに適用され、テキストがコンテナからオーバーフローした場合に省略記号でテキストを切り詰めます。

ブラウザで結果を確認すると、次のようになります:

これで終わりです!

結論

この記事では、生産性を向上させる 6 つのユーティリティ クラスを検討し、それぞれの例を示しました。

これらのユーティリティ クラスを理解すると、繰り返しの CSS コーディング タスクに過度の時間を費やすのではなく、ユニークで機能的なデザインの作成に集中できるようになります。