從頭開始設置 tailwind css 項目
tailwind css 因其實用性優先的樣式設計方法而成為開發人員的熱門選擇。它提供了一種高度可定制且高效的方法來設計 web 應用程序，而無需編寫自定義 css。在本指南中，我們將引導您從頭開始設置 tailwind css 項目。
目錄
- tailwind css 簡介
- 先決條件
- 建立一個新項目
- 安裝 tailwind css
- 配置 tailwind css
- 創建您的第一個 tailwind css 文件
- 構建和觀看css
- 優化生產
- 結論
tailwind css 簡介
tailwind css 是一個實用程序優先的 css 框架，它提供低級實用程序類來直接在標記中構建自定義設計。與 bootstrap 或 foundation 等傳統 css 框架不同，tailwind 不附帶預先設計的組件。相反，它提供了一組實用程序類，讓您無需離開 html 即可設計組件。
為什么使用 tailwind css？
- 實用優先方法：允許您直接在 html 中應用樣式，減少對自定義 css 的需求。
- 定制：tailwind 是高度可定制的，允許您覆蓋默認設置并創建您獨特的設計系統。
- 響應式設計：tailwind 提供內置響應式設計實用程序，可以輕松創建移動優先設計。
- 一致性：確保整個應用程序的樣式一致。
先決條件
在開始之前，請確保您已安裝以下軟件：
- node.js（v12 或更高版本）
- npm（節點包管理器）
可以從官網下載安裝node.js和npm。
立即學習“前端免費學習筆記（深入）”；
設置新項目
首先，為您的項目創建一個新目錄并導航到其中：
mkdir tailwind-project cd tailwind-project
接下來，初始化一個新的npm項目：
npm init -y
此命令創建一個 package.json 文件，它將跟蹤您的項目依賴項和腳本。
安裝 tailwind css
要安裝 tailwind css，您需要將其作為依賴項添加到您的項目中。運行以下命令：
npm install tailwindcss
安裝 tailwind css 后，您需要創建一個配置文件。該文件將允許您自定義 tailwind css 的默認設置。要生成此文件，請運行：
npx tailwindcss init
此命令會在項目根目錄中創建一個 tailwind.config.js 文件。您可以在該文件中自定義 tailwind 設置。
配置 tailwind css
打開tailwind.config.js 文件。您應該看到這樣的基本配置：
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
內容數組用于指定所有模板文件的路徑。這允許 tailwind 在生產中對未使用的樣式進行 tree-shake。添加 html 和 javascript 文件的路徑：
module.exports = {
content: [
'./src/**/*.{html,js}',
],
theme: {
extend: {},
},
plugins: [],
}
此配置告訴 tailwind 在 src 目錄內的任何 .html 或 .js 文件中查找類。
創建您的第一個 tailwind css 文件
接下來，創建一個新的 css 文件，您將在其中導入 tailwind 的基礎、組件和實用程序樣式。創建一個 src 目錄并在其中創建一個名為 styles.css 的文件：
mkdir src touch src/styles.css
打開 styles.css 文件并添加以下導入：
@tailwind base; @tailwind components; @tailwind utilities;
這些指令告訴 tailwind 在您的 css 文件中包含其基礎、組件和實用程序樣式。
構建和觀察 css
要編譯 css，您需要使用 tailwind cli。將構建腳本添加到您的 package.json 文件中：
"scripts": {
"build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
"watch": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch"
}
構建腳本編譯您的 src/styles.css 文件并將結果輸出到 dist/styles.css。監視腳本執行相同的操作，但繼續監視更改并自動重新編譯。
要首次編譯 css，請運行：
npm run build
此命令會使用編譯后的 styles.css 文件創建一個 dist 目錄。
創建您的第一個 html 文件
現在，在src目錄下創建一個index.html文件：
touch src/index.html
打開index.html文件并添加以下樣板html：
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>tailwind css project</title><link rel="stylesheet"><h1 class="text-4xl font-bold text-center mt-10">hello, tailwind css!</h1>
這個簡單的 html 文件包含編譯后的 tailwind css 文件并添加樣式標題。
要查看您的更改，請在網絡瀏覽器中打開 index.html 文件。
優化生產
當您準備好部署項目時，您將需要優化 css 以進行生產。 tailwind 提供了一個內置工具，用于清除未使用的樣式并縮小 css。
要啟用此功能，請更新 tailwind.config.js 文件以包含清除選項：
module.exports = {
content: [
'./src/**/*.{html,js}',
],
theme: {
extend: {},
},
plugins: [],
}
接下來，安裝@full human/postcss-purgecss 和 cssnano：
npm install @fullhuman/postcss-purgecss cssnano
在項目根目錄創建 postcss.config.js 文件并添加以下配置：
const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');
module.exports = {
plugins: [
purgecss({
content: ['./src/**/*.{html,js}'],
defaultextractor: content => content.match(/[\w-/:]+(?
<p>此配置使用 purgecss 和 cssnano 設置 postcss，以刪除未使用的樣式并縮小 css。</p>
<p>最后，更新 package.json 中的構建腳本：<br></p>
<pre class="brush:php;toolbar:false">"scripts": {
"build": "node_env=production tailwindcss -i ./src/styles.css -o ./dist/styles.css"
}
運行構建腳本來生成優化的 css：
npm run build
您的 dist/styles.css 文件現已針對生產進行了優化。
結論
從頭開始設置 tailwind css 項目非常簡單，并且提供了用于構建自定義設計的強大工具包。通過遵循本指南，您已了解如何安裝 tailwind css、配置它并針對生產進行優化。 tailwind 的實用程序優先方法簡化了樣式設計過程，使您能夠專注于構建應用程序。
快樂編碼！
以上就是從頭開始設置 Tailwind CSS 項目的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！