前端+設計+Tailwind

公司不少舊有產品在UI上凌亂的問題，因此在做新的專案時，決定導入了Design System；這是由設計主導的設計規範的東西。

簡單來說，如果專案有了Design System，那麼這個專案任何一頁，會因為各個項目，如：字體、間距、按鈕、標頭等等，都有了絕對的規範，所以任何一頁看起來都會有一種和諧感，不會因為不一樣的頁面有不一樣的設計稿，就導致使用者在操作起來，會感受到畫面凌亂的問題。

而且在Design System的規範下，設計如果是多個人，或是一大群設計群在設計同一個產品，也不會讓每個頁面或組件顯得凌亂。

Uber的DesignSystemy就對產品設定了全部的規範，本篇將以Uber做舉例.

由已被規範的程式碼交由tailwind去規範

如果設計稿，透過DesignSystem被規範，那麼轉為前端的程式，也可以輕鬆的寫成模組了。

以下用Uber的Figma DesgnSystem做舉例。

Typography

!(圖)[/pages/post/co-work-with-designer/1.png]

在CSSinJS的StyledComponent中，如果想寫將設計規範寫為Typography，此時通常會做類似下面使用方式的Component

<Typography body={4} semibold />

接著在Typography Component中，就會依props實作關於符合需求的Component。其實後來最懶人的方法，就是使用Styled-System去做。

而在tailwindCSS的世界中，就是修改tailwind.config.js，舉例如下：

FontSize: [14px, 16px]

接著，我們就可以在HTML中下以下指令

<span className=“text-body-4 semibold” />

就會有同樣的效果，是不是開始感覺有更輕量的感覺？而且tailwind有讓專案更輕的感覺，官方宣稱少掉90%的Style相關程式，並非唬爛。

Tailwind CSS將會把專案中所有的CSS class，在compilier過程中，包在main.css裡面

Color Set

顏色的色票，也是設計其實要規範的東西。其實tailwind也早就預設好色票組了；不過，就如同上述提到的Typography，其實設計師自己也有一套做法。所以前端工程師們，還是再寫一下config.js吧！如下：

{
  Gray: {
    200: ‘#202020’
  }
}

有了上面和設計師一起完工的規範，就可以在HTML加入以下class

<span className=“text-gray-200 border-gray-200” />

關於顏色，可以詳讀官方Document。

可以在text- border- bg- 等prefix字串中，後面加入色票設定。

沒有什麼Tailwind不能幫團隊的事

上面的範例只有講到一點點；除了上面基本設定外，也可以將div做component化，也就是可以不需要針對NavigationBar或Button等，再製作一組Component或加入Style.css；可以透過tailwind的設定，加入 .button或.navigation-bar的設定，這樣就是利用Tailwind做Component化的方式。

現階段回不去的CSS撰寫模式

事實上，在用完Tailwind之後，就的有回不去的感覺，有一種可以完全取代StyledComponent或emotion的感覺，而且它更加的使專案輕量化。

最後的重點，您只要安裝(Tailwind Plug-in For Visual Studio Code)[]，您將暫時離不開這個天殺的好東西了。