tailwind vs windicss

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

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

tailindcss vs windicss 看看誰比較狂

斷點 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 ，如下列：

• Mix Blend Mode

• Caret Color

• Image Rendering

• List Style Type

討論度

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 的上位替代