Tailwind CSS ホームページ
  1. インストール
  2. Vite で Tailwind CSS をインストールする

  1. プロジェクトを作成する

    まだ Vite プロジェクトをセットアップしていない場合は、新しく作成します。最も一般的な方法は、 Create Vite.

    ターミナル
    npm create vite@latest my-project -- --template reactcd my-project

  2. Tailwind CSS をインストールする

    tailwindcss とその依存関係をインストールし、 tailwind.config.js ファイルと postcss.config.js ファイルを生成します。

    ターミナル
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

  3. テンプレートパスを設定する

    tailwind.config.js ファイルにすべてのテンプレートファイルへのパスを追加します。。

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  4. CSS に Tailwind ディレクティブを追加する

    ./src/index.css ファイルに、Tailwind の各レイヤーの `@tailwind` ディレクティブを追加します。

    index.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. ビルドプロセスを開始する

    npm run dev でビルドプロセスを実行します。

    ターミナル
    npm run dev

  6. プロジェクトで Tailwind を使い始める

    Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定します。

    App.jsx
    export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}