tailwind template

尾風CSS入門模板文檔

入門

節點模塊

首先，請確保在該項目的根目錄中運行pnpm install 。這將安裝所有必需的依賴項並生成您的node_modules文件夾。此步驟非常重要。

項目樣式

尾風CSS

該項目使用Tailwind CSS，這是一個公用事業第一的CSS框架。所需的依賴項應已包含在此項目中。如果您缺少node_modules文件夾，只需運行pnpm install即可，它應該在package.json文件中指定的依賴項生成。

尾風智能

要啟用tailwind CSS IntelliSense，您將需要VS代碼擴展名。我建議安裝Tailwind CSS擴展包，其中包含一些擴展程序，這些擴展包一起使用，以使使用Tailwind CSS成為更好的體驗。要了解有關它的更多信息，請單擊上面的鏈接。

文件

在項目的根文件夾中，有一個資產/樣式文件夾。這包含tailwind.css文件。該文件最終用於生成完全編譯的尾風CSS樣式。一旦編譯，它將將類輸出到styles.css文件，也位於資產/樣式文件夾中。

開發工作

要在開發環境中工作，請運行dev NPM腳本。為此，請使用下面概述的任何一種方法。

• 在項目的根文件夾中運行pnpm run dev 。
• 在VS代碼中，在文件資源管理器選項卡的左下角中使用NPM腳本快捷方式。

這將啟動一個長期運行的手錶過程，該過程將生成按需的樣式，而不是提前生成所有內容。這對於使開發更快，更高效非常有用。在終端中，您應該看到初始編譯消息及其花費的時間。每當您保存html文件， tailwind.css文件或tailwind.config.js文件時，CSS都會進行處理和重新編譯。這些樣式將不會在開發過程中縮小。

請注意，按需添加課程，但未按需刪除。這是當前的設計，如Tailwind CSS的創建者Adam Wathan所述。要圍繞此操作（Cache Bust It），只需保存tailwind.css文件即可。它將迫使完整的重新編譯並刪除所有未使用的類。

要殺死手錶過程，請將您的焦點放在該過程正在運行的終端中，然後按CTRL + C 。您應該提示您確認您對流程的終止。通過輸入Y然後進行ENTER密鑰來確認您的選擇。

實時服務器

我們將使用VS代碼擴展名來啟動我們的服務器。在“ VS代碼擴展”選項卡中搜索“ Live Server”。另外，您可以在Visual Studio Marketplace上找到它。

下載並安裝擴展程序後，您可能會在藍色絲帶的窗口右下角看到一個新按鈕。它說上線。單擊它時，它應該啟動服務器並在瀏覽器上打開。

如果您看不到該按鈕，只需右鍵單擊VS代碼文件Explorer中的index.html文件，然後使用Live Server單擊“打開” 。

建造生產

為生產建造類似於建造開發。執行以下任一項以構建生產的CSS。

• 在項目的根文件夾中運行pnpm run prod 。
• 在vs代碼中，位於文件資源管理器選項卡左下方的NPM腳本快捷方式中執行prod 。

與我們以前使用的開發腳本相反，這不會啟動長期運行的手錶過程。相反，此腳本一次和一次彙編一次CSS。它將僅在Root文件夾中的HTML文件中找到的類，然後將其編譯到STYLES.CSS文件中。CSS文件位於資產/樣式/樣式中。這些樣式將被縮小。

部署項目

該項目使用Gulp來建立部署項目。通過運行Gulp，它將在您的項目根部創建一個DIST文件夾。然後，Gulp將從項目的源來複製所有必要的文件，並將資產複製到DIST文件夾中。

除此之外，Gulp還將根據需要優化和縮小文件。 HTML，SVG和JavaScript文件都將被縮小。縮小文件僅意味著刪除空格和其他不必要的字符/符號。我們這樣做是為了減少文件的大小。

樣式（CSS）也將被複製到區域。由於CSS已經通過Tailwind CLI使用PostCSS和JIT發動機進行了縮小，因此我們不需要在此處進行更大。在運行gulp之前先運行pnpm run prod很重要。通過不這樣做，Gulp將使用您的CSS的非限製版本。

圖像也將在圖像優化器（圖像優化器）上進行複制並優化。這只會優化PNG，JPG和GIF圖像。幾乎所有其他圖像類型都將被複製，但未進行優化，包括PDF文件。

使用Gulp

那麼，您如何使用Gulp？這很容易！這是三個選項。 1）打開VS代碼終端並運行命令gulp 。這將執行根目錄中的Gulpfile.js文件中找到的默認任務。然後，默認任務按順序執行所有其他任務以構建項目。 2）或者，我創建了一個名為gulp的NPM腳本。您可以在“ NPM腳本”選項卡中的VS代碼窗口的左下角運行此操作。 3）如果您看不到“ NPM腳本”選項卡，則也可以通過運行pnpm run gulp在終端中運行此命令，但是那時，僅鍵入gulp很容易。

如果我需要其他輸出文件夾名稱怎麼辦？

如果您需要將輸出文件夾的名稱從Dist更改為其他內容，只需導航到Gulpfile.js文件，然後找到位於文件頂部附近的變量destination 。默認情況下，它設置為dist ，但是您可以通過將字符串的dist替換為您想要的任何東西來更改此操作。另一個常見的目標文件夾名稱是docs ，該名稱用於將項目部署到github頁面。