Tailwind CSSでdisplay:noneにする方法｜hiddenの使い方

Tailwind CSSで要素を非表示にしたいとき、「tailwind display none」で検索して、display: none に当たるクラスを探した経験はありませんか。答えは hidden を付けるだけですが、実際の開発では「スマホだけ隠したいのにPC幅で消えてしまう」「hidden を付けたのに表示されたままになる」といった場面でつまずきやすいものです。invisible や opacity-0 も見た目が似ているため、どれを選ぶか迷う方も多いと思います。

この記事では、hidden の基本から、レスポンシブ対応、JavaScriptやReactでの切り替え、効かないときの原因までを、コピーして試せるコード例とあわせて整理します。

Tailwind CSSでdisplay: noneにする方法｜hiddenクラスの基本

Tailwind CSSで display: none を指定するには、要素に hidden クラスを付けるだけです。

hidden は display: none; を出力するユーティリティで、v3系・v4系のどちらでも同じ名前・同じ挙動で使えます。display: none の要素はレイアウト上のスペースを占有せず、スクリーンリーダーなどの支援技術からも読み上げ対象外になります。「見えなくするだけでなく、そこに存在しないものとして扱いたい」場合に適したクラスです。

hiddenクラスの使い方（基本コード例）

非表示にしたい要素の class に hidden を追加します。表示に戻すときは block flex inline-block などの display 系クラスに置き換えます。

hidden は単体では「常に非表示」を意味します。実務では、単純な非表示よりも、後述するレスポンシブ指定や JavaScript による切り替えと組み合わせる場面が大半です。まずは単体の挙動を確認しましょう。

<!-- Tailwind v4 の場合：ブラウザ向けビルドを読み込むだけで試せます -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<!-- 通常表示される段落 -->
<p class="text-gray-800">この段落は表示されます。</p>

<!-- hidden を付けると display: none; になり、画面から消えてスペースも詰まります -->
<p class="hidden text-gray-800">この段落は表示されません。</p>

<!-- hidden を外して block に置き換えると、再び表示されます -->
<p class="block text-gray-800">この段落は表示されます。</p>

※ v3 系で同じ確認をする場合は、<script src="https://cdn.tailwindcss.com"></script> を使います。これは動作確認用で、本番環境ではビルド済みの CSS を読み込むのが前提です。

なお、hidden クラスと HTML の hidden 属性は別のものです。hiddenはブラウザ標準の機能で非表示にする書き方で、Tailwind のクラスではありません。Tailwind の Preflight（リセットCSS）が属性側の挙動を調整しているため、バージョンによって細かな扱いが異なる点には注意してください。クラスで管理するほうが、md:block のような他のユーティリティとの切り替えを一貫して書けます。

注意点： 同じ要素に hidden と flexなど別の display系クラスを同時に付けると、どちらが優先されるかが分かりにくくなります。切り替える場合は、片方を外して片方を付ける形にするのが安全です。競合の詳しい原因は、後述の「display:noneが効かないときの原因と対処法」で扱います。

display - Layout

Utilities for controlling the display box type of an element.

tailwindcss.com

display: noneが実際に適用されているかの確認方法

ブラウザの開発者ツールで、要素の Computed（計算済み）スタイルに display: none が出ているかを見るのが確実です。

見た目に出ていないだけでは、hidden が効いているのか、そもそも要素が存在しないのか、別の理由で隠れているのかを区別できません。開発者ツールで次の手順を踏むと切り分けられます。

1. 対象の要素を右クリックして「検証」を選び、Elements パネルで要素を選択する
2. Styles ペインに .hidden { display: none; } が表示されていることを確認する
3. 取り消し線が引かれていれば、他のルールに負けている（上書きされている）状態
4. Computed タブで display の最終値を確認する

コンソールから確認したい場合は、次のように書けます。

// 対象要素を取得（id="target" は例）
const el = document.getElementById('target');

// 実際に適用されている display の値を取得する
// hidden が効いていれば "none" が返る
console.log(getComputedStyle(el).display);

getComputedStyle は、複数の CSS ルールが競合した後の最終的な値を返します。クラスが付いているのに表示されてしまう場合は、ここで none 以外の値が返るため、上書きしているルールを特定する手がかりになります。

レスポンシブで表示・非表示を切り替える書き方

画面幅に応じて切り替えるには、hidden の前にブレイクポイント接頭辞を付けます。ただし、接頭辞は「その幅以上」で適用される点に注意してください。

Tailwind はモバイルファースト設計で、md: や lg: などの接頭辞は min-width のメディアクエリに変換されます。つまり md:hidden は「md 未満で非表示」ではなく「md 以上で非表示」です。この誤解がレスポンシブ関連のつまずきの大半を占めるため、以降の説明はすべてこの前提で読み進めてください。

md:hidden・sm:hidden・lg:hiddenなどブレイクポイント別の書き方

{ブレイクポイント}:hidden と書くと、その幅以上で display: none になります。

デフォルトのブレイクポイントは、v3系・v4系で共通の次の値です（v4では rem 単位で定義されていますが、基準の 16px で換算すると同じ幅です）。

<!-- 640px 以上で非表示（スマホ幅では表示される） -->
<div class="sm:hidden">スマホだけに見せたい要素</div>

<!-- 768px 以上で非表示（タブレット幅以上では消える） -->
<div class="md:hidden">md 未満だけに見せたい要素</div>

<!-- 1024px 以上で非表示 -->
<div class="lg:hidden">lg 未満だけに見せたい要素</div>

接頭辞なしの hidden は全幅に効きます。ブレイクポイント付きの hidden は「その幅以上」で効くため、幅が広がったときに消えるという動きになります。

「特定サイズ以上で非表示」「以下で非表示」の考え方

「以上で非表示」は md:hidden、「未満で非表示」は hidden md:block（または max-md:hidden）と書きます。

未満で隠すには、まず全幅で hidden にし、指定した幅以上で表示に戻すのが基本の考え方です。表示に戻す際は、要素本来の display 値に合わせて block・flex・grid などを選びます。

<!-- 768px 未満で非表示、768px 以上で表示（モバイルファーストの標準的な書き方） -->
<div class="hidden md:block">PC 幅でだけ見せたい要素</div>

<!-- 同じ要素が flex レイアウトの場合は md:flex に置き換える -->
<div class="hidden md:flex gap-4">横並びのメニュー</div>

<!-- max-* バリアントを使うと「未満」を直接書ける（v3.2 以降・v4 で利用可能） -->
<div class="max-md:hidden">md 未満で非表示（上の hidden md:block と同じ結果）</div>

<!-- 範囲指定：768px 以上 1024px 未満の間だけ非表示 -->
<div class="md:max-lg:hidden">タブレット幅だけ隠す要素</div>

max-md:hidden は読みやすい反面、モバイルファーストの流れから外れるため、チーム内で書き方を統一しておくと混乱を防げます。hidden md:block は、要素が本来 flex なら md:flex にする必要があるなど、表示側の display 値を意識しなければならない点が注意点です。

レスポンシブナビゲーションでの実装例

スマホ用のボタンに md:hidden、PC 用のメニューに hidden md:flex を付けると、幅に応じてどちらか一方だけが表示されます。

<header class="flex items-center justify-between p-4 bg-white shadow">
  <a href="/" class="font-bold">Site Logo</a>

  <!-- PC 用メニュー：768px 未満は非表示、768px 以上は横並びで表示 -->
  <nav class="hidden md:flex gap-6">
    <a href="/about">About</a>
    <a href="/blog">Blog</a>
    <a href="/contact">Contact</a>
  </nav>

  <!-- スマホ用ボタン：768px 以上で非表示（md 未満だけ表示される） -->
  <button type="button" class="md:hidden p-2" aria-label="メニューを開く">
    ☰
  </button>
</header>

display: none の要素はスクリーンリーダーにも読み上げられないため、PC用とスマホ用でリンクを二重に書いても、支援技術のユーザーには片方しか届きません。この点で、見た目だけを隠す手法よりも安全です。ボタンを押したときにモバイルメニューを開閉する処理は、次の「JavaScript・Reactで動的に表示・非表示を切り替える」で扱います。

hidden・invisible・opacity-0の違いと使い分け

スペースごと消したいなら hidden、スペースを残して隠したいなら invisible、フェードなどのアニメーションを付けたいなら opacity-0 が基本の使い分けです。

3つとも「見えなくする」点は同じですが、レイアウトへの影響、クリックやキーボード操作の可否、支援技術への見え方が異なります。まず全体を表で整理します。

hidden（display: none）とinvisible（visibility: hidden）の違い

違いは「スペースを詰めるかどうか」です。hidden は要素がなかったものとして詰まり、invisible は透明な箱として場所が残ります。

invisible は visibility: hidden を出力します。要素は描画されませんが、レイアウト上のサイズは保たれるため、後ろの要素は動きません。表示を切り替えたときに周囲がガタつくのを避けたい場面（入力エラーメッセージの表示欄など）で有効です。

<div class="flex gap-4 bg-gray-100 p-4">
  <span class="bg-blue-200 p-2">A</span>

  <!-- hidden：スペースも消えるため、C が B の位置に詰まる -->
  <span class="hidden bg-red-200 p-2">B（hidden）</span>

  <span class="bg-blue-200 p-2">C</span>
</div>

<div class="flex gap-4 bg-gray-100 p-4">
  <span class="bg-blue-200 p-2">A</span>

  <!-- invisible：見えないがスペースは残るため、C の位置は動かない -->
  <span class="invisible bg-red-200 p-2">B（invisible）</span>

  <span class="bg-blue-200 p-2">C</span>
</div>

どちらも、フォーカス移動の対象外で、スクリーンリーダーにも読み上げられません。アクセシビリティ上の扱いはほぼ同じで、差はレイアウトにあります。なお、visibility は子要素が上書きできる点が display と違います。親に invisible を付けても、子に visible を付ければ子だけが表示されます（display: none の親では、子を表示することはできません）。

opacity-0との違いとアニメーションでの使い分け

opacity-0 は見た目が透明になるだけで、要素は操作可能なまま残ります。そのため、アニメーション用途に向きますが、単独での非表示には使わないでください。

opacity-0 の要素はスペースを占有し、クリックやキーボードフォーカスも受け付け、スクリーンリーダーにも読み上げられます。透明なボタンが押せてしまう、見えないリンクにフォーカスが移る、といった不具合の原因になります。

一方で、opacity は transition で滑らかに変化させられます。display は通常の transition では補間できないため、フェードイン・フェードアウトには opacity を使うのが定番です。ただし、完全に隠れたあとに操作できてしまわないよう、invisible と組み合わせます。

<!-- ホバーで表示されるツールチップの例 -->
<div class="group relative inline-block">
  <button type="button" class="rounded bg-gray-800 px-3 py-2 text-white">ヘルプ</button>

  <!--
    通常時：invisible opacity-0（見えず、操作もできない）
    ホバー時：visible opacity-100（フェードして表示）
    transition-[opacity,visibility]：opacity と visibility の両方を遷移対象にする
    （transition-opacity だと visibility が即座に切り替わり、フェードアウトが見えなくなる）
  -->
  <div
    class="invisible absolute left-0 top-full mt-2 w-48 rounded bg-gray-700 p-2 text-sm text-white opacity-0 transition-[opacity,visibility] duration-300 group-hover:visible group-hover:opacity-100"
  >
    ここに補足説明が入ります。
  </div>
</div>

opacity-0 だけを使いたい場合は、pointer-events-none を併用するとクリックを無効にできます。ただし、キーボードフォーカスとスクリーンリーダーへの露出は残るため、隠したい内容がある場合は invisible の併用が確実です。

Bootstrapのd-noneに相当するTailwindの書き方

Bootstrap の d-none は Tailwind の hidden に、d-md-none は md:hidden に相当します。

どちらも display: none を出力し、「ブレイクポイント以上で適用される」という仕組みも共通です。Bootstrap から移行する際の対応は次のとおりです。

<!-- Bootstrap の書き方 -->
<div class="d-none d-md-block">PC 用</div>

<!-- Tailwind での同等の書き方 -->
<div class="hidden md:block">PC 用</div>

注意したいのは、ブレイクポイントの幅が両者で異なることです。Bootstrap 5 の lg は 992px ですが、Tailwind の lg は 1024px です（md は両方 768px）。クラス名だけを置き換えると、切り替わる幅がずれる場合があります。境界の幅を維持したいときは、Tailwind の任意値ブレイクポイント（min-[992px]:hidden など）を使う方法もあります。

JavaScript・Reactで動的に表示・非表示を切り替える

動的に切り替えるには、JavaScript では classList.toggle('hidden') で hidden クラスを付け外しし、React では「DOM ごと消すか（条件付きレンダリング）」「クラスで隠すか」を目的に応じて選びます。

Tailwind 自体は JavaScript を持たないため、切り替えの処理は自分で書きます。やることは「hidden クラスを付ける・外す」だけです。どちらの環境でも、hidden を外したときにどの display 値で表示されるかを意識しておくと、レイアウト崩れを避けられます。

バニラJavaScriptでのトグル実装

ボタンのクリックで classList.toggle('hidden') を呼べば、表示と非表示を交互に切り替えられます。

classList.toggle はクラスがなければ追加し、あれば削除します。前述のレスポンシブナビゲーションのモバイルメニューを開閉する例で確認します。

<header class="flex items-center justify-between bg-white p-4 shadow">
  <a href="/" class="font-bold">Site Logo</a>

  <!-- スマホ用ボタン：md 以上では非表示 -->
  <button
    id="menu-button"
    type="button"
    class="p-2 md:hidden"
    aria-expanded="false"
    aria-controls="mobile-menu"
  >
    メニュー
  </button>
</header>

<!--
  初期状態は hidden で非表示。
  md:hidden を併記しているため、PC 幅ではボタンを押してもメニューは出ない
-->
<nav id="mobile-menu" class="hidden bg-gray-50 p-4 md:hidden">
  <a href="/about" class="block py-2">About</a>
  <a href="/blog" class="block py-2">Blog</a>
  <a href="/contact" class="block py-2">Contact</a>
</nav>

<script>
  const button = document.getElementById('menu-button');
  const menu = document.getElementById('mobile-menu');

  button.addEventListener('click', () => {
    // hidden の付け外し。toggle は付与後に true、削除後に false を返す
    const isHidden = menu.classList.toggle('hidden');

    // 支援技術に開閉状態を伝える（表示中なら true）
    button.setAttribute('aria-expanded', String(!isHidden));
  });
</script>

hidden を使う利点は、非表示の間はスクリーンリーダーの読み上げ対象からも外れることです。あわせて aria-expanded を更新しておくと、ボタンが「開いている」のか「閉じている」のかも伝わります。

注意点： style.display = 'none' を直接書く方法もありますが、インラインスタイルはクラスより優先されるため、あとから md:block などで表示を戻そうとしても効かなくなります。Tailwind を使う場合は、クラスの付け外しで統一するのが安全です。

Reactでの条件付きレンダリングとhiddenクラスの使い分け

状態を保持したい・アニメーションさせたいなら hidden クラス、不要な間は DOM ごと消したいなら条件付きレンダリングを使います。

React では、{isOpen && <Menu />} のように書くと、false のときに要素が DOM から取り除かれます。一方、className に hidden を付ける方法では、要素は DOM に残ったまま display: none になります。

import { useState } from 'react';

export default function Panel() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="p-4">
      <button
        type="button"
        onClick={() => setIsOpen((prev) => !prev)}
        aria-expanded={isOpen}
        className="rounded bg-blue-600 px-4 py-2 text-white"
      >
        {isOpen ? '閉じる' : '開く'}
      </button>

      {/* 方法A：条件付きレンダリング。閉じている間は DOM に存在しない */}
      {isOpen && <p className="mt-4">方法Aで表示される内容</p>}

      {/*
        方法B：hidden クラスで隠す。DOM には残る。
        クラス名は文字列を組み立てず、完全な形で書く
      */}
      <p className={isOpen ? 'mt-4' : 'hidden'}>方法Bで表示される内容</p>
    </div>
  );
}

使い分けの目安は次のとおりです。

タブの中に入力フォームがある場合、条件付きレンダリングでは、別のタブへ切り替えた時点で入力内容が消えます。入力値を残したいときは hidden クラスで隠してください。

注意点： {count && <List />} のように数値を左辺に置くと、count が 0 のときに画面へ 0 が描画されます。{count > 0 && <List />} のように、真偽値になる式で書いてください。また、JSX の hidden 属性（<p hidden>）は Tailwind のクラスとは別物です。Tailwind のレスポンシブ指定と組み合わせる場合は、className="hidden md:block" の形で書きます。

display: noneが効かないときの原因と対処法

hidden が効かない原因の大半は、「他のCSSに上書きされている」「クラス名がCSSに生成されていない」「幅の条件を取り違えている」のいずれかです。まず開発者ツールで、クラスが付いているか、CSSが生成されているか、上書きされていないかを順に確認してください。

切り分けの手順は次のとおりです。前述のとおり、Computed タブの display が最終値を示すので、ここが none でなければ以下の4つのどれかに当てはまります。

CSS優先度・クラスの記述順による競合

同じ要素に hidden と flex などを併記した場合、勝敗を決めるのは class 属性内の記述順ではなく、生成されたCSSの順序と詳細度です。

class="hidden flex" と class="flex hidden" は同じ結果になります。どちらが適用されるかは Tailwind が出力するCSSの並び順で決まり、その並び順はバージョンによって異なる可能性があるため、併記した状態に頼るのは避けてください。

<!-- どちらの display が勝つかは CSS の出力順に依存し、意図が読み取りにくい -->
<div class="hidden flex">競合している要素</div>

<!-- 切り替えたいときは、状態ごとにどちらか一方だけを付ける -->
<div class="hidden">非表示のとき</div>
<div class="flex">表示のとき</div>

もう1つの典型は、自作CSSやライブラリのCSSとの競合です。.card .title { display: flex; } のように詳細度の高いセレクタは、単一クラスの .hidden より優先されます。インラインの style="display: flex" も同様です。また、v4 ではユーティリティがCSSのカスケードレイヤー内に出力されるため、レイヤーに入れていない自作CSSは、詳細度が同じでもユーティリティに優先します。

/* v4：レイヤー外に書いた CSS は utilities より優先される */
.card { display: flex; }

/* 対処A：components レイヤーに入れると、utilities（hidden など）のほうが優先される */
@layer components {
  .card { display: flex; }
}

<!-- 対処B：重要度を上げる修飾子。v4 は末尾の !、v3 は先頭の !hidden -->
<div class="card hidden!">v4 の書き方</div>
<div class="card !hidden">v3 の書き方</div>

!（important）は最終手段です。多用するとほかの上書きができなくなるため、まずはレイヤーの整理や詳細度の見直しで解決できないかを検討してください。

レスポンシブクラスの適用範囲を誤解しているケース

md:hidden は「md以上」で非表示になります。「スマホで消えない」のではなく、「PC幅で消える」のが正しい挙動です。

適用範囲の仕組みは、H2「レスポンシブで表示・非表示を切り替える書き方」で説明したとおりです。ここでは、その仕組みを理解していても起こる、別の原因を挙げます。

• viewport メタタグの欠落：<meta name="viewport" content="width=device-width, initial-scale=1"> がないと、スマホのブラウザが約980px幅で描画し、md: や lg: が想定より早く効きます。
• 確認時の画面幅の違い：開発者ツールのデバイスモードでは、ウィンドウ幅ではなく、エミュレートした画面幅で判定されます。
• コンテナクエリとの混同：v4 で使える @md:hidden などは、画面幅ではなく親要素（@container）の幅で判定されます。md: とは基準が異なります。

<head>
  <!-- モバイルで md: などが意図どおり切り替わるために必要 -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

JavaScript・Reactでのクラス操作ミス

クラス名の綴り間違い、classList の使い方、Reactの再レンダリングとの食い違いが主な原因です。

const el = document.getElementById('target');

// NG：クラス名は大文字・小文字を区別する（Hidden は別のクラス）
el.classList.toggle('Hidden');

// NG：空白を含む文字列は渡せず、エラーになる
el.classList.toggle('hidden md:block');

// OK：クラスごとに個別に指定する
el.classList.add('hidden');
el.classList.add('md:block');

// セレクタで指定するときは、コロンをエスケープする
document.querySelector('.md\\:hidden');

Reactでは、class ではなく className を使います。また、React が管理している要素に対し classList で直接クラスを付け外しすると、次の再レンダリングで className の値と食い違い、意図しない状態になることがあります。React 内では状態（state）から className を決める形に統一してください。

// OK：state から className を決める
<div className={isOpen ? 'block' : 'hidden'}>内容</div>

PurgeCSS・ビルド時にクラスが削除されるケース

Tailwind は、ソースコード内に完全な形で書かれたクラス名だけをCSSとして生成します。文字列の組み立てで作ったクラス名や、スキャン対象外のファイルにあるクラス名は出力されません。

PurgeCSS は古いバージョンで使われていた仕組みで、v3 以降は Tailwind 自身がファイルを走査してクラスを抽出します。

// NG：完全なクラス名がソースに存在しないため、md:hidden は生成されない
const bp = 'md';
const className = `${bp}:hidden`;

// OK：完全な文字列で書いておく
const map = {
  md: 'md:hidden',
  lg: 'lg:hidden',
};
const className2 = map[bp];

スキャン対象については、バージョンごとに設定が異なります。

• v3：tailwind.config.js の content に、クラスを使うファイルのパスを指定します。テンプレートやコンポーネントの置き場所が漏れていると、そのファイルのクラスは生成されません。
• v4：ソースは自動検出されます（.gitignore の対象などは除外されます）。対象外のパスを走査させたいときは、CSS内で @source を使います。
• CMSやDBから取得した文字列にクラス名が含まれる場合は、ソース内に存在しないため検出されません。v3 は safelist、v4.1 以降は @source inline() で明示的に指定できます。

// v3：tailwind.config.js
module.exports = {
  // クラスを書いているファイルをすべて含める（パスは環境に合わせて変更）
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  // ソースに現れないクラスを強制的に生成する場合
  safelist: ['hidden'],
};

/* v4：エントリの CSS ファイルに書く */
@import "tailwindcss";

/* 自動検出の対象外のディレクトリを追加する */
@source "../node_modules/my-ui-lib";

よくある質問（FAQ）

まとめ

hidden は display: none を出力するクラスで、レスポンシブ指定・JavaScript・他のクラスとの使い分けまで押さえれば、表示の切り替えはほぼ迷わず実装できます。

あわせて読みたい

【初心者向け】tailwind.config.jsが見当たらない理由とCSSファースト時代の正しい使い方

「tailwind.config.jsがない」はもう古い常識？Tailwind CSS v4.0で導入された「CSSファースト設定」により、設定ファイルが不要になった理由を詳しく解説。新しいカスタマイズ方法や旧バージョンからの移行手順、Vite/Next.js連携のコツまで網羅し、あなたの疑問を全て解決します。

watashi.xyz

2025.05.13