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

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

話雖如此，我仍然非常喜歡將Tailwind作為我的側(cè)邊專(zhuān)案樣式解決方案。我已經(jīng)在專(zhuān)業(yè)領(lǐng)域使用它大約三年了，我發(fā)現(xiàn)它在有用的預(yù)設(shè)實(shí)用程式類(lèi)別和擴(kuò)展其基本功能時(shí)的愉悅開(kāi)發(fā)體驗(yàn)之間取得了很好的平衡（我們?cè)谙旅嬖敿?xì)介紹）。我並不是建議初學(xué)者應(yīng)該立即使用Tailwind進(jìn)行構(gòu)建——一定要先學(xué)習(xí)CSS！但是，作為一個(gè)非常了解CSS工作原理的人，Tailwind對(duì)我來(lái)說(shuō)是一個(gè)提高生產(chǎn)力的工具，因?yàn)槲依斫馑膶?shí)用程式類(lèi)別在底層做了什麼。

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

安裝Tailwind

包裝安裝

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

npm install -D tailwindcss postcss autoprefixer

關(guān)於依賴(lài)項(xiàng)的一些說(shuō)明：

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

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

初始化TailwindCSS

接下來(lái)，我們要使用以下指令產(chǎn)生tailwind.config.js和postcss.config.js檔案：

npx tailwindcss init -p

配置來(lái)源路徑

接下來(lái)，導(dǎo)覽至tailwind.config.js並向content陣列新增index.html－這將確保清除不必要的樣式。您可以在Tailwind的Content Config文件中閱讀更多關(guān)於其實(shí)際運(yùn)作方式的資訊。

請(qǐng)注意，如果您為專(zhuān)案建立了多個(gè)將使用Tailwind實(shí)用程式類(lèi)別進(jìn)行樣式設(shè)定的HTML文件，則必須也將其路徑新增至此陣列。

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

在您的CSS中包含Tailwind

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

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

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

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

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

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

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

npm run build:css

連結(jié)樣式表

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

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

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

安裝專(zhuān)案字型

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

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

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

確定後，您需要在專(zhuān)案根目錄中建立另一個(gè)新的CSS檔案（我通常將其命名為fonts.css），然後為啟動(dòng)程式碼中提供的每個(gè)字體檔案定義@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>

上面的範(fàn)例來(lái)自我對(duì)社交連結(jié)設(shè)定檔挑戰(zhàn)的解決方案，該解決方案使用三種不同粗細(xì)的Inter字體。

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

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

擴(kuò)充Tailwind配置

現(xiàn)在，我們需要擴(kuò)展tailwind.config.js中的主題以添加一些實(shí)用程式類(lèi)，以便在需要的地方應(yīng)用我們的專(zhuān)案字體：

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

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

現(xiàn)在，您應(yīng)該能夠?qū)ont-inter類(lèi)別新增至您的HTML中，並看到您的新字體套用至您的標(biāo)記！您也可以使用我們?cè)O(shè)定的不同字體粗細(xì)，例如font-semibold，以600粗細(xì)套用字體。

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

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