如何在Svelte網站上使用逆風

本指南展示了一種簡化的方法，可以將尾風CSS整合到一個較小的應用程序中，以進行高效且時尚的UI開發。 Tailwind的公用事業優點方法消除了HTML和CSS之間的上下文切換，從而直接簡化了Svelte組件中的造型過程。在GitHub上可以使用一個工作示例（鏈接省略了）。

為什麼選擇Svelte？

Svelte的性能非常出色，在頂級JavaScript框架中排名。它的編譯器在構建過程中將Svelte代碼轉換為高度優化的香草JavaScript，與諸如React（例如React）相比，捆綁包大小和更快的加載時間。缺乏運行時框架庫可顯著提高性能。儘管Svelte的生態系統仍在發展，但其速度和效率使其成為令人信服的選擇。

為什麼選擇尾風CSS？

Tailwind CSS是一種原子CSS框架，可提供獨特的造型方法。與傳統框架不同，Tailwind提供了單獨的公用事業課程，可用於對樣式的顆粒狀控制，促進定制和防止通用設計。關鍵優勢包括：

• 節省時間：成千上萬的預先建造的CSS課程消除了對廣泛的自定義CSS的需求。
• 直觀命名：類名稱清楚地反映了其功能（例如，小文本的text-sm ）。
• 移動優先的響應能力：響應設計是內置的，使用sm ， md和lg等前綴來針對不同的屏幕尺寸。
• 輕量級輸出： Purgecss可以輕鬆刪除未使用的CSS類，從而最大程度地減少捆綁包大小。

但是，一些開發人員可能會認為Tailwind的廣泛班級用法可能被認為是詳細的。它也不太適合需要預先構建的組件或緊迫截止日期的項目。

步驟1：設置一個Svelte項目

使用npx degit sveltejs/template project-name來創建一個新的Svelte項目。導航到項目目錄（ cd project-name ），並使用npm install安裝依賴項。

步驟2：安裝尾風CSS

使用：

 NPM安裝tailwindcss@npm：@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

這會安裝尾風，PostCSS（用於CSS處理）和AutopReFixer（用於供應商前綴）。請注意，PostCSS 7的使用與Svelte兼容。

步驟3：配置尾風

生成尾風配置文件：

 npx tailwindcss init tailwind.config.js

打開tailwind.config.js ，並添加以下兼容性和珀格斯（Purgecss）：

 const Production =！ process.env.rollup_watch;
Module.exports = {
  未來： {
    purgelayersbydefault：是的，
    刪除ePrecatedGaputilities：true，
  }，，
  清除：{
    內容：[[“ ./src/xhy/th..svelte”]，
    啟用：生產，
  }，，
};

這樣可以確保與較新的尾風版本的兼容性，並使生產中的珀格克斯可以刪除未使用的CSS。

步驟4：將尾風與苗條整合

rollup.config.js中的導入sveltePreprocess ：

從“ Svelte-Preprocess”導入SveltePreprecess；

配置sveltePreprocess使用Tailwind和AutoPrefixer：

預處理：sveltepreprocess（{
  sourcemap：！生產，
  Postcss：{
    插件：[require（“ tailwindcss”），require（“ autoprefixer”）]，
  }，，
}），

這可以在Svelte Build Pipeline中設置PostCSS處理。

步驟5：注入尾風樣式

在您的主要Svelte組件（例如App.svelte ）中，添加：

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

這會注入尾風的基本樣式，組件樣式（如果使用）和實用程序類。

步驟6：示例：創建標題

在App.svelte中創建一個簡單的標題，並使用尾風類樣式（省略了簡潔的示例，請參閱原始輸入以獲取詳細的示例）。使用npm run dev運行您的應用程序。

結論

本指南為將尾風CSS集成到您的苗條項目中奠定了基礎。探索Tailwind的廣泛文檔，以進一步定制您的樣式。請記住諮詢視頻教程以獲得更多的視覺學習體驗。

以上是如何在Svelte網站上使用逆風的詳細內容。更多資訊請關注PHP中文網其他相關文章！