DEV Community: thomas chu

tailwind vs windicss

thomas chu — Sun, 15 Aug 2021 09:37:27 +0000

信相前端工程師在切版下過一點功夫的人，一定都聽過 tailwind css ，但不一定有聽過 windicss ，這兩個東西都被稱作是下一個世代的 css ，今天來比較兩個的差異。

本文章不會說明太多的寫法，只會針對差別來作一個比較

tailindcss vs windicss 看看誰比較狂

	Tailwind	Windicss
支援度	Angular, Vue,React, Nuxt, Next, larval	Vue, Nuxt, Svelte
斷點 Break point	只能依照 config 的法式撰寫	輕鬆的變換 breakpointer 的寫法
CSS	一般你想的到都有支援	比起 tailwind 有更多的 css 支援度
討論度	較多人討論，進版進度快	討論度沒有 tailwind 高
未來發展	開始有 UI 系統出現	在寫法上有更好的歸類方式

斷點 Break point

tailwind

預設是使用 min-width 的方式去作切版，也可以自己設定 max-width

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

windicss

預設也和 tailwind 一樣，但可用 < @ ，直接變為 max-width 和 max-width & min-width，可以說是非常的方便。

<div sm:bg-red-500 @sm:hover:bg-green-300 dark:bg-white></div>

windicss docs

CSS

tailwind css 基本上可說是該有的都有了，只是windicss 更狂，有更多的 effect css ，如下列：

討論度

Tailwind css 在這個上面比較熱絡，也有 youtube, Facebook 的社群可以參考，windicss 在這個上更比相較比較遜色一點，雖然在 tailwind 還沒有 jit mode 的時候，tailwind 的作者還去請教 windicss 的作者是如何作到速度不變慢，還可以持續開發。

未來發展

Tailwind 在 1.9 到 2.0 可以說是有一個很大的跳躍，因為多了一個 jit mode 加速了，編譯的速度，不然過去 complier 的時候絕對讓你懷疑人生，在來也加上了 UI 系統，雖然自己切的東西最可以改，但是有時候為速度，還是要有一個寫的東西，這樣子比較可加速開發。

Beautiful UI components

tailwindcss mile stone

Windicss 在寫法上越來越有規劃的去撰寫你的css

<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
  Button
</button>

在這個瞬間你可以沒有辦法看到這個 button 的樣式，但是如果你換成這樣子呢？

<button 
    bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

真的是很想給 windicss 一個起立掌聲 ( 拍手 )

WindiCSS v3.0 now in Beta

小結

這兩個神器只能說，各有好壞，只是 windicss 的支援度，可能在開發專案上遇到一點點界線，不然其它的地方覺得都是很優秀的，但沒辦法現行的話可能還是會以 tailwind 為首選，同時也是希望 windicss 可以把這個小缺點補上。

Windi CSS - Tailwind CSS 的上位替代

Git 時光機

thomas chu — Sun, 15 Aug 2021 03:42:23 +0000

Git 可以說是比寫 code 還要重要的東西，現在的專案基本上都要共同協作，所以如何避免衝突，不在開發的時候發生災難，可以說是非常的重要，寫 code 寫不好可以問人，但 Git 不行的話可能連工作都沒有辦法一起 co-work 。

另外如果對 vim 還沒有很熟的話建議去多了解一下 vim 的編輯、儲存、查尋方式，對你在使用 git 上會更加的得心應手。

Git 常用commend line

git 起手式

在專案位置下初使化 git ，表示可開始用 git 來管理你的專案，此時專案中會出現一個隱藏資料夾 .git ，然而你在開發的過程中也一定會有你不想要推到 remote 的東西，這個時候你可以建立一個 .gitignore 的檔案，在裡面編寫你不想要上傳的文件 or 資料夾

git init    
# .gitignore 檔案
node_modules # 資料夾不推上 git
/dist 
.env # 檔案不推上 git

在來你需要對專案說，你是誰，所以把你的 email 和名稱和 git 說，因此在 git.config 裡面建立資訊

 # 查看你目前的 config 清單
git config --list

# 建立名稱
git config --global user.name [YOUR_NAME] 

# 建立 email
git config --global user.email [YOUT_EMAIL]

clone 專案

開發其它的專案，透過 clone 的方式，把 .git 的檔案一起抓下來

git clone [YOUR_PROJECT]

加入 remote

# 查詢remote相關指令
git remote -h 

# 將遠端數據庫的名稱從 <old> 改為 <new> 
git remote rename `<old>` `<new>` 

# 在 <newurl> 內指定遠端數據庫的新地址
git remote set-url `<name>` `<newurl>` 

# 加入 remote 資料
git remote add origin [YOUR_PROJECT]

切換遠端分支

首先你應該不會知道專案中所有的 br 叫什麼名稱，所以可透過

# 查看所有 local 遠端 br
git branch -a

在確認完之後，在回到專案的位置上，進行切換分支

git checkout -b [BRANCH_NAME] [origin/BRANCH_NAME]

加入暫存區

把資料加入暫存區

 # add all file stage
git add .

# after everyone check, add file to stage
git add -p

取消加入暫存區

git checkout

加入本地儲存區

把資料加入本地儲存區，方法其實有很多種，但主要就是要把你的資料寫到 git 裡面，如果你所要寫的東很多的話，建議你可以用 vim 的方式去作編輯歐

git commit # 會直接進到 vim IDE 中
git commit -m 'msg content'

退回本地儲存區

# get commit id
git log 

# 本地數據庫不見
git reset --hard `<id>^` 

# 本地數據庫還在
git reset --soft `<id>^`

commit 訊息邏輯

以大寫開頭

以<動詞> + <受詞> + <內容> 的文法撰寫

內容不宜過長

內容需要據有代表性

stash

會使用它最常有的情境是，你開發到一半，但是 BOSS 請你趕快的去處理另一件是，這個時候你也還沒有到可下 commit 的時候，這個時候，可用 stash 把你開發的 code 先到一個地方，之後只要回來，在把東西 stash 回來便可繼續開發。

在 stash 之前建議先把所有的 code 放到暫區，因有時候我們是新建檔，直接 stash 的話新檔就會被遺留在，原本的 br 上面
git add . 
為了確保我們所寫的東西不要被分別放在不同的 stash list 裡面

暫時存現狀

git stash save 'msg ...'

顯示暫存清單

git stash list

回復暫清單，通當你會去看一下你的清單有什麼，然後確定是第幾個之後用 stash@{0} 的方式來還原你想的的暫存。

這裡的 0 是表示，你最一次 stash 起來的東西，1 的話就是倒數第二次的東西，依此類推

 # 拿回最後一次 stash 的 code
git stash pop shash@{0}

# delete stash data
git stash pop `<shash ID>` 

git stash apply `<shash ID>`

刪除暫檔

git stash drop `<shash ID>`
git stash clear # clear all

合併分之

通常在有規模的專案下面開發，比較不會用到 merge ，因為主要都是透過 lib 去發 merge request ，而不是自己在本地，就把 code merged 到其它的分支。

merge

git merge [BRANCH_NAME]

但是我們在拉分支的時候，其實就是常常在用 merge 的指令，只是被合併在一起了。

rebase

git rebase [BRANCH_NAME]

這兩個都是把 br 作合並的效果，但是 rebase 是直接把原本的分支合回到另一個 br 的分支上，變成一個，也就是說，有些 commit 你可能會沒有辦法在 tree 上面直接的看到，因為被合到另一個 tree 上面了

刪除 branch

Coming soon ...

遠端數據庫

fetch

主要只執行拉 code 的動作，但它不會把 code 和你現在的 br 進行合併，所以執行完後你是會在 HEAD 上面的

# 把你在遠端的 br 拉下來
git fetch

pull

那 pull 的這個動作，就是我們把 fetch + merge 的動作一起作完，把 code 拉下來，然後 merge 到你現在的 br 中

# git fetch + git merge 
git pull 

# 當然你也可選擇 rebase 
git pull --rebase

push

把你所 commit 好的的檔案往上傳到 remote 端，但是需先確認是否已設定好 origin 的 remote 位置

git push origin [BRANCH_NAME]

tag

若要添加標示標籤，可以在 tag 命令加上 -a 參數執行，執行後會啟動編輯器，請輸入要給予的註解。也可以用 -am 參數來直接添加註解。

git tag -a [TAG_NAME]

在 HEAD 指向的提交裡增加名為 [TAG_NAME] 的標籤，請執行以下的命令。

git tag -am 'msg...' [TAG_NAME]
git tag -n #  可以顯示出標籤和註解

Git Bisect

希望你一輩子都不要用到這個東西。

git bisect start [BAD_COMMIT] [GOOD_COMMIT]
# 開始後將自動 checkout 到要檢查的 commit 
# 請執行以下指令標記正常 or 錯誤

參考文章

fork 專案

在 github 選擇 fork ，需在把你的 remote 專案名稱修正，因為通常 origin 指的是自己的開發 remote。然後在把 fork 的 repositories 設定到你的 origin 裡面。

確認 remote 的名稱 ⇒ 修正名稱 ⇒ 加入新的fork repositories ⇒ 確認 remote 的名稱

Git alais

Coming soon ...

檢查 git

下列這些指令是在你開發到一半，想要回去查東西時很用的指令

 # 看一下還有多少東西沒有進暫存區
git status

# 確認這個 br commit 的狀況
git log 

# 確認一下遠端
git remote -v

# stash 的清單
git stash list

# 可以檢看一下指令
git remote -h

參考文章

搬移檔案

git commit message 的格式

DEV Community: thomas chu

tailwind vs windicss

tailindcss vs windicss 看看誰比較狂

斷點 Break point

tailwind

windicss

CSS

討論度

未來發展

小結

相關文章

Git 時光機

Git 常用commend line

git 起手式

clone 專案

加入 remote

切換遠端分支

加入暫存區

加入本地儲存區

stash

合併分之

merge

rebase

刪除 branch

遠端數據庫

fetch

pull

push

tag

Git Bisect

fork 專案

Git alais

檢查 git

參考文章