【備忘録】React+ViteでTailwind CSSを使えるようにするまで

Windows11でViteプロジェクトを作成し、その中でTailwind CSSを使えるようにするまでの備忘録を残します。npmによるTailwind CSSのインストール方法が変わったようで、変更後の方法に対応しています。当然、今後また変更される可能性がありますのでご了承ください。またNode.jsは既にインストールされているものとします。

Viteプロジェクトを作成する

新しいViteプロジェクトを作成します。

npm create vite@latest sample -- --template react-ts

Tailwind CSSをインストールする

作成したプロジェクトのフォルダに移動し、npmでTailwind CSSをインストールします。

cd sample
npm install tailwindcss @tailwindcss/vite

Viteプロジェクトの設定を変更する

sample/vite.config.tsを以下のように編集します。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'  // 追加

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),  // 追加
  ],
})

App.cssにTailwind CSSのインポートを追加する

sample/src/App.cssにTailwind CSSのインポートを追加します。

@import "tailwindcss";  /* 追加 */

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

App.tsxでTailwind CSSのユーティリティクラスが使えるかどうか確かめる

sample/src/App.tsxのh1タグにfont-boldのクラスを追加します。

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1 className="font-bold">Vite + React</h1>  {/* font-boldのクラスを追加 */}
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

以下のコマンドでサーバーを立ち上げます。

npm run dev

Vite + React の部分がボールド体になっていればOKです。

参考

https://tailwindcss.com/docs/installation/using-vite

博士SEの研究ノート