Vite + React + TypeScript + TailwindCSS 開発環境の構築

実行環境

• Vite: 5.2.0
• React: 18.2.0
• TypeScript: 5.2.2
• TailwindCSS: 3.4.3

環境構築

1. Vite project の作成

npm create vite@latest

https://ja.vitejs.dev/

2. TailwindCSS のInstall

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

上記コマンド実行で, postcss.config.js, tailwind.config.js が作成される.

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. tailwind.config.js にTailwindCSSの適用範囲を記述

tailwind.config.js 内のcontent に設定されているリストの内容を以下に変更.

tailwindcss.config.js

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

4. index.css にディレクティブを記述

index.css 内に以下を追加.

index.css

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

https://tailwindcss.com/docs/functions-and-directives

5. 確認

例として, App.tsx 内に以下を記述.

App.tsx

<div className="container mx-auto border-4 p-6 mt-4 border-sky-500">
  <p className="text-3xl font-bold text-purple-500">Hello, Zenn</p>
</div>

TailwindCSSがしっかり適応されている.