Tailwind CSS を始めるためのブートストラップ ユーザー ガイド

皆さんこんにちは！ ?あなたが長年の Bootstrap ユーザーで、Tailwind CSS への移行に興味がある場合は、このガイドが最適です。 Tailwind は、Bootstrap のコンポーネントベースの構造とは根本的に異なるアプローチを提供するユーティリティ優先の CSS フレームワークです。 Bootstrap ユーザーとして Tailwind を簡単に始める方法を詳しく見てみましょう!

この改善されたバージョンでは、すべてのコード ブロックが適切にフォーマットされ、インデントされるようになり、ガイドが読みやすくなり、理解しやすくなります。

? Tailwind CSS を使用する理由

チュートリアルに入る前に、Bootstrap と Tailwind の簡単な比較を示します:

• Bootstrap: 独自のデザインを備えた事前構築済み UI コンポーネントを提供するコンポーネントベースのフレームワーク。
• Tailwind: 低レベルのユーティリティ クラスを使用してコンポーネントのスタイルを設定できるユーティリティ優先のフレームワークで、より高い柔軟性と制御を提供します。

Tailwind は、高度にカスタマイズされたデザインが必要な場合に威力を発揮しますが、Bootstrap に慣れていると慣れていないように感じるかもしれません。それでは、段階的に見ていきましょう。

1. プロジェクトでの Tailwind のセットアップ

ステップ 1: Tailwind CSS をインストールする

Tailwind CSS の使用を開始するには、プロジェクトに CSS をインストールする必要があります。次の手順に従ってください:

• npm 経由で Tailwind をインストールします。

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init

• tailwind.config.js ファイルで、Tailwind がプロジェクトのクラスをスキャンするようにコンテンツ配列を設定します。

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

ステップ 2: CSS ファイルを作成する

次に、次の Tailwind ディレクティブを使用して、プロジェクトにstyles.css ファイルを作成します。

@tailwind base;
@tailwind components;
@tailwind utilities;

ステップ 3: HTML に Tailwind を含める

HTML ファイル内で、生成された CSS ファイルをリンクします:

これで、プロジェクトで Tailwind の使用を開始する準備ができました!

2. 追い風の哲学を理解する

Bootstrap の .container、.row、.col-6 などのクラスに慣れている場合、Tailwind への切り替えは大きな変化のように感じるかもしれません。 Bootstrap では、レイアウトと設計の決定がコンポーネントに抽象化されますが、Tailwind では、ユーティリティ クラスを使用して設計を完全に制御できます。

例: グリッド レイアウトの作成

ブートストラップ:

  

    
Column 1
    
Column 2
  

追い風:

  
Column 1
  
Column 2

Tailwind では、grid クラスと Grid-cols-2 クラスが Bootstrap の行システムと列システムを置き換えます。ギャップ 4 クラスはグリッド項目間にスペースを追加し、ユーティリティ クラスを微調整することで必要に応じてすべてを調整できます。

3. Tailwind によるタイポグラフィーとスペース

Bootstrap と Tailwind の大きな違いの 1 つは、タイポグラフィとスペースの処理方法です。

例: タイポグラフィーとパディングの追加

ブートストラップ:

Hello, Bootstrap!
This is a lead paragraph.
Click Me

追い風:

Hello, Tailwind!
This is a lead paragraph.
Click Me

Tailwind には、事前定義されたボタンや見出しスタイルはありません。代わりに、ユーティリティ クラス (text-4xl、bg-blue-500、px-4 など) を直接適用して、希望通りのデザインを構築します。

4.レスポンシブデザイン

Bootstrap ユーザーが気に入っている点の 1 つは、応答性の高いグリッド システムです。 Tailwind には優れた応答性の高いユーティリティもありますが、事前定義されたブレークポイントに依存する代わりに、Tailwind の応答性の高いプレフィックスを使用してさまざまな画面サイズのスタイルを制御できます。

例: 要素をレスポンシブにする

ブートストラップ:

Responsive Column

追い風:

Responsive Column

Tailwind では、w-full により、小さい画面では要素が全幅を占めることが保証され、md:w-1/2 により、md ブレークポイント (中程度の画面サイズ) から始まる 50% の幅が適用されます。

5. Tailwind のカスタマイズ

ブートストラップ変数をカスタマイズしたのと同じように、Tailwind のユーティリティ クラスを拡張したり、独自のカスタム デザイン システムを作成したりできます。 tailwind.config.js で、デフォルトのテーマを拡張または変更できます:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
        secondary: '#14171A',
      },
    },
  },
}

この構成では、次のようにカスタム カラーを使用できます:

Custom Button

6. Bootstrap コンポーネントの Tailwind への移行

Tailwind で一般的な Bootstrap コンポーネント (ボタン、ナビゲーションバー、モーダルなど) を再作成したい場合は、適切なユーティリティを使用することが重要です。以下にいくつかの例を示します:

ボタンコンポーネント

ブートストラップ:

Submit

追い風:

  Submit

ナビゲーションバーコンポーネント

ブートストラップ:

追い風:

Tailwind のユーティリティ クラスを学習することで、Bootstrap の事前構築済みスタイルよりも高い柔軟性で複雑なコンポーネントを構築できます。

7.Tailwind プラグインの使用

Tailwind には、機能を拡張するプラグインの豊富なエコシステムがあります。たとえば、フォーム、タイポグラフィ、アスペクト比ユーティリティを簡単に追加できます:

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

tailwind.config.js:

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ]
}

8. Metronic 9 でレベルアップ – オールインワンの Tailwind UI ツールキット

Bootstrap のシンプルさと親しみやすさを組み合わせた Tailwind CSS エクスペリエンスをお探しなら、Metronic 9 以外に探す必要はありません。

Metronic 9 は、両方の長所を備えたオールインワンの Tailwind UI ツールキットです。Tailwind CSS のユーティリティ第一の機能と、Bootstrap でおなじみの構造化されたコンポーネント主導のアプローチが組み合わされています。

Tailwind プロジェクトに Metronic 9 を選ぶ理由

• 人気と信頼性: 2013 年にリリースされた Metronic は、115,000 件の販売と 8,000 件の 5 つ星のレビューにより、Envato マーケットでナンバーワンの管理者ダッシュボード テンプレートとなり、世界中の 3,000 以上の SaaS プロジェクトを支えています。

• 事前に構築されたコンポーネント: Bootstrap と同様に、Metronic 9 には、ボタン、ナビゲーションバー、モーダル、フォームなど、すぐに使用できるコンポーネントが何百も付属しており、すべて Tailwind CSS ユーティリティを利用しています。これにより、カスタム スタイルを最初から作成しなくても、最新の応答性の高い UI を迅速に構築できます。

• Tailwind Bootstrap エクスペリエンス: Bootstrap の構造化された感触とともに、Tailwind の柔軟性が得られます。 Bootstrap から移行する場合でも、新たに始める場合でも、学習曲線は最小限であることがわかります。

• 複数のレイアウト: 5 つを超えるアプリ レイアウト デモと 1,000 個の UI 要素を備えた Metronic 9 を使用すると、SaaS ダッシュボード、管理パネル、または一般的な Web アプリのいずれで作業しているかに関係なく、複雑なアプリケーションを迅速かつ簡単に構築できます。

• シームレスな統合: Metronic 9 は React、Next.js、Angular などの最新のフレームワークと完全に統合し、Bootstrap のような使いやすさで Tailwind の旅を有利にスタートできます。

今すぐ Metronic 9 を始めましょう!

Bootstrap から移行していて、使い慣れた機能満載の環境で Tailwind と連携したい場合は、Metronic 9 が最適なソリューションです。時間と労力を節約し、デザインの詳細に囚われることなく、優れた製品の構築に集中できるように設計されています。

?ここで Metronic 9 をチェックして、Tailwind の柔軟性と Bootstrap のシンプルさで美しい UI の作成を始めましょう!

9. 結論: Tailwind はあなたにとって正しい選択ですか?

事前に構築されたコンポーネントに制限されずに、デザインをさらにカスタマイズして制御したい場合は、
Tailwind CSS は素晴らしい選択です。 Bootstrap に慣れていると調整に時間がかかるかもしれませんが、ユーティリティ優先のアプローチに慣れてしまえば、可能性は無限大です!

ご質問やご経験を以下のコメント欄でお気軽に共有してください。コーディングを楽しんでください! ?