如何在Tailwind CSS中使用自訂字體
假設你已經設定好了使用Tailwind CSS的應用程式，你將擁有一個包含以下內容的CSS檔案： @tailwind base; @tailwind components; @tailwind utilities; 你可以前往Google Fonts網站，選擇一個字體，並且會提供你一個用於匯入該字體的CSS @import。 舉個例子，如果你選擇了Inter字體以及各種字重，將會獲得以下的@import語句： @import url('https://fonts.googleapis.com/css2?family=Inter:[[email protected]](/cdn-cgi/l/email-protection);200;300;400;500;700;900&display=swap'); 將這段語句加入到CSS檔案中，並且再加上以下內容： @layer base { html { font-family: Inter, system-ui, sans-serif; } } 最終，你的CSS檔案會變成這樣： @tailwind base; @tailwind components; @tailwind utilities; @import url('https://fonts.googleapis.com/css2?family=Inter:[[email protected]](/cdn-cgi/l/email-protection);200;300;400;500;700;900&display=swap'); @layer base { html { font-family: Inter, system-ui, sans-serif; } } 現在你的預設字體就是Inter字體了，你可以使用font-bold或者font-medium來設置不同大小的字體。