JavaScript

2022.05.18

在 VUE SFC (vue-cli) 規劃 Tailwind CSS 架構

公司年初跑的一個新專案,我選擇用 Vue Clie + Tailwind CSS,會使用 Tailwind CSS 的原因,是前一個專案用 Bootstrap 的 utility class 用蠻兇的,使用的同時,也發現了這種設計的好用之處,因此愛上了他。

選用 Tailwind CSS 的原因

原本是想用 Atomic CSS,但聽說 Tailwind CSS 最近很夯,所以就改用這款啦!

之前在安裝 Tailwind CSS 時,也有做一些筆記,有興趣朋友可以參考:

Vue CLI 搭配 Vue3 + Tailwind CSS3 開發

前情提要 原本使用 Vue CLI 可以直接用 vue add tailwind 一鍵安裝 Tailwind […]

Read more

用 Vue + TailwindCSS 時,變數 class 沒有作用

碰到的問題 假設想把 TailwindCSS 的 class 改用變數顯示: npm run dev 之後,會 […]

Read more

使用 Tailwind CSS 的感想

從年初到現在,也用 Tailwind CSS 半年了,不得不說真的蠻強大的,強大到我連現在的 WordPress Blog 也是用 Tailwind CSS 打造的唷 XD。

程式的概念與技術都會隨著時代而演變,猶記得以前大家習慣在 CSS 獨立成一個目錄,然後用各種 Naming 去管理他 (例如 BEM, OOCSS… 等等),到現在 SFC (單一元件檔)推出,又變回把 HTML + CSS + JavaScript 寫在一起的模式,就很像最早寫 HTML 時,一頁一條龍的感覺。

當然,沒有誰對誰錯,也沒有一定要站哪邊。

我覺得如果是獨立作業,那要怎麼選擇,就是自己開心、自己順手,自己熟悉為佳。

如果是團隊作業,靠的是溝通與互相了解,而且不要排斥新技術,可以先試用看看,才能更體會他的好與壞,再來決定團隊該選擇哪一種技術。

我自己一開始也蠻排斥 SFC 的觀念,明明已經把 CSS 單獨拉出來管理了,為什麼又要走回 HTML 一條龍的老路呢?

但抵不住 VUE 的強大誘惑,還是自己親身試試看了,沒想到一試便成主顧 XD。

我不再糾結 CSS 是否要單獨管理這件事情,而是真的以「管理元件 Component」的這個角度出發,去思考怎樣的架構對元件的延展性、維護性是好的,再來決定我的 CSS 樣式該放在哪裡。

也就是說,「CSS 單獨管理」以及「把 CSS 寫在 HTML 裡面」,這兩件事其實並非互斥,而是能相輔相成的。

為 單一元件檔 SFC 而生

而 Tailwind CSS,對我而言,就是當我以「管理元件 Component」的思維看時,我發現 Tailwind CSS 真的就是為了單一元件檔而生的!

我在 <template> 設計元件時,就可以把資料以及樣式一次到位,我不用再花時間思考 class 的名字,也不用花時間去想我該把這段 CSS 放在哪一個檔案裡面。

我所要做的事情,就是看設計稿,然後用 Tailwind CSS,打出他的樣式,然後這個元件就做好惹!

「快速開發,快速到位」,這是我對 Tailwind CSS 的第一個印象。

客製化簡單好上手

Tailwind CSS 官網的教學很詳細,對 VUE 的支援度也好。

以 VEU 舉例,我能直接在 tailwind.config.js 做任何的設定,包含新增更多顏色,或是調整行動版的斷點設定 ... 等等,全部的參數包在一起,不管是查閱或是編輯都很方便。

module.exports = {
  theme: {
    extend: {
      colors: {
        'default-orange': '#ff8300'
      }
    },
    fontFamily: {
      'amount': ['Roboto', 'Airal', 'sans-serif']
    }
  }
}

資源豐富

如果是自己做設計,想找靈感時,也有很多的 Tailwind CSS 資源可參考,這邊是我常用的幾個網站,分享給大家!

daisyUI

很酷的 Tailwind CSS plugin,你可以把它想成是架構在 Tailwind CSS 上的框架,想要打造一個 Tailwind CSS 底子的網站,卻又懶得自己寫元件,可以用用他們的 UI 唷。

原本我的部落格也是想要這套 daisyUI,但他們的圓角風格真的太可愛,我吃不下來 XD,而且我還是喜歡自己客製,所以又又又放棄了使用框架,不過裡面還是有很多設計值得參考。

daisyUI — Tailwind CSS Components

daisyUI — Tailwind CSS Components

Tailwind Components Library - Free components for Tailwind CSS

tailwindcomponents

這個是我在用 Tailwind CSS 時,最常參考的網站。裡面的範例都是免費開源的,而且樣式都很好看,可以從裡面欣賞大家的架構與寫法。

複製程式碼之前,要先注意 Tailwind CSS 的支援版本,裡面有 v2 也有 v3,如果複製 v2 的語法到 v3 的版本,有的設定不支援喔!

另外範例裡如果有一些互動效果 (例如點擊),他們會放上 x-* 的語法去控制互動,記得要改用 JS 控制才會有對應的互動效果。

Tailwind CSS Components. Examples and templates

Tailwind CSS Components. Examples and templates

Tailwind CSS examples from components by the community. Tailwind chart, grids, inputs, forms, templates and much more

https://tailwindcomponents.com

Tailwind Elements

這個網站是我最近才發現的,只有加入收藏還沒實際使用過 XD。不過照他的介紹來看,是把 Bootstrap 的元件重新用 Tailwind CSS 寫過,可以讓你用 Tailwind CSS 的同時,也能有 Bootstrap 的樣式,感覺很適合從 Bootstrap 搬家過來的朋友 XD。

Tailwind Elements - Bootstrap components recreated with Tailwind

Tailwind Elements - Bootstrap components recreated with Tailwind

Collection of free, popular components like modal, dropdown, carousel, popover, cards, charts and many more.

https://tailwind-elements.com/

同場加映

再分享幾個朋友推薦的 Tailwind CSS UI:

Free Open Source Tailwind CSS Components | HyperUI

Free Open Source Tailwind CSS Components | HyperUI

Free Tailwind CSS components that can be used in your next project. Perfect for Laravel, Rails, React, Vue and more.

https://hyperui.dev/

Mamba UI

Mamba UI

Free UI components and templates based on Tailwind CSS

https://mambaui.com

Headless UI

Headless UI

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

https://headlessui.dev/

Meraki UI Tailwind CSS Components

Meraki UI Tailwind CSS Components

Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.

規劃 Tailwind CSS 架構分享

最後想跟大家分享,自己用 Tailwind CSS 這半年,是如何規劃與分類的。

前面有提到,因為我是用 vue-cli 搭配 Tailwind CSS 開發,所以我會以 SFC (單一元件檔) 的角度出發分享。然後我的做法絕對不是最好的,甚至可能不好,因此如果你覺得哪裡不對,或是哪裡可以更好,都歡迎留言分享唷,謝謝 😀

核心概念:共用

我在規劃時,只有一個核心概念,就是要不要「共用」。

這個樣式,會給所有檔案共用嗎?會給 SFC 的所有元素共用嗎?還是只有自己用?

所有檔案:類似以前的 base.css,我會在裡面設定 body 樣式,而這個 body 就是每一頁 HTML 都會使用的共用樣式。

SFC 共用:就是指只有在這一頁 HTML 會用到該樣式,其他的 HTML 不會使用。例如註冊會員的「input 單行文字」,註冊會員可以有很多個 input,而且樣式都相同,這就是 SFC 共用的意思,但他不會出現在產品頁。

只有自己用:顧名思義,就是這個樣式只會用在這一頁的這一個元素,其他地方不會有這個元素。

決定好要不要「共用」後,我就可以來拆樣式啦!

@apply 很好用

Tailwind CSS 第一個令大家困惑的點,就是 HTML 會變得又臭又長,有的東西明明可以「共用」,卻要寫很多次,導致維護不易。

其實 Tailwind CSS 的 @apply 就能輕鬆解決上述問題,我們可以將兩段相同的 class 合併成一段,再用以往熟悉呼叫 class 的方式,就能輕鬆解決這個問題了!

<!-- 重複的語法 -->
<div class="text-black text-sm">Hello</div>
<div class="text-black text-sm">MUKI</div>

<!-- 合併 1.照以往做法,取一個 class name -->
<div class="title">Hello</div>
<div class="title">MUKI</div>

<!-- 合併 2.使用 @apply 將 Tailwind CSS 的樣式合併起來 -->
<style>
  .title {
    @apply text-black text-sm;
  }
</style>

透過上面的範例,應該可以發現,我們在 title 裡加了 @apply,把 Tailwind CSS 樣式放在裡面,這樣就能快速的合併相同的 Tailwind CSS 囉。

使用 import css 讓所有檔案共用

這邊一樣以 vue cli 產生的 tailwind.css 為例,我直接在這份 css 裡面 import 我自己的 CSS 檔案

@tailwind base;
@tailwind components;
@tailwind utilities;

@import 'css/style.css';
Line 5: 匯入自己新增的 style.css

這個 css 放的就是讓網站的所有檔案共用的樣式,共用的樣式不會很多 (因為 SFC 共用的不會放在這),因此不需要再拆分新的 css 檔案。

我在這份檔案裡,有放一個按鈕的樣式,因為按鈕是全站共用,而且使用頻繁,所以我獨立將它拉出來,語法如下:

/* -------------------------------
Button
@.btn-in-bg
@.btn-in-bg__dark
@.btn-in-border
------------------------------- */
div[class|=btn], button { @apply transition duration-300 }
.btn-in-bg { @apply bg-default-orange text-black rounded-md px-3 py-1 hover:text-white }
.btn-in-border { @apply bg-neutral-800 border border-default-orange rounded-md px-2 py-1 text-sm hover:text-default-orange }
.btn-in-bg__dark { @apply bg-neutral-800 rounded-md px-3 py-2 hover:bg-neutral-600 }
button:disabled { @apply bg-neutral-600 hover:text-black }
div[class|=btn] { @apply hover:cursor-pointer }
Line 3 ~ 5: 註解寫上按鈕的 class 名稱,方便日後查詢
Line 18 ~ 20: 三個主要的按鈕樣式

在按鈕上,能直接使用該樣式,就跟以往的 CSS 差不多:

<button class="btn-in-bg__dark">取消</button>

在 vue 檔案裡,設定 SFC 共用的樣式

我有一份 CardFooter.vue,裡面有一個線段的樣式:

<div class="w-2 border-default-orange">line1</div>
<div>some content....</div>
<div class="w-2 border-default-orange">line2</div>

這個樣式只會在 CardFooter.vue 使用,但同時又有 Line1 跟 Line2 都會用到相同的樣式,所以我們就可以在 CardFooter.vue 裡面設定 line 的共用樣式。

<div class="line">line1</div>
<div>some content....</div>
<div class="line">line2</div>

<style lang="postcss" scoped>
  .line { @apply w-2 border-default-orange }
</style>
Line 6: 在 CardFooter 這隻檔案裡,共用 line 樣式

自己用的直接寫在元素內

以我前面提到的按鈕為例,我共用了按鈕的樣式如下:

<button class="btn-in-bg">確定</button>
<button class="btn-in-bg__dark">取消</button>

但我希望這兩個按鈕中間有點距離,但不是所有按鈕都需要這個距離,因此無法共用。所以我選擇直接在元素調整:

<button class="btn-in-bg mr-4">確定</button>
<button class="btn-in-bg__dark">取消</button>
Line 1: 加入 mr-4,讓右側有距離

後記

以上用按鈕舉例,跟大家分享了我的 Tailwind CSS 規劃架構,我是掌握「共用」這個核心去規劃,不管怎麼思考,都不能偏離這個主題。

也許按鈕相對簡單,但一開始希望用簡單的範例,讓大家能快速消化我的邏輯,未來大家如果有興趣,我再來分享像是版面,或是更複雜的元件,該怎麼規劃會比較好。

也希望這篇文章對大家有所幫助,有任何問題都歡迎留言給我,感謝

歡迎給我點鼓勵,讓我知道你來過 :)

1
guest
0 則留言
Inline Feedbacks
View all comments
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.