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

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

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

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

安裝Tailwind

包安裝

首先，您需要導(dǎo)航到從前端導(dǎo)師下載的啟動代碼的根目錄，并運行以下命令來安裝Tailwind及其依賴項：

npm install -D tailwindcss postcss autoprefixer

關(guān)于依賴項的一些說明：

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

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

初始化TailwindCSS

接下來，我們要使用以下命令生成tailwind.config.js和postcss.config.js文件：

npx tailwindcss init -p

配置源路徑

接下來，導(dǎo)航到tailwind.config.js并向content數(shù)組添加index.html——這將確保清除不必要的樣式。您可以在Tailwind的Content Config文檔中閱讀更多關(guān)于其實際工作方式的信息。

請注意，如果您為項目創(chuàng)建了多個將使用Tailwind實用程序類進(jìn)行樣式設(shè)置的HTML文件，則還必須將其路徑添加到此數(shù)組中。

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

在您的CSS中包含Tailwind

在您的項目根目錄中創(chuàng)建一個CSS文件（我通常將其命名為styles.css），并將以下內(nèi)容添加到其中：

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

添加和運行構(gòu)建腳本

在您的package.json文件中，添加一個腳本以構(gòu)建您的CSS。這將創(chuàng)建一個包含已構(gòu)建樣式的output.css文件。--watch標(biāo)志允許我們實時觀察CSS更改，這意味著我們不必每次更新樣式時都重新啟動腳本。

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

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

現(xiàn)在，您可以通過運行以下腳本編譯您的CSS：

npm run build:css

鏈接樣式表

最后，您需要在index.html文件（以及您希望樣式應(yīng)用于的任何其他HTML文件）的頭部包含一個link標(biāo)簽：

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

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

安裝項目字體

當(dāng)您從前端導(dǎo)師下載項目的啟動代碼時，它們包含用于您將構(gòu)建的設(shè)計中的字體的字體文件。這通常包括可變字體文件和靜態(tài)字體文件的組合。出于我們的目的，我們將使用./assets/fonts/static中提供的文件。

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

添加@font-face規(guī)則

確定后，您需要在項目根目錄中創(chuàng)建另一個新的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)的解決方案，該解決方案使用三種不同粗細(xì)的Inter字體。

定義字體面后，需要像前面使用output.css一樣在HTML文檔中鏈接樣式表：

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

擴展Tailwind配置

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

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

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

現(xiàn)在，您應(yīng)該能夠?qū)ont-inter類添加到您的HTML中，并看到您的新字體應(yīng)用于您的標(biāo)記！您還可以使用我們設(shè)置的不同字體粗細(xì)，例如font-semibold，以600粗細(xì)應(yīng)用字體。

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

以上是我如何使用 Tailwind CSS 設(shè)置我的 Frontend Mentor 項目的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！