Tailwind 提供的兩種主題客製方式

Wen Chen
Oct 19, 2021

--

Photo by Avel Chuklanov on Unsplash

前言

雖說,Tailwind本身已經提供非常完整的主題和style 系統,但在面臨專案開發時,難免還是會有一些小設定希望可以客製,對此,Tailwind很貼心的提供了兩種針對預設設定檔進行修改的方式,以下便是今天的主題!

Tailwind.config.js

要對Tailwind進行客製化設定,所有設定都是撰寫在tailwind.config.js這份檔案內,並將欲更改的設定寫在theme底下,而他本身提供了兩種修改的方式:

Override

最簡單粗暴的方式,直接覆蓋原始的設定,在我自身的專案,像是RWD的斷點,就直接覆蓋原先官方設定的 sm , md , lg 等設定,改成我習慣用裝置區分的方式,以下是我對RWD斷點的設定:

RWD斷點設定

直接覆蓋之後,未來要使用前綴詞做RWD,將只剩下上面我設定的這四組斷點,而原本官方的設定便會被覆蓋過去。

Extend

很多情況下,如:顏色,Tailwind本身也提供了一組頗為完整的調色盤
如果在自訂專案色彩的時候,直接選擇用override的方式撰寫,便會把官方預設提供的顏色都覆蓋過去,這樣如果臨時需要用到自訂色以外的顏色時便會非常的麻煩。

這時就非常適合使用Extend繼承的功能,只要直接將設定添加在檔案預設提供的extend底下,就可以在不更動原先設定的情況下,另外新增設定進去。

實際設定上,我習慣另外開一個類別去設定我的調色,這樣在使用時,比較可以一目瞭然哪些是自己客製的顏色檔。

tailwind.config.js 設定

自行設定的顏色類別,在Coding時和VScode套件的連動也是完全沒有問題的!

結語

Tailwind本身提供兩種客製設定的方式供使用者來使用,使其更容易符合不同開發者的需求,而所有設定方式都能在這份 官方文件 找到,有興趣的人不妨可以抽空閱讀一下!

--

--

Wen Chen

來自影視產業的前端工程師,喜歡產出帶來的成就,努力成為一名合格的工程師!