Tailwind CSS4 インストール (NPM)

始める前に、Node.js と npm がインストールされていることを確認してください。以下のコマンドでインストールされているかどうかを確認できます。

node -v
npm -v

お使いのシステムがまだ Node.js と NPM をサポートしていない場合は、私たちのNode.js チュートリアル。

中国国内では npm の速度が非常に遅いため、Taobao がカスタマイズした cnpm (gzip 圧縮サポート) コマンドラインツールをデフォルトの npm の代わりに使用できます。

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

これで、cnpm コマンドを使用してモジュールをインストールできます。

$ cnpm install [name]

詳細は以下を参照してください。http://npm.taobao.org/。

Tailwind CSS をインストール

Tailwind CSS 3 と比較して、Tailwind CSS 4 は HTML や JavaScript などのファイルを自動検出するため、コンテンツソースを手動で設定する手間が省けます。

npm でのインストール

ゼロから Tailwind CSS を使い始める最も簡単で最速の方法は、Tailwind CLI ツールを使用することです。

npm でインストール：ローカルプロジェクトに Tailwind CSS をインストールして設定します。

npm install tailwindcss @tailwindcss/cli

1、CSS で Tailwind をインポートする: CSS ファイルに次を追加します。 @import "tailwindcss";。

例：src/input.css ファイルの先頭でインポートします。

src/input.css ファイル

@import "tailwindcss";

2、Tailwind CLI のビルドプロセスを起動する：CLI ツールを実行して、ソースファイル内のクラスをスキャンし、CSS をビルドします。

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

3、HTML で Tailwind を使い始める：コンパイルされた CSS ファイルを <head> に追加し、Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定します。

src/index.html ファイル

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Vite プラグインとしてインストール

Vite は、モダンブラウザのネイティブ ES モジュールサポートを活用して、高速な開発体験を提供することを目的とした最新のフロントエンドビルドツールです。

Vite の詳細については、以下を参照してください。Vite チュートリアル。

Tailwind CSS を Vite プラグインとしてインストールすることは、Laravel、SvelteKit、React Router、Nuxt、SolidJS などのフレームワークと統合する最もシームレスな方法です。

1、Tailwind CSS をインストールする

npm で tailwindcss と @tailwindcss/vite をインストールします。

npm install tailwindcss @tailwindcss/vite

2、Vite プラグインを設定する

Vite 設定ファイルにvite.config.ts@tailwindcss/vite プラグインを追加します：

vite.config.ts ファイル

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

3、Tailwind CSS をインポートする

CSS ファイルに追加します：@importTailwind CSS をインポートするために：

@import "tailwindcss";

4、ビルドプロセスを起動する

ビルドプロセスを実行するには、次を使用しますnpm run devまたは、package.json ファイルで設定した他のコマンド：

npm run dev

5、HTML で Tailwind を使い始める

コンパイルされた CSS が <head> に含まれていることを確認し（フレームワークが自動的に処理する場合があります）、次に Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定します。

例

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/src/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

PostCSS プラグインとしてインストール

Tailwind CSS を PostCSS プラグインとしてインストールすると、Next.js や Angular などのフレームワークとシームレスに統合できます。

1、Tailwind CSS をインストールする

npm で tailwindcss、@tailwindcss/postcss、postcss をインストールします。

npm install tailwindcss @tailwindcss/postcss postcss

2、PostCSS 設定に Tailwind を追加する

プロジェクトの postcss.config.mjs ファイル（または PostCSS を設定する任意の場所）で @tailwindcss/postcss を追加します。

postcss.config.mjs ファイル

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

3、Tailwind CSS をインポートする

CSS ファイルに @import を追加して Tailwind CSS をインポートします。

@import "tailwindcss";

4、ビルドプロセスを起動する

npm run dev または package.json ファイルで設定した他のコマンドを使用して、ビルドプロセスを実行します。

npm run dev

5、HTML で Tailwind を使い始める

コンパイルされた CSS が <head> に含まれていることを確認し（フレームワークが自動的に処理する場合があります）、次に Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定します。

例

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>
その他の拡張