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

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

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

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

安裝Tailwind

包裝安裝

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

npm install -D tailwindcss postcss autoprefixer

關於依賴項的一些說明：

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

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

初始化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>

新增和執(zhí)行建置腳本

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

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

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

現(xiàn)在，您可以透過執(zhí)行以下腳本編譯您的CSS：

npm run build:css

連結樣式表

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

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

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

安裝專案字型

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

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

新增@font-face規(guī)則

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

<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>

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

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

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

擴充Tailwind配置

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

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

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

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

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

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