站長阿川 · 09月18日

後台用 Bootstrap，前台用 Tailwind

兩邊要的東西不一樣，不必硬用同一套 CSS。

我的專案裡有兩套 CSS 框架。前台用 Tailwind 4，後台用 Bootstrap 5。

每次講到這件事，都有人皺眉頭：不一致、學習成本、包太大。

我認為這是對的選擇，理由很簡單：這兩個介面的目標完全相反。

前台要的是「完全照設計稿」

品牌官網的字級、間距、色票、動線，都是設計師決定的，而且會改到上線前一天。這種需求最怕的就是「框架幫你決定好的樣式」——你會一直在覆寫它。

Tailwind 沒有預設外觀，它只是把 CSS 屬性變成 class。設計稿說間距 28px，就寫 28px；說按鈕沒有圓角，就沒有圓角。它不跟你爭。

後台要的是「明天就能用」

後台沒有設計稿，也不該有。它要的是表格、表單、按鈕、Modal、分頁、警示訊息，而且要有一致的長相。

Bootstrap 開箱就有這些。我寫 class="btn btn-outline-secondary btn-sm"，就得到一顆長得跟隔壁頁一模一樣的按鈕，不用思考。後台的每一分鐘，都該花在功能上，不該花在調 CSS。

硬要統一會發生什麼

兩邊都用 Tailwind： 後台你得自己刻一套元件——表格樣式、表單樣式、Modal、下拉選單，然後自己維護它們的一致性。等於在做一套自己的 Bootstrap，而且只有你一個人在維護。

兩邊都用 Bootstrap： 前台的設計稿會被 Bootstrap 的預設值追著打。你會寫一大堆 !important，或是最後乾脆整個覆寫掉——那你當初裝它幹嘛。

成本其實不高

樣式不會互相污染，因為前台跟後台是不同的 layout，各自載各自的 CSS，沒有一個頁面同時需要兩套。

沒有 bundle size 問題，因為訪客只會載到 Tailwind，後台那包只有你們公司內部的人會載。

學習成本也還好，兩套都是抄文件就會的東西，而且工程師本來就得同時懂它們。

背後的原則

不要為了「統一」而統一。 統一的價值來自於「同一種問題用同一種解法」，但這裡是兩種問題：一個是品牌表現，一個是內部工具。

同一個專案裡有兩種前端寫法，跟有兩種後端寫法是同一回事——界線清楚的話，那叫分工，不叫不一致。

站長阿川

⭐️ Shopify 網站開發服務（給品牌）
https://job.turn.tw/shopify-services

⭐️ 川川電商事務所（全客製電商開發服務）
https://chuanchuan.tw

⭐️ 台灣 Shopify 商家交流 LINE 群（非官方）
https://line.me/ti/g2/PZ_1LILWVWWuzZQ50HNpYA-A3k6QXWF6znqoBQ

⭐️ 台灣 Shopify 開發者 LINE 群（非官方）
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA

0個讚 0留言 2瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

站長阿川

🏆 本月排行榜

🥇

站長阿川

📝45 💬1

643

評分標準：發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10

本數據每小時更新一次