Tailwind CSS をプロジェクトに追加する方法

Tailwind CSS は、設計プロセスに対する柔軟性と制御を提供するユーティリティ優先の CSS フレームワークです。プロジェクトで Tailwind CSS の使用を開始するための 5 つの異なる方法を次に示します:

1. CDN (コンテンツ配信ネットワーク) の使用

Tailwind CSS をプロジェクトに組み込む最も簡単な方法は、CDN から CSS ファイルを直接追加することです。このアプローチは、完全なビルド プロセスを必要としない小規模なプロジェクトや簡単なプロトタイプに最適です。

使用方法:
次のタグを

セクションに追加します。

2. npm (ノードパッケージマネージャー) 経由

ビルド ツールを必要とする大規模なプロジェクトの場合は、npm を使用して開発依存関係として Tailwind CSS をインストールすることをお勧めします。

手順:

1. ターミナルを開き、プロジェクト ディレクトリに移動します。

2. 次のコマンドを実行して Tailwind CSS をインストールします:
   npm install tailwindcss

3. 以下を使用して tailwind.config.js ファイルを設定します。
   npx tailwindcss init

4. @tailwind ディレクティブを使用して CSS に Tailwind を含めます。

3. Tailwind CLI の使用

Tailwind CSS は、追加のビルド ツールを使用せずにコマンド ラインから直接 CSS を構築できる CLI ツールを提供します。この方法は、カスタム構成が必要な単純なプロジェクトに最適です。

手順:

1. 次のコマンドを実行して CLI ツールをインストールします。
   npx tailwindcss init

2. プロジェクトに合わせて tailwind.config.js ファイルをカスタマイズします。

3. CLI を使用して CSS をコンパイルします。

4.フレームワークを使用する場合 (Next.js、React アプリの作成)

Next.js や Create React App などのフレームワークを使用している場合は、PostCSS を利用して Tailwind CSS を簡単に統合できます。

手順:

1. npm 経由で Tailwind CSS をインストールします:

npm install tailwindcss

1. Tailwind を含めるように postcss.config.js ファイルを更新して、PostCSS を構成します。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

1. src/index.css メイン CSS ファイルに Tailwind をインポートします。

5. Laravel Mix 経由 (Laravel プロジェクト用)

Laravel Mix は、Tailwind CSS を Laravel プロジェクトにスムーズに統合し、CSS を他のアセットと一緒にコンパイルできるようにします。

手順:

1. 必要な依存関係をインストールします:

npm install tailwindcss laravel-mix --save-dev

1. Tailwind CSS を webpack.mix.js ファイルの Laravel Mix 設定に追加します。

mix.postCss('resources/css/app.css', 'public/css', [
  require('tailwindcss'),
]);

1. ビルドプロセスを実行します:

npm run dev

以上がTailwind CSS をプロジェクトに追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。