Tailwind CSS入門：ユーティリティファーストで効率的にスタイリングする方法

エンジニアのためのFigma入門も参考にしてください。

「独学で始めたものの、何を次に学ぶべきかが見えず手が止まっている」——プログラミング学習で最も多い挫折ポイントです。 方向感のない学習は時間だけを消費し、現場で通用するスキルまで繋がりにくくなります。 この記事では、Tailwind CSS入門について、順序立てて学ぶロードマップを整理しました。

関連記事：CSS設計入門

無料カウンセリングは30分〜1時間、しつこい勧誘なし。学習ロードマップの相談だけでも活用できます。

Tailwind CSSとは

従来のCSS設計では、.card-titleのようなセマンティックなクラス名を考え、対応するCSSを書いていました。Tailwind CSSでは、text-lg font-bold text-gray-900のようにHTMLに直接スタイルを記述します。

従来のCSSとの比較

<!-- 従来のCSS -->
<div class="card">
  <h2 class="card-title">タイトル</h2>
</div>

<!-- Tailwind CSS -->
<div class="rounded-lg shadow-md p-6 bg-white">
  <h2 class="text-xl font-bold text-gray-900">タイトル</h2>
</div>

セットアップ

npm install -D tailwindcss
npx tailwindcss init

tailwind.config.js で対象ファイルを設定します。

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

基本的なユーティリティクラス

レイアウト

<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
  <div>左</div>
  <div>右</div>
</div>

<!-- Grid -->
<div class="grid grid-cols-3 gap-6">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

タイポグラフィ

スペーシング

• p-4：padding 1rem（全方向）
• px-6：padding-left/right 1.5rem
• mt-8：margin-top 2rem
• space-y-4：子要素間の縦方向スペース

レスポンシブデザイン

Tailwindのレスポンシブはモバイルファーストです。

Webアクセシビリティ入門も参考にしてください。

<div class="text-sm md:text-base lg:text-lg">
  画面幅に応じてフォントサイズが変わります
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- レスポンシブなグリッド -->
</div>

ダークモード対応

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  ダークモードで色が切り替わります
</div>

コンポーネント化のコツ

クラスが長くなる場合は、React等のコンポーネントとして切り出すのが実践的です。

function Button({ children, variant = 'primary' }) {
  const base = 'px-4 py-2 rounded-lg font-medium transition-colors';
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
  };

  return (
    <button className={`${base} ${variants[variant]}`}>
      {children}
    </button>
  );
}

Tailwind CSSが向いている場面

• React / Next.js / Vueなどコンポーネントベースの開発
• プロトタイピングや素早いUI構築
• デザインシステムの一貫性を保ちたい場合

Tailwind CSSが向いていない場面

• 既存プロジェクトにCSSが大量にある場合
• クラス名が長くなることに抵抗がある場合
• チーム全員がTailwindに慣れていない場合

今始めるか、もう少し準備してからか

プログラミング学習は、始めてから軌道に乗るまでに一定の時間がかかります。完璧な環境・完璧な教材を探している間に、早く始めた人は最初の実装を終え、次の壁にぶつかっています。 いきなりスクール契約をする必要はありません。ただし無料カウンセリングや無料体験で自分の学習スタイルに合うか確認しておくのは、選ぶ・選ばない以前の情報収集として有効です。多くのスクールで無料相談は30分〜1時間で完結します。

まとめ

Tailwind CSSは、慣れるとCSSを書く時間を大幅に削減できるフレームワークです。まずは小さなコンポーネントから試して、ユーティリティクラスの感覚を掴みましょう。

あわせて読みたい

• CSS設計入門｜BEM・FLOCSS・ユーティリティファーストの考え方
• React Hooks入門ガイド
• Next.js入門ガイド
• Web制作副業の始め方