[ React ] 使用 Vitawind 1.2 来 建置 Vite + Tailwind JIT 专案

建立 Vite 专案

在你要放置专案的地方执行这个指令来建立 react 模板的 vite 专案

# npm 6npm init vite [专案名称] --template react# npm 7+npm init vite [专案名称] -- --template react

比如

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

建好之后，他会提示你说切换到专案里面执行指令，那他应该会显示你的专案名称，像我这边呢就是：

cd vite-appnpm installnpm 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 的语法也顺利生效了呢，这样就完成啰！