1. 首頁
  2. »
  3. 網站架設
  4. »
  5. WordPress
  6. »
  7. 如何將Tailwindcss導入WordPress佈景主題中與設定教學

如何將Tailwindcss導入WordPress佈景主題中與設定教學

2023/06/05

梅問題-完整教學:如何將Tailwindcss導入WordPress佈景主題中
  自從Tailwindcss推出到3.x版後,與梅干先前接觸的版本,無論在部署還是設定上都要來的方便許多,甚至在運用上也變得更加靈活,因此最近也將手邊的專案,陸陸續續的導入Tailwindcss,甚至就連梅干自創的茶品申時七茶,也將長久以來的Bootstrap移除,並成功的導入Tailwindcss。

自從有了Tailwindcss後,讓網頁編排與微調變得更加靈活,但像WordPress佈景主題已經有既定的CSS了,是否要整個打掉重練呢?其實並不用,可以保留原始的架構,再把Tailwindcss導入,如此一來就可在WordPress的佈景主題中使用Tailwindcss啦!至於要怎設定,現在就一塊來看看吧!


Step1
首先先將WordPress的佈景主題,拖拉到VS Code的檔案總管中。
梅問題-完整教學:如何將Tailwindcss導入WordPress佈景主題中
Step2
接著開啟終端機,分別輸入下方的語法,當輸入完畢後,在佈景主題中,分別就會看到以下的檔案與目錄。
npm install -D tailwindcss
npx tailwindcss init
梅問題-完整教學:如何將Tailwindcss導入WordPress佈景主題中
Step3
接著開啟tailwind.config.js後,在content加入["./*/.{php,js}"]。
梅問題-完整教學:如何將Tailwindcss導入WordPress佈景主題中
Step4
接著再建立一個新檔案,並輸入以下的設定,再儲存為tw.css
梅問題-完整教學:如何將Tailwindcss導入WordPress佈景主題中
Step5
再開啟package.json,加入"dev":"npx tailwindcss -i ./tw.css -o ./theme.css –watch"。
梅問題-完整教學:如何將Tailwindcss導入WordPress佈景主題中
Step6
然後再開啟header.php,在head結尾上方加入引用theme.css的樣式連結。
梅問題-完整教學:如何將Tailwindcss導入WordPress佈景主題中
Step7
這樣就可以在實現在WordPress的佈景主題中,使用Tailwindcss與高彈性的排版與微調啦!
梅問題-完整教學:如何將Tailwindcss導入WordPress佈景主題中