Tailwind CSSとは何か？メリデメや使い方をわかりやすく解説(複数のタグに同じCSSを適用する方法)

「効率的にサイト制作をしたいけれど、CSSの管理が面倒……」と感じていませんか？そんな悩みを解決するツールとして、今、世界中のエンジニアから絶大な支持を得ているのがTailwind CSSです。

従来のCSS設計とは異なり、HTMLに「略語」のようなクラスを直接書き込むこのフレームワークは、一度慣れると手放せなくなるほどの開発スピードを誇ります。

しかし、独特な書き方ゆえに「HTMLが複雑にならない？」「同じデザインを使い回すにはどうすればいいの？」といった疑問を持つ方も多いかと思います。

本記事では、Tailwind CSSの基本概念からメリット・デメリット、そして多くの初心者が突き当たる「複数のタグに同じデザインを適用する方法」まで、わかりやすく解説しています。

Tailwind CSSとは何か？

Tailwind CSS（テイルウィンド CSS）は、ウェブサイトのデザインを効率よく、自由に作成するための「CSSフレームワーク」の一種です。

従来のCSSの書き方とは根本的に異なる考え方を持っており、現代のウェブ開発において非常に人気があります。

HTMLの中に直接短い指示を書き込めることが最大のポイントです。

＞（参考）公式 Tailwind CSS

Tailwindのメリット

HTMLファイルだけで完結する

CSSファイルを使う必要がなく、HTMLファイルのみで完結します。

クラス名不要

classの中に直接指定のプロパティを記述していくため、クラス名をつける必要がなくなります。

デザインが整いやすい

「4px単位の余白」「決まった色のトーン」など、プロのデザインシステムが土台になっています。適当に選んでも、バラバラなサイズや色が混在しにくく、初心者でも統一感のある綺麗なサイトが作りやすいです。

修正が楽（影響範囲は対象のタグのみ）

普通のCSSだと「ここを直したら別の場所も崩れた！」ということがよくありますが、TailwindはHTMLのその場所にしか影響しません。

修正の影響範囲が明確なので、大規模なサイトでも安心して変更できます。

Tailwindのデメリット

HTMLが長くなる

HTMLに直接プロパティと値を記述していくため、コードが長くなります。

<div class="bg-white rounded-lg p-6 shadow-md flex items-center space-x-4 border border-gray-200 hover:bg-gray-50 ...">

専用の指定方法を学ぶ必要がある

「背景色は background-color ではなく bg-」といった、Tailwind独自の略語をある程度覚えるまでは、公式ドキュメントを何度も検索することになります。

Tailwindを使うとどうなる？

従来のCSSの場合

例えば、青いボタンをCSSで記述するとHTMLとCSSを分けて記述します。

<button class="my-button">保存</button>

.my-button {
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

Tailwindを使った書き方

Tailwindを使うと上記のCSSをHTMLの中にインラインで記述することができます。

<button class="bg-blue-500 text-white p-4 rounded">保存</button>

コード解説

Tailwindで書いた先ほどのコードを解説します。

<button class="bg-blue-500 text-white p-4 rounded">保存</button>

bg-blue-500　（明るさを数値で指定）

これは、background-color: blue; で、色の濃淡を数値で指定しています。

Tailwindでは、1つの色に対して50（一番薄い）から 950（一番濃い）までのステップが用意されています。

• 500が標準: 多くの色において、500 がその色のベースとなる標準的な濃さです。
• 数字が小さいほど薄い: bg-blue-100 はごく薄い水色になります。
• 数字が大きいほど濃い: bg-blue-900 はネイビーに近い深い青になります。

text-white

text-white で、color:whiteを明示的に指定することができます。

p-4 （4px基準で指定）

p は Padding（内側の余白） を意味し、-4 はそのサイズを指します。

ここで注意が必要なのが、「4 = 4px」ではない という点です。

• Tailwindの基本ルールは 1 = 0.25rem (4px) です。
• つまり、p-4 は 4 × 4px = 16px という意味になります。

よく使うpaddingの指定は以下のようになります。

rounded

rounded は角を丸くする設定ですが、pxを直接書かなくてもあらかじめ定義されたサイズが適用されます。

• rounded だけ書いた場合：4px 相当の角丸になります。
• もっと細かく調整したい場合は、語尾にサイズを付けます：
  • rounded-sm: 2px
  • rounded-md: 6px
  • rounded-lg: 8px
  • rounded-full: 完全に丸くなる

「だいたいこれくらいの丸みが綺麗」という値が最初からセットされているので、微調整に悩む時間を減らせるのがメリットです。

複数のタグに同じCSSを適用させるには？

複数のタグに同じCSSを適用させるには、通常ならクラス名を指定するだけです。

Tailwindの場合はいくつかの方法があります。

コンポーネント化する（推奨）

現代のウェブ開発（React, Vue, Next.jsなど）では、「ボタンそのものを1つの部品（コンポーネント）にしてしまう」のが王道です。

1箇所にだけTailwindのクラスを書き、あとはその部品を呼び出すだけなので、修正も1箇所で済みます。

// Button部品として定義（1回だけ書く）
function MyButton({ text }) {
  return (
    <button class="bg-blue-500 text-white p-4 rounded hover:bg-blue-600">
      {text}
    </button>
  );
}

// 使うときはこれだけ
<MyButton text="保存" />
<MyButton text="送信" />

@apply を使ってCSSにまとめる

Tailwindのクラスを、1つの新しい名前（クラス名）に合体させることができます。

.btn-primary {
  @apply bg-blue-500 text-white p-4 rounded;
}

<button class="btn-primary">保存</button>
<button class="btn-primary">送信</button>