我如何使用 Tailwind CSS 設定我的 Frontend Mentor 項目

最近工作中任務有所調整，我無法像往常一樣享受作為開發者的樂趣——也就是說，沒有前端特性需要建造。為了彌補這一點，我重新開始在前端導師平台上進行專案開發，該平台提供精美UI模型，開發者可以將其轉換為真實的專案。大約一年前我開始使用這個平台，並且印象深刻，不僅因為專案品質高，還因為其註重社區建設，尤其註重開發者對輔助功能最佳實踐的教育。這是一個很棒的資源，我強烈推薦給任何希望在真實專案中磨練前端技能的開發者——難度各不相同，從只需要HTML和CSS就能完成的非常簡單的專案開始，所以每個技能等級都能找到適合自己的專案！

該平台的一大優點是，它只提供設計和一些基本的入門程式碼，因此您可以自由選擇任何您喜歡的技術組合來完成專案。就我個人而言，我正在努力減少框架的使用¹，並專注於編寫語義化HTML，並添加一些純JS來實現互動性，所以這就是我未來解決方案的主要組成。

話雖如此，我仍然非常喜歡將Tailwind作為我的側邊專案樣式解決方案。我已經在專業領域使用它大約三年了，我發現它在有用的預設實用程式類別和擴展其基本功能時的愉悅開發體驗之間取得了很好的平衡（我們在下面詳細介紹）。我並不是建議初學者應該立即使用Tailwind進行構建——一定要先學習CSS！但是，作為一個非常了解CSS工作原理的人，Tailwind對我來說是一個提高生產力的工具，因為我理解它的實用程式類別在底層做了什麼。

因此，在我完成前端導師的幾個挑戰後，我已經多次需要將Tailwind添加到提供的專案啟動程式碼中。我認為，對於剛接觸該平台但又希望在其專案中使用Tailwind的其他開發者來說，記錄我在典型啟動專案中安裝和配置Tailwind的工作流程可能會有所幫助。正如依賴項管理中的許多事情一樣，大約有數百萬種不同的方法可以做到這一點。這只是我的首選方法，因此您的實際效果可能會有所不同。

安裝Tailwind

包裝安裝

首先，您需要導航到從前端導師下載的啟動程式碼的根目錄，並執行以下命令來安裝Tailwind及其相依性：

npm install -D tailwindcss postcss autoprefixer

關於依賴項的一些說明：

• Tailwind CSS使用PostCSS來處理您的CSS。 PostCSS是使用JavaScript插件轉換CSS的工具，而Tailwind CSS本身就是一個PostCSS插件²。
• Autoprefixer是一個PostCSS插件，它使用Can I Use中的值來為您的CSS規則添加供應商前綴。它確保您的CSS可以在不同的瀏覽器中運作。

從技術上講，這些不是在專案中安裝Tailwind所必需的，但我通常發現使用它們時運行會更流暢。

初始化TailwindCSS

接下來，我們要使用以下指令產生tailwind.config.js和postcss.config.js檔案：

npx tailwindcss init -p

配置來源路徑

接下來，導覽至tailwind.config.js並向content陣列新增index.html－這將確保清除不必要的樣式。您可以在Tailwind的Content Config文件中閱讀更多關於其實際運作方式的資訊。

請注意，如果您為專案建立了多個將使用Tailwind實用程式類別進行樣式設定的HTML文件，則必須也將其路徑新增至此陣列。

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

在您的CSS中包含Tailwind

在您的專案根目錄中建立CSS檔案（我通常將其命名為styles.css），並將以下內容新增至其中：

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

新增和執行建置腳本

在您的package.json檔案中，新增一個腳本以建立您的CSS。這將建立一個包含已建置樣式的output.css檔案。 --watch標誌允許我們即時觀察CSS更改，這意味著我們不必每次更新樣式時都重新啟動腳本。

請注意，您可以將此命令命名為您喜歡的任何名稱——我只是在這裡遵循約定。

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

現在，您可以透過執行以下腳本編譯您的CSS：

npm run build:css

連結樣式表

最後，您需要在index.html檔案（以及您希望樣式套用的任何其他HTML檔案）的頭部包含一個link標籤：

<code><link href="output.css" rel="stylesheet"></link></code>

您現在應該能夠測試Tailwind是否在此文件中運作。我通常會添加類似的內容>

安裝專案字型

當您從前端導師下載專案的啟動程式碼時，它們包含用於您將建立的設計中的字體的字體檔案。這通常包括可變字體文件和靜態字體文件的組合。出於我們的目的，我們將使用./assets/fonts/static中提供的檔案。

我建議您查看這些文件以及專案根目錄中提供的style-guide.md文件，以了解使用了哪些字體以及需要哪些字體粗細。

新增@font-face規則

確定後，您需要在專案根目錄中建立另一個新的CSS檔案（我通常將其命名為fonts.css），然後為啟動程式碼中提供的每個字體檔案定義@font-face規則：

<code>@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("assets/fonts/static/Inter-Regular.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 600;
  src: url("assets/fonts/static/Inter-SemiBold.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("assets/fonts/static/Inter-Bold.ttf") format("ttf");
}</code>

上面的範例來自我對社交連結設定檔挑戰的解決方案，該解決方案使用三種不同粗細的Inter字體。

定義字體面後，需要像前面使用output.css一樣在HTML文件中連結樣式表：

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

擴充Tailwind配置

現在，我們需要擴展tailwind.config.js中的主題以添加一些實用程式類，以便在需要的地方應用我們的專案字體：

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

請注意，如果您的專案有多個自訂字體，您可以在fontFamily物件中定義任意數量的屬性。您可以將這些屬性命名為您喜歡的任何名稱，但我通常只是將字體的名稱轉換為短橫線連接形式，以與大多數Tailwind實用程式開箱即用的寫法保持一致，例如comic-sans。

現在，您應該能夠將font-inter類別新增至您的HTML中，並看到您的新字體套用至您的標記！您也可以使用我們設定的不同字體粗細，例如font-semibold，以600粗細套用字體。

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

以上是我如何使用 Tailwind CSS 設定我的 Frontend Mentor 項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！