建立 Vite 專案

在你要放置專案的地方執行這個指令來建立 react 模板的 vite 專案

# npm 6
npm init vite [專案名稱] --template react

# npm 7+
npm init vite [專案名稱] -- --template react

比如

# npm 6
npm init vite vite-app --template react

# npm 7+
npm init vite vite-app -- --template react

建好之後，他會提示你說切換到專案裡面執行指令，那他應該會顯示你的專案名稱，像我這邊呢就是：

cd vite-app
npm install
npm run dev

執行 npm run dev 之後，會看到他給你一個網址讓你可以瀏覽你剛剛建立的網站 (你們會因為電腦的 ip 跟我不同而在 Network 部分顯示不同的網址)

執行了之後，就可以去瀏覽網站了！ 畫面大概會長這樣：

測試完畢、能瀏覽之後就可以先關掉了，因為後面要來安裝 tailwind

使用 vitawind 來安裝 tailwind

接著我們要用 vitawind 來安裝 tailwind。執行這個指令，把所需的東西一起裝下去～

npm install -D vitawind

然後要建立 tailwind 和 postcss 的設定檔以及其他所需的檔案，所以我們要執行 npx vitawind：

npx vitawind

建立完成後會發現專案根目錄多出了一些檔案，像是 tailwind.config.js、postcss.config.js 等等。

這些都完成之後還有一些小手續，是要開始在 vite 專案中使用 tailwind 的前置準備。是不是很快很方便呀？

接下來蓄勢待發，及將要再開啟 vite 囉！！

使用 Tailwind

在使用之前，我們先打開 vite dev server。
(非必要，你也可以後面的步驟都做完再打開，只是先打開會比較爽)

npm run dev

瀏覽畫面，你會發現文字和按鈕的樣式都跑掉了 QQ

因為我們再來就是要體驗 vite 的熱更新速度以及 tailwind 帶來的美好！！！

dev server 先不用關，只要把 ./src/App.jsx 檔案的內容全部覆蓋掉就好了～

import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'

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

  return (
    <div className="text-center">
      <header className="bg-[#282c34] min-h-screen text-white flex flex-col justify-center items-center">
        <img
          src={logo}
          className="h-60 motion-safe:animate-spin animate-speed"
          alt="logo"
        />
        <style>
          {"\
            .animate-speed{\
              animation-duration:20s;\
            }\
          "}
        </style>
        <p className="text-3xl font-bold">Hello Vite + React!</p>
        <p className="mt-3">
          <button
            type="button"
            className="rounded text-[#282C34] bg-gray-300 px-2 py-2 my-6 hover:bg-gray-200 transition-all"
            onClick={() => setCount((count) => count + 1)}>
            count is: {count}
          </button>
        </p>
        <p>
          Edit <code className="text-[#8d96a7]">App.jsx</code> and save to test HMR updates.
        </p>
        <p className="mt-3 flex gap-4 text-center text-[#8d96a7]">
          <a
            className="text-[#61dafb] hover:text-blue-400 transition-all"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
          {' | '}
          <a
            className="text-[#61dafb] hover:text-blue-400 transition-all"
            href="https://vitejs.dev/guide/features.html"
            target="_blank"
            rel="noopener noreferrer"
          >
            Vite Docs
          </a>
        </p>
      </header>
    </div>
  )
}

export default App

替換完之後都按儲存，再來看一下網頁...

是不是！！！ 馬上就更新了！
而且看來 tailwind 的語法也順利生效了呢，這樣就完成囉！