【備忘録】React+ViteでTailwind CSSを使えるようにするまで
Windows11でViteプロジェクトを作成し、その中でTailwind CSSを使えるようにするまでの備忘録を残します。npmによるTailwind CSSのインストール方法が変わったようで、変更後の方法に対応しています。当然、今後また変更される可能性がありますのでご了承ください。またNode.jsは既にインストールされているものとします。 Viteプロジェクトを作成する 新しいViteプロジェクトを作成します。 copy_allnpm create vite@latest sample -- --template react-ts Tailwind CSSをインストールする 作成したプロジェクトのフォルダに移動し、npmでTailwind CSSをインストールします。 copy_allcd sample npm install tailwindcss @tailwindcss/vite Viteプロジェクトの設定を変更する sample/vite.config.tsを以下のように編集します。 copy_allimport { 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のインポートを追加します。 copy_all@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のクラスを追加します。 copy_allimport { 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 以下のコマンドでサーバーを立ち上げます。 copy_allnpm run dev Vite + React の部分がボールド体になっていればOKです。 参考 https://tailwindcss.com/docs/installation/using-vite
