front-end development

假設你已經設定好了使用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來設置不同大小的字體。

在你的主題文件夾內運行以下命令： npm init -y 然後安裝 Tailwind CSS 作為開發依賴： npm install -D tailwindcss 使用以下命令初始化 Tailwind： npx tailwindcss init 這將創建 tailwind.config.js 文件。在編輯器中打開該文件，並按以下方式填寫 content 屬性，其中包含主題的佈局文件： module.exports = { content: ['content/**/*.md', 'layouts/**/*.html'], theme: { extend: {}, }, plugins: [], } 現在在主題文件夾中創建 tailwind.css 文件，並添加以下內容： @tailwind base; @tailwind components; @tailwind utilities; 現在打開 package.json，在 scripts 部分添加 build 和 watch 命令： { "name": "valley", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "npx tailwindcss -i ./tailwind.css -o ....