---
title: "[React] 使用 Vitawind 1.2 來 建置 Vite + Tailwind JIT 專案"
tags: vue
---

[ React ] 使用 Vitawind 1.2 來 建置 Vite + Tailwind JIT 專案
=

建立 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 部分顯示不同的網址)

<center>

</center>
<br>

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

<center>

</center>

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

使用 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

<center>

</center>

因為我們再來就是要體驗 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

<br>

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

</center>

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

<!-- === CSS設定 ============== -->
<style>
a {
color:#0072E3;
text-decoration: none;
transition:color 0.75s;
}
a:hover {
color:#84C1FF;
text-decoration: none;
transition:color 0.75s;
}
.markdown-body mark {
border-radius: 5px;
color:#c7254e;
background-color:#f9f2f4;
}
</style>

<!-- === CSS：程式碼深色主題 ============== -->
<style>
.markdown-body pre {
background-color: rgb(31, 41, 55);
border: 1px solid #555 !important;
color: #CCCCCC;
border-radius:12px;
/*border-radius:0px;*/
}
.markdown-body pre .hljs-tag {
color: #BAE5FD;
}
.markdown-body pre .hljs-keyword {
color: #20D3EE;
}
.markdown-body pre .hljs-string {
color:#BEF263;
}
.markdown-body pre .hljs-comment {
color:#9CA3B0;
}
.markdown-body pre .hljs-attr {
color:#20D3EE;
}
.markdown-body pre .hljs-name {
color:#E87BF9;
}
.markdown-body pre .hljs-built_in {
color:#F76E79;
}
</style>