vite + ts + react + tailwindcss でプロジェクト作成

毎回導入を忘れるのでメモをする。

1. プロジェクト作成

viteを使用してプロジェクトを作成する。

npm create vite@latest my-app -- --template react-ts

cd my-app
npm install

2. tailwindcssインストール

npm install -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

[!WARNING]

npmのバージョンが10.9.2と少し古いため、tailwindcssで最新版のv4をインストールすると2つ目のコマンドでエラーとなってしまう。そのため今回はv3をインストールした。

現時点でのディレクトリ構成は以下の通り。

$ tree -a -I "node_modules"
.
├── eslint.config.js
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
├── postcss.config.js
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

3 directories, 19 files

3. tailwindcss セットアップ

tailwind.config.jsを以下のように設定し、tailwindcssを使用する範囲を設定。

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

src/index.cssを以下のように設定し、グローバルcssにtailwindcssを適用する。

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

Unknown at rule @tailwind

上記のようなvscodeの警告が気になる場合は、以下のように.vscode/settings.jsonを作成する。

{
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

4. 動作確認

必要のない以下のファイルを削除する。

• src/App.css
• src/assets/*

src/App.tsxを以下に書き換える。

export default function App() {
  return (
    <div className="h-screen flex">
      <main className="flex-1 h-full flex flex-col">
        <h1
          className="
          text-6xl font-extrabold inline-block
          bg-gradient-to-r
          from-red-500
          via-green-500
          to-blue-500
          bg-clip-text text-transparent
        "
        >
          Hello, vite + ts +react + tailwindcss!
        </h1>
      </main>
    </div>
  );
}

以下のコマンドを実行する。

npm run dev

http://localhost:5713にアクセスして、カラフルなHello, vite + ts +react + tailwindcss!が表示されればOK。