[ 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 部分显示不同的网址)

执行了之後,就可以去浏览网站了! 画面大概会长这样:

测试完毕、能浏览之後就可以先关掉了,因为後面要来安装 tailwind

使用 vitawind 来安装 tailwind

接着我们要用 vitawind 来安装 tailwind。执行这个指令,把所需的东西一起装下去~

npm install -D vitawind

然後要建立 tailwind 和 postcss 的设定档以及其他所需的档案,所以我们要执行 npx vitawind

npx vitawind

建立完成後会发现专案根目录多出了一些档案,像是 tailwind.config.jspostcss.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 的语法也顺利生效了呢,这样就完成罗!


<<:  [ Vue ] 使用 Vitawind 1.2 来 建置 Vite + Tailwind JIT 专案

>>:  Android studio 实现选项卡功能

选择写程序的路,在AWS上先躲开可能会遇到的地雷区

拆弹教学 接下来的文章,会使用CDK去建置AWS上的服务,在使用CDK之前需要先安装一些程序,才可以...

写Web不能不知道的常见网路攻击:CSRF

CSRF全名是 Cross Site Request Forgery,翻成中文就是跨站请求伪造。 攻...

Day 18 - UML x Component — Button

Button 是网页中最常用的元件,跟他相依的元件和情境也不少,因此虽然他不是一个介面,依然还是可...

CPU反装与散热器外露

记得小大一在微积分课,老师讲到拓朴学的时候说到了一个故事,有人对囚犯说,你被关在监狱里面,囚犯却对这...

用 Python 畅玩 Line bot - 17:Template message

Line bot API 中有一种只有 line bot 专属的讯息种类,叫做 Template m...