Tailwind CSS: ユーティリティクラスで要素をスタイリング

はじめに

この実験では、非常に人気のあるユーティリティファーストの CSS フレームワークである Tailwind CSS を紹介します。カスタムクラスを記述する従来の CSS とは異なり、Tailwind は HTML に直接組み合わせてあらゆるデザインを構築できる低レベルのユーティリティクラスを提供します。CDN 経由で Tailwind をセットアップする方法と、背景、テキスト、パディング、レイアウトのために基本的なユーティリティクラスをシンプルな Web ページ要素に適用する方法を学びます。最終的には、ユーティリティファースト CSS のパワーとスピードを実践的に理解できるようになります。

必要なindex.htmlファイルは、~/projectディレクトリに作成済みです。このファイルに Tailwind スタイルを適用するために、このファイルの変更に焦点を当てます。

HTML の head に Tailwind CSS CDN リンクを追加する

このステップでは、プロジェクトに Tailwind CSS を追加します。簡単なセットアップや学習目的のため、最も簡単な方法は Tailwind CSS CDN を使用することです。これには、HTML ファイルの<head>セクションに単一の<script>タグを追加します。

なぜ CSS ファイルがないのか？ 従来の CSS フレームワークとは異なり、Tailwind CSS はユーティリティファーストです。外部ファイルに CSS ルールを記述する代わりに、事前に構築されたユーティリティクラスを HTML に直接適用します。このアプローチにより、カスタム CSS ファイルが完全に不要になります。

公式ドキュメント： Tailwind CSS の完全なリファレンスについては、以下をご覧ください：https://tailwindcss.com/docs

まず、WebIDE の左側にあるファイルエクスプローラーを使用して、~/projectディレクトリにあるindex.htmlファイルを開きます。

次に、index.htmlファイルの<head>セクション内に以下の<script>タグを追加します。

<script src="https://cdn.tailwindcss.com"></script>

行を追加した後、index.htmlファイルは以下のようになります。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <!-- Tailwind CSS CDN will be added here -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div>Hello, Tailwind!</div>
  </body>
</html>

Ctrl+Sを押してファイルを保存します。まだ視覚的な変更は確認できませんが、Tailwind のユーティリティクラスはプロジェクトで使用できるようになりました。スタイルが適用されていないページを表示するには、Web 8080タブを開くことができます。

index.html tag

背景色に bg-blue-500 クラスを適用する

このステップでは、最初の Tailwind ユーティリティクラスを適用して、<div>要素の背景色を変更します。Tailwind では、背景色にbg-{color}-{shade}という命名規則を使用します。

参考：https://tailwindcss.com/docs/background-color

ここでは、中程度の青色の背景を適用するbg-blue-500クラスを使用します。

index.htmlファイルがまだ開いていない場合は、再度開きます。<div>要素を見つけて、class="bg-blue-500"を追加します。

<div class="bg-blue-500">Hello, Tailwind!</div>

これで、index.htmlファイル全体は以下のようになります。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="bg-blue-500">Hello, Tailwind!</div>
  </body>
</html>

ファイルを保存（Ctrl+S）し、Web 8080タブに切り替えます。これで、「Hello, Tailwind!」というテキストが青い背景のボックス内に表示されるはずです。

以前の実験では外部ファイルに CSS ルールを記述しましたが、Tailwind では HTML に直接適用できる事前構築済みのユーティリティクラスを提供します。カスタム CSS の記述は不要です。bg-blue-500、text-white、p-4のようなユーティリティを組み合わせるだけでデザインを構築できます。

主な利点：

開発の高速化: ファイルを切り替えることなく HTML で直接スタイリング
迅速なプロトタイピング: ユーティリティクラスでレイアウトを即座に構築
一貫したデザイン: 標準化されたスペーシング、カラー、サイジングのスケール
レスポンシブ内蔵: モバイルファーストのレスポンシブユーティリティが含まれています
AI フレンドリー: Tailwind は ChatGPT のような AI ツールとの連携を想定して設計されており、コード生成が容易になります。

文字色に text-white クラスを使用する

このステップでは、青い背景に対してより読みやすくするためにテキストの色を変更します。Tailwind のテキストカラーユーティリティは、text-{color}パターンに従います。テキストを白にするには、text-whiteクラスを使用します。

参考：https://tailwindcss.com/docs/text-color

要素に複数のクラスを追加するには、class属性内でスペースで区切ります。

index.htmlファイル内の<div>を修正して、text-whiteクラスを含めます。

<div class="bg-blue-500 text-white">Hello, Tailwind!</div>

クラス属性内のクラスの順序は関係ありません。

変更後、index.htmlファイルの body は以下のようになります。

<body>
  <div class="bg-blue-500 text-white">Hello, Tailwind!</div>
</body>

ファイルを保存（Ctrl+S）し、Web 8080タブを確認します。テキスト「Hello, Tailwind!」は白くなり、青い背景とのコントラストが向上しているはずです。

div tag

パディングに p-4 クラスを実装する

このステップでは、<div>要素に内部のスペース、つまりパディングを追加します。これにより、テキストが青いボックスの端に触れるのを防ぎます。Tailwind は、p-{size}形式のパディングユーティリティを提供します。

参考：https://tailwindcss.com/docs/padding

ここでは、要素の 4 つのすべての辺に中程度のパディング（デフォルトで 1rem または 16px）を適用するp-4クラスを使用します。

index.htmlの<div>要素のclass属性にp-4クラスを追加します。

<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>

index.htmlファイル's body は以下のようになります。

<body>
  <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>

ファイルを保存（Ctrl+S）し、Web 8080タブをリフレッシュします。テキストと青いボックスの境界線の間にスペースができ、デザインがよりすっきりして見えることに気づくでしょう。

div tag

レイアウトのために flex justify-center クラスを追加する

この最終ステップでは、スタイルが適用された<div>要素をページの中央に配置します。これは、Tailwind の Flexbox ユーティリティを使用して実現できます。

これを行うには、<body>タグにクラスを適用して、それをフレックスコンテナにし、そのコンテンツを中央揃えにします。

flex: このクラスは要素にdisplay: flexを適用します。
justify-center: このクラスは、フレックスアイテムを主軸（デフォルトでは水平方向）に沿って中央揃えにします。
h-screen: このクラスは要素の高さをビューポートの高さの 100% に設定します。これは垂直方向の中央揃えを機能させるために必要です（ここでは水平方向の中央揃えのみを行っていますが、ページ全体レイアウトでは良い習慣です）。

index.htmlファイル内の<body>タグを修正して、これらのクラスを追加します。

<body class="flex justify-center h-screen">
  <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>

これで、完全なindex.htmlファイルは以下のようになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex justify-center h-screen">
    <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
  </body>
</html>

ファイルを保存（Ctrl+S）し、Web 8080タブで結果を表示します。スタイルが適用されたボックスが、ページの中央に水平方向に配置されているはずです。

まとめ

実験の完了おめでとうございます！Tailwind CSS の世界への最初の一歩を踏み出しました。この実験では、CDN を使用して Tailwind を HTML ファイルに統合する方法を学びました。その後、ユーティリティファーストフレームワークのコアコンセプトを、HTML 要素に直接いくつかのクラスを適用することで実践しました。背景色（bg-blue-500）、テキスト色（text-white）、パディング（p-4）、Flexbox レイアウト（flex、justify-center、h-screen）のユーティリティの使用に慣れました。この基礎知識は、より複雑でレスポンシブなデザインを迅速かつ一貫性を持って構築するのに役立ちます。

Tailwind によるモダン CSS ユーティリティ