如何使用 Tailwind CSS 快速開發時髦的網站

隨著您作為開發人員的進步,您更有可能使用通過編寫更少代碼來幫助您完成更多工作的技術。像 Tailwind CSS 這樣可靠的前端框架是實現這一目標的一種方法。

了解 Kinsta 如何在競爭中脫穎而出。

選擇您的提供商
WP Engine
SiteGround
GoDaddy
Bluehost
Flywheel
HostGator
Cloudways
AWS
Digital Ocean
DreamHost
其他 比較

在本文中,我們將了解 Tailwind CSS——一個有助於構建和設計網頁的 CSS 框架。我們將首先解釋如何在您的項目中安裝和集成 Tailwind CSS,查看一些實際應用程序,以及如何創建自定義樣式和插件。

興奮的?讓我們開始!

什麼是順風 CSS?
tailwind-css-主頁順風 CSS。

Tailwind CSS 是一個實用程序優先的 CSS(級聯樣式表)框架,帶有預定義的類,您可以使用這些類直接在標記中構建和設計網頁。它允許您以預定義類的形式在 HTML 中編寫 CSS。

我們將定義什麼是框架以及「實用程序優先 CSS」的含義,以幫助您更好地理解 Tailwind CSS 的全部含義。

什麼是框架?

作為一個通用的編程術語,框架是一種工具,它提供了從現有工具的特性構建的可重用和現成的組件。創建框架的總體目的是通過減少工作來提高開發速度。

現在我們已經確定了框架的含義,它應該可以幫助您理解 Tailwind CSS 是基於 CSS 功能構建的工具。該框架的所有功能都源自以類形式組成的 CSS 樣式。

什麼是實用程序優先的 CSS 框架?

當我們說實用程序優先 CSS 時,我們指的是我們的標記 (HTML) 中具有預定義功能的類。這意味著您只需編寫一個附加了預定義樣式的類,這些樣式將應用於元素。

在您使用 vanilla CSS(沒有任何框架或庫的 CSS)的情況下,您將首先為您的元素指定一個類名,然後將不同的屬性和值附加到該類,這反過來會將樣式應用於您的元素.

我們將向您展示一個示例。在這裡,我們將創建一個帶有圓角的按鈕和一個顯示「點擊我」的文本。這是按鈕的樣子:

帶有略微圓角和白色文本的矩形黑色按鈕我們的按鈕。

我們將首先使用 vanilla CSS 執行此操作,然後使用 Tailwind CSS 中可用的實用程序類。

使用香草 CSS

<button class=”btn”>點我</button>

我們為按鈕標籤提供了類 btn,它將使用外部樣式表進行樣式設置。那是:

.btn {
背景顏色:#000;
顏色:#fff;
填充:8px;
邊框:無;
邊框半徑:4px;
}

使用順風 CSS

<button class=”bg-black p-2 rounded”>點我</button>

這都是實現與 vanilla CSS 示例相同的效果所必需的。沒有創建您必須編寫樣式的外部樣式表,因為我們使用的每個類名都已經具有預定義的樣式。

使用 Tailwind CSS 的先決條件

在使用 Tailwind CSS 之前,您應該考慮滿足一些先決條件,才能毫無困難地使用框架的功能。這裡有幾個:

  • 熟悉 HTML、其結構及其工作原理
  • 紮實的 CSS 基礎——媒體查詢、flexbox 和網格系統

Tailwind CSS 可以在哪裡使用?

您可以在前端 Web 項目中使用 Tailwind CSS,包括 React.js、Next.js、Laravel、Vite、Gatsby 等 JavaScript 框架。

Tailwind CSS 的優缺點

以下是使用 Tailwind CSS 的一些優勢:

  1. 更快的開發過程
  2. 由於實用程序相似,可幫助您更多地練習 CSS
  3. 所有實用程序和組件都可以輕鬆定製
  4. 生產的整體文件大小通常很小
  5. 如果您已經了解 CSS,則易於學習
  6. 學習的好文檔

使用 Tailwind CSS 的一些缺點包括:

  1. 對於大型項目,您的標記可能看起來雜亂無章,因為所有樣式都在 HTML 文件中。
  2. 如果你對 CSS 不太了解,學習起來並不容易。
  3. 您被迫從頭開始構建所有內容,包括您的輸入元素。安裝 Tailwind CSS 時,它會刪除所有默認 CSS 樣式。
  4. 如果您希望最大限度地減少開發網站前端所花費的時間並且主要關注後端邏輯,那麼 Tailwind CSS 不是最佳選擇。

何時使用 Tailwind CSS

Tailwind CSS 最適合通過編寫更少的代碼來加快開發過程。它帶有一個設計系統,有助於保持各種設計要求(如填充、間距等)的一致性;有了這個,您不必擔心創建您的設計系統。

如果您希望使用易於配置的框架,您也可以使用 Tailwind CSS,因為它不會強迫您始終以相同的方式使用組件(導航欄、按鈕、表單等);您可以選擇組件的外觀。但是,如果您沒有學習和實踐過 CSS,則永遠不應該使用 Tailwind。

Tailwind CSS 與其他 CSS 框架的異同

以下是一些相似之處:

  1. 它們可以幫助您更快地完成工作。
  2. 它們帶有預定義的類。
  3. 它們是建立在 CSS 規則之上的。
  4. 它們都易於學習和使用,具有 CSS 的工作知識。

現在讓我們看看其中的一些區別:

  1. Tailwind 與大多數框架不同,因為您必須創建自己的組件。例如,Bootstrap 具有導航欄、按鈕等組件,但使用 Tailwind,您必須自己構建所有這些。
  2. 像 Bootstrap 這樣的一些框架不容易定製,所以你不得不使用它們的設計模式。在 Tailwind 中,您可以控制一切的流程。
  3. 使用 Tailwind 需要深入的 CSS 知識。編寫類名是不夠的,因為您必須將它們組合起來,就好像您正在編寫 vanilla CSS 一樣才能獲得相同的結果。在大多數其他框架中,您只需要知道使用類名時將構建什麼組件。

如何開始使用 Tailwind CSS

在安裝 Tailwind CSS 並將其集成到您的項目中之前,請確保:

  1. 您已在計算機上安裝了 Node.js,以使用終端中的 Node 包管理器 (npm)。
  2. 您的項目已全部設置為您創建的文件。

這是我們目前的項目結構:

-Tailwind-tutorial
-public
-index.html
-styles.css
-src
-styles.css

接下來,為您的項目啟動一個終端並運行以下命令:

npm install -D tailwindcss

上述命令將安裝 Tailwind CSS 框架作為依賴項。接下來,通過運行以下命令生成 tailwind.config.js 文件:

npm install -D tailwindcss

tailwind.config.js 文件在創建時將為空,因此我們必須添加一些代碼行:

module.exports = {
content: [“./src/**/*.{html,js}”, “./public/*.html”],
主題: {
extend: {},
},
plugins: [] ,
};

內容數組中提供的文件路徑將使 Tailwind 能夠在構建期間清除/刪除任何未使用的樣式。

訂閱時事通訊

想知道我們是如何將流量提高到 1000% 以上的嗎?

加入 20,000 多人的行列,他們會通過 WordPress 內幕技巧獲得我們的每周時事通訊!

現在訂閱

接下來要做的是將「@tailwind」指令添加到 src 文件夾中的 CSS 文件中 – 這是 Tailwind 為您生成所有預定義實用程序樣式的地方:

@尾風基地;
@tailwind 組件;
@tailwind 實用程序;

最後要做的是通過在終端中運行以下命令來啟動構建過程:

npx tailwindcss -i ./src/styles.css -o ./public/styles.css –watch

在上面的代碼中,我們告訴 Tailwind 我們的輸入文件是 src 文件夾中的樣式表,並且我們使用的任何樣式都必須構建到 public 文件夾中的輸出文件中。–watch 允許 Tailwind 監視您的文件以進行自動構建過程的更改;省略它意味著我們每次想要構建代碼並查看所需的輸出時都必須運行該腳本。

#008cc4}想在編寫更少代碼的同時做更多事情嗎?👀 一個可靠的前端框架是實現這一目標的一種方法。從 Tailwind CSS 開始👨‍💻點擊推文

使用 Tailwind CSS

現在我們已經為我們的項目安裝並設置了 Tailwind CSS,讓我們看一些示例來全面了解它的應用程序。

彈性盒示例

要在 Tailwind CSS 中使用 flex,您需要添加一個 flex 類,然後添加 flex 項的方向:

<div class=”flex flex-row”>
<button> 按鈕 1 </button>
<button> 按鈕 2 </button>
<button> 按鈕 3 </button>
</div>
使用 Tailwind CSS 的 flex-row 實用程序類水平對齊的三個按鈕。我們的三個紫色按鈕。

使用 flex-row-reverse 將反轉按鈕出現的順序。

flex-col 將它們堆疊在一起。這是一個例子:

<div class=”flex flex-col”>
<button> 按鈕 1 </button>
<button> 按鈕 2 </button>
<button> 按鈕 3 </button>
</div>
使用 Tailwind CSS 的 flex-col 實用程序類垂直對齊的三個按鈕。我們的三個紫色按鈕。

就像前面的例子一樣, flex-col-reverse 顛倒了順序。

網格示例

在網格系統中指定列和行時,我們採用不同的方法,通過傳入一個數字來確定元素如何佔用可用空間:

因停機時間和 WordPress 問題而苦苦掙扎?Kinsta 是旨在節省您時間的託管解決方案!查看我們的功能

<div class=”grid grid-cols-3″>
<button> 按鈕 1 </button>
<button> 按鈕 2 </button>
<button> 按鈕 3 </button>
<button> 按鈕 4 </button>
< button> Button 5 </button>
<button> Button 6 </button>
</div>
使用 Tailwind CSS 的 grid-cols 實用程序類在列中平均分布六個按鈕。我們的六個紫色按鈕。顏色

Tailwind 帶有許多預定義的顏色。每種顏色都有一組不同的變化,最淺的變化是 50,最暗的變化是 900。

這是一張包含多種顏色的圖片及其 HTML 十六進位代碼來說明這一點

Tailwind CSS 的紅色、橙色和琥珀色變體從 Tailwind 的默認調色板自定義顏色。(圖片來源)

我們將舉例說明如何使用上面的紅色為按鈕元素提供背景顏色:

<button class=”bg-red-50″>點擊我</button>
<button class=”bg-red-100″>點擊我</button>
<button class=”bg-red-200″>點擊我</button>
<button class=”bg-red-300″>點擊我</button>
<button class=”bg-red-400″>點擊我</button>
<button class=”bg-red-500 “>點擊我</button>
<button class=”bg-red-600″>點擊我</button>
<button class=”bg-red-700″>點擊我</button>
<button class=”bg -red-800″>點擊我</button>
<button class=”bg-red-900″>點擊我</button>

此語法對於 Tailwind 中的所有顏色都是相同的,除了黑色和白色,它們的編寫方式相同,但不使用數字:bg-black 和 bg-white。

要添加文本顏色,請使用類 text-{color}:

<p class=”text-yellow-600″>Hello World</p>
填充

Tailwind 已經有一個設計系統,可以幫助您在設計中保持一致的規模。您只需要知道應用每個實用程序的語法。

以下是用於向元素添加填充的實用程序:

  • p 表示整個元素的填充。
  • py 表示 padding padding-top 和 padding-bottom。
  • px 表示 padding-left 和 padding-right。
  • pt 表示 padding-top。
  • pr 表示填充權。
  • pb 表示填充底部。
  • pl 表示向左填充

要將它們應用於您的元素,您必須使用 Tailwind 提供的適當數字——有點類似於上一節中表示顏色變體的數字。這就是我們的意思:

<button class=”p-0″>點擊我</button>
<button class=”pt-1″>點擊我</button>
<button class=”pr-2″>點擊我</button>
<button class=”pb-3″>點擊我</button>
<button class=”pl-4″>點擊我</button>
邊距

用於填充和邊距的預定義實用程序非常相似。您必須將 p 替換為 m:

  • 我的
  • MX
  • 公噸
  • 先生
  • mb
  • 毫升

如何創建 Tailwind CSS 插件

儘管 Tailwind CSS 已經為您構建了大量實用程序和設計系統,但您仍然可能擁有想要添加的特定功能來擴展 Tailwind 的用途。Tailwind CSS 允許我們通過創建插件來做到這一點。

讓我們通過創建一個添加淺綠色的插件和一個將元素在 X 軸上旋轉 150º 的旋轉實用程序來弄髒我們的手。我們將使用一點 JavaScript 在 tailwind.config.js 文件中創建這些實用程序。

const plugin = require(“tailwindcss/plugin”);

module.exports = {
content: [“./src/**/*.{html,js}”, “./public/*.html”],
主題: {
extend: {},
},
plugins: [
plugin (function ({ addUtilities }) {
const myUtilities = {
“.bg-aqua”: { background: “aqua” },
“.rotate-150deg”: {
transform: “rotateX(150deg)”,
},
};
addUtilities( myUtilities);
}),
],

};

現在,讓我們分解一下。我們做的第一件事是導入 Tailwind 的插件函數:

const plugin = require(“tailwindcss/plugin”);

然後我們繼續在 plugins 數組中創建我們的插件:

插件:[
plugin(function ({ addUtilities }) {
const newUtilities = {
“.bg-aqua”: { background: “aqua” },
“.rotate-150deg”: {
transform: “rotateX(150deg)”,
},
};
addUtilities(newUtilities);
}),
],

製作插件後,您可能必須重新運行構建腳本。

現在插件已經準備好了,我們可以測試它們:

<button class=”bg-aqua rotate-150deg”>點我</button>

如果你做的一切都正確,你應該有一個淺綠色的按鈕,文本在 X 軸上旋轉到 150º。

您構建和設計網頁的秘密武器?👀 Tailwind CSS 😌點擊推文摘

在加快您的工作流程時,框架是一個非常寶貴的選擇。它們可以幫助您構建美觀且專業的網頁,同時保持設計的一致性。Tailwind CSS 提供了許多實用的 CSS 類來幫助您將網頁設計和開發提升到一個新的水平。

這篇文章告訴我們什麼是 Tailwind CSS 以及是什麼使它成為一個框架。然後,我們查看了安裝過程並查看了一些示例,這些示例展示了我們如何創建自定義插件來擴展現有功能。

如果您已經跟進了這一點,那麼您現在對 Tailwind 的工作原理有了基本但紮實的了解。但是,為了更好地使用這種實用程序優先的框架,如果您還沒有紮實的基礎,則必須繼續練習並增加對 CSS 的了解。

您過去是否使用過 Tailwind CSS 或其他 CSS 框架?在評論部分分享你的想法!

通過以下方式節省時間、成本並最大限度地提高站點性能:

  • 來自 WordPress 託管專家的即時幫助,24/7。
  • Cloudflare 企業集成。
  • 全球受眾覆蓋全球 29 個數據中心。
  • 通過我們內置的應用程序性能監控進行優化。

所有這些以及更多,在一個沒有長期合同、協助遷移和 30 天退款保證的計劃中。查看我們的計劃或與銷售人員交談以找到適合您的計劃。

相關文章