從手刻 CSS 走向 Tailwind——快速切換版型的優雅解決方案｜2023 Titansoft Tech Days 精選議程

Titansoft Tech Days 是鈦坦人的內部技術交流活動，今年擴大規模，邀請業界夥伴聚集分享技術，鈦坦人擔任部份議程講師，跨企業分享這一年來的技術新知或曾踩過的雷，我們特別精選了幾場議程要分享給大家💗

Published in

新加坡商鈦坦科技

10 min readNov 9, 2023

⭐️【2023 Titansoft Tech Days 精選議程】⭐️

本篇為新加坡商鈦坦科技的 Product Developer Aggie

和 Product Designer Una 攜手合作所帶來的分享👏

有興趣的話就繼續看下去吧～

目錄
1. 為什麼分享這個主題？
2. 現有架構遇到了什麼問題？
3. 介紹社群中 CSS 使用趨勢
3. 從手刻搭配 Bootstrap functional 的經驗
4. 原子化 Tailwind 帶來的好處
5. 改變中遇到的問題以及如何解決？
6. 這麼做的優勢及解決了哪些問題
7. 結語

為什麼分享這個主題？

這個主題由來自不同部門的 Una 和 Aggie 共同分享，我們各自參與了新專案的開發，在這個過程中嘗試了一些新的方法和工具。巧的是，我們兩人都選擇了相同的主題來分享，然後我們就相遇了(?)

由於我們來自不同的部門，在專案中面對的情況和挑戰有些不同，所以本文會分為兩個部分，分別探討我們在不同環境中的經驗和見解。最後，我們將以一個共同的核心主題作為結尾，即實際如何切換不同的版型。

現有架構遇到了什麼問題？

Senior Product Designer｜Una

首先回顧一下我們原本的專案架構。

我們在進行切版時，一直以來都是使用 SCSS 進行手刻，並且有一套自己的命名規則，雖然這種方式在一定程度上提供了彈性，但隨著專案的複雜度增加，我們開始遭遇了一些問題。

這個命名規則變得越來越複雜，尤其是當我們需要管理多個元件的樣式時，這讓 code 變得難以維護，並且容易出現錯誤。

2. 我們的專案需要切換不同的主題，這意味著我們需要為每個主題維護不同的樣式，這增加了我們的工作量，並且可能導致主題之間的不一致性。

因此，面對這些挑戰（麻煩），我們決定嘗試一種全新的方法，那就是用 Tailwind CSS，Tailwind CSS 提供了一種更簡潔、更易於管理的方式來定義和應用樣式，同時它也有內建的主題支援，可以讓我們更輕鬆地切換不同的版型。

接下來，我將分享我們在這個轉變過程中的經歷和收穫。

Product Developer｜Aggie

一開始是看到我們的工程師跟設計師合作的時候（我們是設計師負責切版），會習慣用複製的方式去處理相似元件，跟我過去的工作經驗是習慣盡量開發成共用元件差異很大。

詢問設計師之後才知道是因為擔心共用元件會有改Ａ壞Ｂ的情況，平常 on call 的又是不太會切版的工程師們在處理，如果因為共用元件產生線上問題會有點麻煩。

再來就是跑 lighthouse 的時候發現會有一些沒有使用到的 CSS，但手刻 CSS就是很容易有這種舊有 CSS 不敢刪的情況發生。

最後就是私心喜歡原子化，寫起來就快又快樂(?)

我遇到的問題主要歸納為兩點：

不使用共用元件的狀況下，相似的 component 越來越多，就要維護多份差不多的元件
純手刻 CSS 會有 CSS 越來越肥，管不動的狀況

繼續閱讀｜回目錄

介紹社群中 CSS 使用趨勢

State of CSS 是一個網站和年度調查項目，了解和分享有關前端開發中使用的各種 CSS 技術和工具的最新趨勢和使用情況。

這網站每年都會推出一份報告，其中包括有關開發者在 CSS 領域中使用的不同屬性、框架、預處理器和其他相關工具的調查數據，它提供了有關 CSS 生態系統的洞察，讓開發者能夠了解哪些技術和工具最受歡迎，以及他們的同行正在使用什麼。

開始接觸 Tailwind CSS 之前，從這裡調查後發現各家框架的使用趨勢與現象，Tailwind CSS 使用過與留下來的使用者蠻多的。

從手刻搭配 Bootstrap functional 的經驗

Bootstrap 的核心 function & mixin 非常好用，過去的開發習慣是使用 Bootstrap functional 與 Bootstrap 的變數管理方式，與一套嚴謹的命名規則搭配手刻。

但是會衍生一些問題，例如團隊不全然只有一個設計師切版，其他設計師或是開發者不知道有這些 functional 可以使用，會一直新增相似的 functional、又或者從命名看不出來實際上會有什麼內容、變數管理太冗長。

原子化 Tailwind 帶來的好處

平常我們手刻 CSS 會去定義一個抽象化 class name，然後在 CSS 裡面去寫相關的樣式屬性

原子化之後，我們可以直接在 template 上對應的 DOM 上會有甚麼相應的 CSS

最後 Tailwind 會 build 出相對應的 CSS

也就是我們專案裡面不會再有 CSS 相關的檔案，全部交由 Tailwind 管理。

Tailwind 本身就有提供很多基本的屬性，可以到 Tailwind 官方網站直接查詢，如果需要客製化，可以把客製化的內容寫在 Tailwind.conifg 裡面。

另外 IDE 也有相關 plugin，可以提示 Tailwind 提供的 class。

整體來說，我們改用原子化的方式有明顯的提升開發速度，

節省定義 classname 的時間
節省 CSS 和 HTML 之間切換來切換去的時間
只要複製 HTML 的部分，就可以長出一模一樣的樣板
搭配 Copilot 可以自動產生可能會組合使用的 CSS

再來就是 Tailwind 只會 build 出有使用的 CSS，沒有使用到的內容就會自動消失，讓最後的 CSS size 最小化，也因為原子化的原因，在長期開發的情況下，CSS 成長的速度也會減緩。

另外如果有在寫測試的話，檢測原子化的 class 測試準確度也會提升。

假如我們今天要測試當某個條件發生的時候，DOM 上要加上 win 這個 class，我們的測試就檢查有沒有帶上 win 這個 class。

但因為各種神祕的原因，CSS 寫錯了，不過 win 這個 class 還是有正常的出現在 DOM 上，所以測試沒有壞，但 UI 上無法正確的顯示

這時候改成原子化的寫法，就會改成測 border-yellow 和 bg-yellow，相對於前面 win 的情況，精準度就會提升。

繼續閱讀｜回目錄

改變中遇到的問題以及如何解決？

這次實作切換版型的方式是以抽變數的概念來實作，以下是 Tailwind.config 的配置：

我們將 LayoutA、LayoutB 的相關設定寫在各自的檔案裡，最後在 Tailwind.config 裡選擇要引用哪一個 Layout 檔，可以想像 LayoutA、LayoutB 就是一個變數檔。

LayoutA 內容：

LayoutB 內容：

會看到 LayoutA、LayoutB 的結構和變數名稱都是一致的，最後如果是使用 LayoutA 的內容，Tailwind 就會依照 LayoutA build出相對應的 CSS。

根據 LayoutA build出來相對應的 CSS：

bg-primary: #0C044B;

根據 LayoutB build 出來相對應的 CSS：

bg-primary: #4D0404;

HTML 上我們就是直接使用 bg-primary，最後的值由 config 引用哪個設定檔決定

當然這個方式也有他比較致命的缺點，就是他每換一次版型都必須要重新 build 一次對應的 CSS，所以無法達成同時有多個版型在 production 的狀況，但反過來說，如果商業上有考量一次只有一個版型的情況，這樣使用也是沒問題的

那如果想要同時多個版型都在線上，那可以將變數交由 CSS 原生的變數系統來管理，多個系統搭配使用。

這麼做的優勢以及解決了哪些問題

複雜的樣式管理

原本的手刻方式需要處理繁複的樣式管理，包括自定義的 CSS 命名規則，這導致 code 變得難以維護且容易出現錯誤。使用 Tailwind CSS 簡化了樣式管理，因為它提供了一組清晰且直觀的類別名稱，使開發者能夠更輕鬆地應用樣式。

一致性

在原本的架構中，確保網站的外觀和風格一致性變得困難，尤其是在多個元件和主題之間。Tailwind CSS 提供了預定義的樣式，確保各元素保持一致，並有助於減少不一致性。

主題切換

專案需要能夠輕鬆地切換不同的版型和主題，原本的方式需要為每個主題維護大量的樣式。Tailwind CSS 內建了主題支援，讓我們能夠更快速地切換主題，降低了維護成本。

輕量化

Tailwind CSS 的輕量化特點確保最終生成的 CSS 檔案只包含實際使用的樣式，這降低了樣式表的大小，有助於提高網站的加載速度和性能。

提高開發速度

使用 Tailwind CSS 提高了開發速度，因為開發者不再需要處理繁瑣的 CSS 編寫，而是可以使用直觀的類別名稱來快速應用樣式，這節省了時間並降低了出錯的風險。

總的來說，透過採用 Tailwind CSS，我們能夠更有效地解決原本在手刻方式下所面臨的樣式管理、一致性、主題切換和性能優化等問題，提高了開發效率，同時保持了網站的一致性和性能。

結語

對我們來說，使用 Tailwind CSS 是一個愉悅的體驗，它提供了一種極其迅速的方式來切割出所需的樣式，同時又極其方便。這種迅速性不僅節省了時間，還增加了我們在設計和開發中的靈活性。

除了 Tailwind CSS 本身的功能，我們也發現原生的 CSS 變數系統可以與之搭配使用，這進一步擴展了我們的樣式管理能力。這意味著我們可以在需要更進一步的自定義時進行調整，同時仍然享受到 Tailwind CSS 帶來的快速優勢。

回目錄

💛【喜歡這次的分享嗎？】
🎈 感謝收看 Titansoft Tech Days 精選議程～對於技術內容有任何疑問或是想進一步交流都歡迎在底下留言！
🎈 如果你想更認識 Titansoft Tech Days，歡迎到 👉 這裡看詳細的分享

📢【鈦坦熱烈徵才中】
在鈦坦沒有Boss，但要有自組織的Guts ❗❗
想要投入 #彈性工時 #自主升遷 #薪資透明的工作文化 ❓ 還有～～豐富的內外訓教育課程隨你申請、專為敏捷團隊設計的開放式辦公空間、上班隨時前往酒吧暢飲放鬆一下…
🙋‍♂️ 職缺看這邊～
👉 https://gotica.io/鈦坦職缺/Blog