tailwind vs windicss

信相前端工程師在切版下過一點功夫的人，一定都聽過 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 可以把這個小缺點補上。