ともすたmedia
2025.11.27
Tailwind CSSの基本を学ぼう
記事を共有：
Tailwind CSS（テールウィンドCSS：以下、Tailwind）は、「CSSフレームワーク」と呼ばれるものの1つで、CSSをより柔軟に、簡単に書くことができるようにするためのフレームワーク（土台といった意味）です。
Tailwindのメリット
Tailwindを利用した場合、例えば文字の大きさを変更したい場合は次のように調整できます。
<h1 class="text-5xl">ToDoツール</h1>これだけで、文字サイズが大きくなります（詳細は後述）。
従来のCSSを使う場合、まずはclass属性をなんらか割り振って、別のCSSファイルに次のようにCSSのプロパティを定義しなければなりませんでした。
.title {
font-size: 24px;
}この時、クラスの名前をそれぞれで考えなければならなかったり、クラスの細かさ（粒度）を設計したり、他の要素との兼ね合いなど、さまざまなことを考えなければなりません。
そこで、Tailwindでは文字の大きさやレイアウト、色など、各要素に専用のクラス名を割り当て、それを組み合わせることで、自由にレイアウトが調整できるようにしました。
また、画面サイズの大きいデバイスと小さいデバイスでレイアウトを変更する「レスポンシブデザイン」や、夜になると画面が暗くなる「ダークモード」への対応、アニメーションの対応など、CSSでできる高度な調整も、簡単な記述で実現することができます。
こうして、現在では非常に広く利用されているフレームワークとなっています。この連載で、使い方を学んでいきましょう。
開発環境を整えよう
まずは、Tailwindを利用するにあたって、学習環境を整えましょう。Tailwindはエディタソフトがあれば開発ができます。近年、よく利用されているのが「Visual Studio Code（以下、VSCode）」なので、これをまずはインストールしておきましょう。
セットアップをして起動すると、最初は英語版で起動してしまいます。日本語版にしたい場合は、左側の「Extensions（拡張機能）」ボタンをクリックしましょう。
画面上部の検索窓に「japanese」などと入力すると、「Japanese Language Pack」という拡張機能が見つかるので、これをクリックして「Install」ボタンをクリックします。
インストールが終わったら、再起動すれば日本語で起動します。
その他の拡張機能をインストールしよう
もう1つ、これから作成するプロジェクトの確認に便利な拡張機能をインストールしましょう。先と同じ手順でパネルを開いたら、検索エリアに「liveserver」などと入力します。図の拡張機能が見つかったら、これをインストールしましょう。
また、Tailwindを利用するにあたって、専用の拡張機能も提供されているので、これもインストールしておきましょう。検索窓に「tailwind」などと入力して、図の拡張機能をインストールします。
これで準備完了です。
AI機能を有効にしよう
VSCodeには、AIのアシスト機能が搭載されています。これを利用するには、サインインする必要があるのでサインインしておきましょう。左側のプロフィールボタンをクリックし、「AI機能を利用するにはサインインしてください」メニューをクリックします。
いくつかのログイン方法がありますが、ここではGitHubでログインするのがおすすめです。アカウントも無料で作成できるので、是非この機会に作成しておきましょう。
メールアドレスとパスワード、ニックネーム（チームで開発するときなどに利用される名前）を入力し、国は「Japan」にしておきましょう。お知らせメールを受信するかをチェックして、アカウントを作成します。
こうして、ログインをするとVSCode上でAIの機能が利用できるようになります。
右端のチャットエリアで、分からないことを質問したり、エディタでコードを編集中にヘルプを表示してくれたりするので、これも活用しながら学習を進めていきましょう。
ファイルを作成しよう
それでは、VSCodeを使って早速学習をはじめて行きましょう。まずは、学習用のフォルダを準備します。ここでは、デスクトップなどに「tailwind」という名前で作成しました。
そしたら、このフォルダ自体をVSCodeで開いてしまうと便利です。
VSCodeを起動したら「ファイル→フォルダーを開く」メニューをクリックして、今作成したフォルダを指定しましょう。
画面左側の「エクスプローラー」パネルにフォルダ名が表示されます。ここで、ファイルを作成したり操作できます。
ではここで、右上のファイル作成ボタンをクリックし、「readme.html」という名前でファイルを作成しましょう。
エディタに、次のようなHTMLを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDoツールの使い方ガイド</title>
</head>
<body>
<header>
<h1>ToDoツール</h1>
<button>ツールを起動する</button>
</header>
</body>
</html>これを画面に表示すると、図のように見出しは大きく、ボタンはボタンらしい見た目で表示されます。
Tailwindを利用しよう
それでは早速、Tailwindを利用してみましょう。Tailwindの利用には「CDN」というしくみを利用する方法と、「パッケージマネージャー」などを利用して組み込む方法があります。ここではまずは、CDNを使った方法を紹介しましょう。
CDNとは「Content Delivery Network」の頭文字で、コンテンツ（ここではTailwindのライブラリ）をネット経由で利用するしくみのこと。次のページを確認しましょう。
サンプルに掲載されている「<script>」タグをコピーして貼り付けることで、利用できます。次の一文を「<head>」タグ内にコピーします。
...
<head>
...
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
...これで画面を表示すると、図のようにすべてが小さな文字で表示されます。
これは、Tailwindの「プリフライト」と呼ばれる機能が働いたためです。
プリフライト
Tailwindを組み込むと、HTMLのタグに標準で組み込まれるスタイルがすべて「リセット」されます。そのため、見出しもボタンも一切の装飾が排除されて、また余白などもなくなります。
HTMLだけを書いたときに、文字が大きくなったり太くなったりするのは、Webブラウザ自体に標準で搭載されている「標準CSS」と言われるものです。しかしこの標準CSSはWebブラウザごとに多少の差異があるため、これを元にスタイルを調整すると、Webブラウザごとで見た目を揃えることができません。そこで、一旦標準のCSSをすべてリセットしてからスタイルを調整するとやりやすくなります。
このCSSをリセットする機能がTailwindには搭載されていて、これを「プリフライト」と呼びます。
Tailwindを記述しよう
それでは、Tailwindを記述してみましょう。まずは、見出しの文字を大きくしてみましょう。次のように、class属性を追加します。
<h1 class="text-5xl">ToDoツール</h1>これをWebブラウザに表示すると、文字サイズがかなり大きくなります。
「text-」というのは、Tailwindでテキストを装飾するためのクラスです。Tailwindでは、たいていの場合このようにハイフンで区切られたクラス名が使われていて、「機能-設定内容」という順番で指定します。例えばここでは、「文字の大きさ（text）を、5xlの大きさにする」という意味になります。
5xlは、xsからsm、lg、xlと来て、そこから先は2xl, 3xl, 4xlと9xlまでの大きさが準備されています。また、標準のサイズは「text-base」となります。
どのような値が準備されているかなどは、リファレンスを確認しましょう。
このクラスを指定することで、どんなCSSが割り当たるかも分かり、例えば「text-」プロパティでは「font-size」プロパティの他に、行の高さを指定する「line-height」もそれに合わせて指定されることが分かります。
「5xl」が実際にどのような大きさになるかは、Tailwindの設定などにも寄ってきます。追って「カスタマイズ」についても紹介しましょう。
任意の値に設定する
Tailwindを利用している場合、後で調整がしやすいように「sm」や「xl」などの、相対的な指定を使うことが推奨されますが、場合によっては大きさを固定したい場合もあります。そのような場合は、直接値を指定することもできます。次のように変更しましょう。
<h1 class="text-[16px]">ToDoツール</h1>「[ ]」の中に値を記述すると、それが反映されます。
複数のクラスを指定する
フォントを調整するクラスには、この他にも太さやフォントファミリーを変更する「font-」や、斜体にする「italic」、文字の間隔を調整する「tracking-」等があります。例えば、次のように記述しましょう。
<h1 class="text-5xl font-extrabold tracking-tight">ToDoツール</h1>Tailwindのクラスは、CSSのクラス名と同様に半角空白で区切って指定できます。ここでは、文字の太さを「Extra Bold」にし（font-extrabold）、文字の間隔を縮める（tracking-tight）ような指定をしました。
ボタンをデザインしてみよう
続いて、ボタンのデザインを整えてみましょう。先の通り、Tailwindではプリフライトによってボタンなども標準のスタイルはすべてなくなり、テキストと見分けがつかなくなってしまいます。
そのため、ボタンの場合は必ずクリックが可能なような見た目に調整する必要があります。ここではまずは、背景色を敷いてみましょう。
次のように追加します。
<button class="bg-blue-600">ツールを起動する</button>「bg-」は背景色（BackGround）」を調整するクラスで、ここでは、青に指定しています。
その後の数字は、「暗さ」を表す数字で大きいほど暗い青になります。
各色は、以下のリファレンスを参考にしましょう。
合わせて、文字の色も変更しておきましょう。次のように追加します。
<button class="bg-blue-600 text-white">ツールを起動する</button>「text-white」で文字色が白になりました。
余白を調整しよう
現状では、まだボタンっぽさが足りません。ボタンらしくするには、上下左右に少し余白を設定すると良いでしょう。次のように追加しましょう。
<button class="... px-6 py-3">ツールを起動する</button>これでかなりボタンらしくなってきました。ここでは、「px-」と「py-」というプロパティを追加しました。それぞれ、左右（X軸）の余白と上下（Y軸）の余白を調整しています。
このプロパティは、指定の方法が若干複雑です。まず、基本形は次のような「p-」での指定です。
p-4これにより、上下左右のすべての余白が同じように指定されます。「4」という数字は倍率で、基本の余白（標準では0.25rem」の4倍という意味になります。
そして、個別に余白を設定した場合は代わりに次のような表記を利用します。
- px – 左右（X軸）
- py – 上下（Y軸）
- pl – 左（Left）
- pr – 右（Right）
- pt – 上（Top）
- pb – 下（Bottom）
また、少し特殊な「s」と「e」があります。
- ps – 文章の開始位置（Start）、日本語では左、アラビア語などは右
- pe – 文章の終了位置（End）、日本語では右、アラビア語などは左
これらを利用して、余白を微調整することができます。
外側の余白を設定しよう
ボタンと本文の余白などは、「マージン」で調整をします。例えばここでは、ボタンの上に余白を取りましょう。
<button class="... mt-6">...マージンもパディングと同様に、「mx-」や「my-」、「mr-」などを利用する事ができます。ここでは、上の余白だけを調整するため「mt-」と指定しました。
角丸のボタンにしよう
もう少しボタンらしくするため、ここでは、角を丸めてドロップシャドウをつけてみましょう。次のように追加します。
<button class="... rounded-lg">...これによって、ボタンの角が丸くなります。
丸みを「lg」や「xl」など、サイズ指定で指定することができます。また、「rounded-tr-lg」等、間に場所を指定することで、各四隅の角丸を個別に設定することもできます（trはTop-Rightの略で、右上隅）。
ドロップシャドウをつけよう
続いて、ドロップシャドウを設定しましょう。次のように追加します。
<button class="... shadow-xl">ツールを起動する</button>影がつきました
強度を先の「xs」や「xl」などで調整ができます。また、色名を付加することで、影の色を調整することもできます。色を変更する場合は、「shadow」プロパティと一緒に指定しましょう。
<button class="... shadow shadow-red-600">...
ホバー時の装飾をしよう
ボタンなどの要素は、PCで操作しているときにマウスカーソルが重なったとき（ホバー時）に、何か反応があると分かりやすい演出になります。これをCSSでは「疑似クラス」などと言います。
Tailwindでは疑似クラスの指定をする場合は、次のように指定します。
<button class="... hover:bg-blue-700">...「hover:」という記述に加えて、プロパティを指定しています。この場合、カーソルを重ねたホバー状態の場合に、背景色が「bg-blue-600」から「bg-blue-700」に変更され、少し濃い色に変わります。これによって、クリック可能な要素であることが分かりやすくなります。
Tailwindには、このような疑似クラスがそれぞれ準備されています。いくつかの疑似クラスはこの後も紹介します。
トランジションを設定しよう
状態を変化させるときは、「トランジション」を設定すると、優雅さや高級感を演出することができます。次のように追加しましょう。なお、変化が分かりやすくするためにここではホバー時の色を「bg-red-700」に変更しています。
<button class="... hover:bg-red-700 transition">...ホバーしたときの色の変化の時に、じょじょに変化するように変わります。
変化が分かりにくい場合は、「duration」を加えるとより分かりやすいでしょう。
<button class="... transition duration-700">...すると、じわっと変わっていくことが分かります。
トランジションのその他のクラス
トランジションに関するクラスは、たくさんの種類があるのでここで詳しく紹介しましょう。なお、実際に動作などはTailwindのドキュメントのデモを見ると良いでしょう。
transion-property：対象のプロパティ
トランジションの対象となるプロパティを指定します。例えば「transition-colors」とすると、色関係のプロパティのみが対象となり、例えば大きさを変えたりしてもトランジションは発生しなくなります。
標準の「transition」のみを指定すると、「color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, –tw-gradient-from, –tw-gradient-via, –tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events」という各プロパティが指定され、すべてのプロパティを対象にしたい場合は「transition-all」を指定します。
transition-behavior：離散プロパティのサポート
通常、transitionは「display」プロパティなどで、要素を非表示にする場合は効きません。しかし、「transition-discrete」クラスを指定すると、これらのプロパティでも効くようになります。
transition-duration：トランジションの速度
トランジションが起こる速度を調整できます
transition-timing-function：アニメーション効果
イーズインやイーズアウトなどのアニメーション効果を追加することができ、アニメーションの最後に少し遅くなったり、開始時に少し遅くなるなど、細かい調整ができます。
transition-delay：開始の遅延
トランジションが開始されるまでに、若干の遅延を加えることができます。反応速度をあえて少し遅くすることで、演出を加えられます。
animation：アニメーション効果
要素をバウンスさせたり、回転させるなどの効果を加えることができます。
これらをうまく組み合わせて、演出していくと良いでしょう。
レイアウトを調整しよう
続いて、現状各コンテンツが左上の隅に寄ってしまっているため、これを調整していきましょう。
containerを利用しよう
Webページでは、画像などで画面幅いっぱいに表示したいと言った場合以外、内容などでは左右に適切な余白を取った方が読みやすくなります。
ここまでに紹介した、paddingやmarginを使って調整することもできますが、Tailwindではこのようなコンテンツの内容には、「container」というエリアを設定するのが一般的です。次のように、全体を「<div>」タグで囲みましょう。
<div class="container mx-auto">
...
</div>すると、左右に適切な余白が取られるようになりました。
「container」クラス自身は、「幅を適切に調整する」という機能だけを持っています。そのため、これを単体で指定すると右端に余白が生まれるので違いが良く分かりません。そこで、「container」クラスは要素を左右中央にするための「mx-auto」クラスと、よく組み合わせて利用されています。
「mx-auto」クラスはは、先に紹介したマージンの調整です。横幅を「auto」に設定します。CSSでは、左右の余白を「auto」にすると、要素が中央に揃うという特性があり、これを利用したものです。
こうすると、要素の左右に適切な余白が埋まれ、画面隅にくっつかなくなります。
とはいえ、それでもウィンドウの大きさによっては一瞬くっついてしまう部分があることと、上隅はやはりくっついてしまうので、paddingでも調整しましょう。次のように追加します。
<div class="... px-4 py-16">
...
</div>
画面幅を制限しよう
containerクラスを使うと、左右に余白は生まれますが、それでも画面幅を広くすると際限なく広がってしまうため、1行が長くなりすぎて読みにくくなってしまいます。そこで、画面幅を一定で制限しましょう。次のように追加します。
<div class="... max-w-4xl">
...
</div>すると、ある程度まで広がったら、それ以降は左右の余白が増えていくようなレイアウトになります。
これは、CSSの「max-width」プロパティを利用しています。
「max-w-」の後に、「3xs」から「7xl」までのいずれかのキーワードかまたは、「full」や「fit」などの特定のキーワードなどを指定することができます。作成したいページの幅に合わせて指定しましょう。
テキストの位置揃えをしよう
続いて、テキスト自体も中央に揃えましょう。ただし、「container」クラスを指定した「<div>」タグに指定してしまうと、この先のコンテンツもすべて中央揃えになってしまうので、ここではヘッダー部分のみを中央にするため、「<header>」タグを追加して設定します。
<div class="container ... text-center">
...
</div>ここでは「text-align」クラスを利用しました。これで中央に揃いました。
