Tailwind CSSで背景を端まで広げずに表示する方法

1. コンテナを使用する方法: Tailwind CSSでは、コンテナクラスを使用してコンテンツの幅を制御できます。通常、背景はコンテナの外側に広がってしまいますが、以下の手順で解決できます。

   <div class="container mx-auto p-4">
    <div class="bg-white rounded-lg shadow-lg">
      <!-- コンテンツをここに追加 -->
    </div>
   </div>

   上記の例では、containerクラスでコンテナを作成し、mx-autoクラスで中央揃えにします。背景を表示したい要素は、コンテナ内に配置してください。

2. グリッドを使用する方法: Tailwind CSSのグリッドシステムを使用すると、背景を端まで広げずにコンテンツを配置することができます。

   <div class="grid grid-cols-12 gap-4">
    <div class="col-start-2 col-span-10 bg-white rounded-lg shadow-lg">
      <!-- コンテンツをここに追加 -->
    </div>
   </div>

   上記の例では、grid-cols-12クラスで12列のグリッドを作成し、col-start-2クラスとcol-span-10クラスでコンテンツの位置と幅を指定しています。

3. スタイルのカスタマイズ: Tailwind CSSでは、カスタムクラスを作成してスタイルをカスタマイズすることもできます。

   <style>
    .custom-bg {
      background-color: #f1f1f1;
      padding: 1rem;
      border-radius: 0.5rem;
      /* その他のスタイルを追加 */
    }
   </style>
   <div class="custom-bg">
    <!-- コンテンツをここに追加 -->
   </div>

   上記の例では、custom-bgクラスを作成して背景色、パディング、ボーダーの半径などを指定しています。このカスタムクラスを要素に適用することで、背景を端まで広げずにスタイリングできます。

以上の方法を使用することで、Tailwind CSSで背景を端まで広げずに表示することができます。必要に応じて、スタイルのカスタマイズや他のTailwind CSSのクラスを使用して、さらに詳細なデザインを実現することも可能です。