要對Tailwind進行客製化設定,所有設定都是撰寫在tailwind.config.js
這份檔案內,並將欲更改的設定寫在theme
底下,而他本身提供了兩種修改的方式:
Override
最簡單粗暴的方式,直接覆蓋原始的設定,在我自身的專案,像是RWD的斷點,就直接覆蓋原先官方設定的 sm , md , lg
等設定,改成我習慣用裝置區分的方式,以下是我對RWD斷點的設定:
直接覆蓋之後,未來要使用前綴詞做RWD,將只剩下上面我設定的這四組斷點,而原本官方的設定便會被覆蓋過去。
Extend
很多情況下,如:顏色,Tailwind本身也提供了一組頗為完整的調色盤
如果在自訂專案色彩的時候,直接選擇用override的方式撰寫,便會把官方預設提供的顏色都覆蓋過去,這樣如果臨時需要用到自訂色以外的顏色時便會非常的麻煩。
這時就非常適合使用Extend繼承的功能,只要直接將設定添加在檔案預設提供的extend底下,就可以在不更動原先設定的情況下,另外新增設定進去。
實際設定上,我習慣另外開一個類別去設定我的調色,這樣在使用時,比較可以一目瞭然哪些是自己客製的顏色檔。
自行設定的顏色類別,在Coding時和VScode套件的連動也是完全沒有問題的!
結語
Tailwind本身提供兩種客製設定的方式供使用者來使用,使其更容易符合不同開發者的需求,而所有設定方式都能在這份 官方文件 找到,有興趣的人不妨可以抽空閱讀一下!