コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > CSS > まだ使ってない人もこれで完璧！Tailwind CSS超入門

まだ使ってない人もこれで完璧！Tailwind CSS超入門

CSS Tailwind

Tailwind CSS Basics for Beginners

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

Tailwind CSS は、初心者から経験豊富な開発者まで、ウェブデザインを簡素化するユーティリティ優先の CSS フレームワークです。以下に、その概要を示します：

主な特徴

  • スタイルコードを書く必要なし: 高速なウェブサイト構築のための500以上の既製スタイルを使用
  • 迅速な変更: 深いコーディングなしでデザインを簡単に調整
  • モバイルフレンドリー: 異なる画面サイズに自動的に対応
  • カスタマイズ可能: 色、サイズなどをスタイルに合わせて調整

主要な概念

  • ユーティリティ優先: クラスベースのデザインツールで高い柔軟性を提供
  • レスポンシブデザイン: どのデバイスでも簡単にレイアウトを作成
  • カスタマイズ: プロジェクトのニーズに合わせてTailwindの設定をカスタマイズ

はじめ方

  1. npmを使用してTailwindをインストール
  2. 設定用のtailwind.config.jsファイルを作成
  3. Tailwindのクラスを使用してHTMLをスタイリング
  4. PurgeCSSなどのツールでプロジェクトを最適化

学習パス

  • 小さなプロジェクトでTailwindを試してみる
  • Tailwind CSSのドキュメントを深く読む
  • 実践が鍵。使えば使うほど上達する

CSSの基本を理解していなくても始められます。モダンでレスポンシブなウェブサイトのユーティリティ優先デザインの力を探求してみましょう。

CSSフレームワークとは

CSSフレームワークは、最初から作り始める必要なく、ウェブサイトを魅力的に見せるためのツールキットのようなものです。すぐに使えるスタイルとレイアウトが用意されており、ウェブページをより速く組み立てられます。主な有名なCSSフレームワークには以下があります：

  • Bootstrap: 多くの既製パーツが付属し、モバイルとデスクトップで確実に動作
  • Tailwind CSS: 自由に組み合わせられる小さなデザイン要素を提供
  • Bulma: 使いやすく、レスポンシブデザインに焦点を当てた無料フレームワーク
  • Foundation: モバイル対応に優れた、複雑なサイト構築向けの多機能フレームワーク
  • Material Design: Googleが作った、モダンでクリーンなインターフェースのためのガイドライン

従来のフレームワークとユーティリティ優先フレームワーク

主な違い

観点 従来のフレームワーク ユーティリティ優先フレームワーク
速度 すぐに始められる 慣れれば迅速
柔軟性 限定的 高い自由度
一貫性 標準的 デザイン言語の統一
パフォーマンス 余分なスタイルを含む 必要なスタイルのみ使用

選択は必要性によって異なります。シンプルなサイトには従来のフレームワーク、カスタマイズされたデザインにはTailwind CSSが適しています。

Tailwind CSSの詳細

インストールとセットアップ

Tailwind CSSをインストールするコマンド：

npm install tailwindcss

設定ファイルを作成：

npx tailwindcss init

設定ファイルの概要

tailwind.config.jsには以下の重要な設定があります： - content: 使用するクラスを探す場所 - theme: 色やフォントサイズなどのデザイン選択を定義 - plugins: 追加機能を拡張 - variants: スタイルのバリエーション（ホバーエフェクトなど）を制御

エディタ統合

  • VS Code: Tailwind CSS IntelliSense 拡張機能をダウンロード
  • 他のエディタ: Tailwindのドキュメントで互換性のあるツールを確認

コアコンセプト

ユーティリティ優先の方法論

小さなツールを多数提供するアプローチ。例： - bg-blue-500: 背景を青に - p-4: パディング - font-bold: 太字

レスポンシブデザイン

デバイスに応じたデザインを簡単に実現： - md:text-lg: 中画面サイズでテキストを大きく - ホバーやフォーカス効果の追加 - HTMLで複雑なレイアウトとインタラクションを構築

共通のユーティリティ

  • 色: <div class="bg-blue-500 text-white">...</div>
  • スペーシング: class="p-4 m-2 w-1/2"
  • タイポグラフィ: class="text-lg font-bold italic text-center"
  • ボーダーと効果: class="border rounded shadow-lg opacity-50 overflow-x-scroll cursor-pointer"

Tailwind CSSでの構築

レイアウトとナビゲーション

コンテナ

<div class="container max-w-screen-xl mx-auto px-4">
  <!-- ページコンテンツ -->
</div>

ナビゲーションバー

<nav class="sticky top-0 flex items-center justify-between p-4">
  <!-- ナビゲーション要素 -->
</nav>

マルチカラムレイアウト

<div class="grid grid-cols-3 gap-4">
  <!-- 3列のレイアウト -->
</div>

フォーム、テーブル、カード

フォーム

<form class="flex flex-col">
  <input class="border p-2 w-full">
  <label class="font-bold mb-2">名前</label>
  <button class="bg-blue-500 text-white p-2">送信</button>
</form>

データテーブル

<table class="border-collapse table-auto w-full text-sm">
  <thead>
    <tr>
      <th class="border p-4">...</th>
    </tr>
  </thead>
</table>

カード

<div class="p-4 rounded shadow max-w-md">
  <h3 class="font-bold text-xl mb-2">カードタイトル</h3>
  <button class="bg-blue-500 text-white p-2 block mt-4">
    アクションボタン
  </button>
</div>

これがTailwind CSSを使用したウェブデザインの基本的なガイドです。ユーティリティを活用して、複雑なウェブデザインを簡単に作成できます。

カスタマイズ

Tailwind CSSは、プロジェクトに完全に合わせて調整できます。色、サイズ、さらには独自のスタイルを作成することができます。

設定

色のカスタマイズ

module.exports = {
  theme: {
    colors: {
      primary: '#3490dc',
    }
  }
}

スペーシングとサイズ調整

module.exports = {
  theme: {
    spacing: {
      'extra-tight': '4px',
    }
  }
}

ブレイクポイント

module.exports = {
  theme: {
    screens: {
      'tall': {'raw': '(min-height: 900px)'}
    }
  }
}

フォント

module.exports = {
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
    }
  }
}

色、スペーシング、フォントなど、サイトを完璧に調整できます。

カスタムユーティリティの追加

Tailwindに希望通りのスタイルがない場合、独自のスタイルを追加できます：

module.exports = {
  theme: {
    extend: {
      flexAlign: {
        'start': 'align-items: flex-start',
        'end': 'align-items: flex-end',
      }
    }
  }
}

これで .flex-align-start と .flex-align-end でアイテムを配置できます。

@applyとコンポーネント

@applyを使用して、同じクラスを繰り返さずに再利用可能なボタンスタイルを作成できます：

<button class="@apply bg-blue-500 text-white font-bold py-2 px-4 rounded">
  ボタン  
</button>

パフォーマンスと最適化

PurgeCSS

PurgeCSSは、使用していないCSSコードを削除することでウェブサイトを高速化するツールです。

インストール：

npm install @fullhuman/postcss-purgecss

設定：

module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')
  ]
}

設定例：

purgeCSS: {
  content: [
    './public/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx'
  ]
}

JITエンジン

Just-in-Time (JIT)エンジンは、必要な時に必要なCSSのみを作成する賢いアシスタントです：

module.exports = {
  mode: 'jit'
}

テンプレートとリソース

Tailwind Starter Kit

Tailwindで作られた、ナビゲーションバー、ヘッダー、機能セクション、チームプロファイル、連絡フォーム、フッターなどの事前作成されたページと要素を提供します。

Tailwind Components

カード、モーダル、ドロップダウンなど、他のユーザーが作成したTailwind CSSのコンポーネントを見つけられるサイト。

結論

Tailwind CSSは、特に初心者にとって、迅速にウェブサイトを作成するための便利なツールです。主な利点：

  • ユーティリティ優先の方法論が初心者に優しい
  • レスポンシブサイトを迅速に構築
  • カスタマイズと拡張が容易
  • パフォーマンス最適化

学習のヒント

  • Tailwind Starter Kitを確認
  • 公式ドキュメントを読む
  • チュートリアル動画を視聴
  • 小さなプロジェクトを実践

よくある質問

Tailwind CSSは初心者に優しいですか？

はい！500以上の既製クラスがあり、CSSをゼロから書く必要がありません。

Tailwind CSSの始め方

  1. npmでインストール
  2. 設定ファイルを作成
  3. CSSに基本スタイルを追加
  4. HTMLでクラスを使用

Tailwind学習の最良の方法

小さなプロジェクトから始め、実践的に学ぶことが最も効果的です。ドキュメントを参照し、さまざまなレイアウトとスタイルを試してみましょう。

CSSを学んでからTailwindを使う必要はありますか？

必須ではありませんが、CSS基礎を理解していると、Tailwindをより効果的に使えます。

©コハム