建站
咨詢
售后
建站咨詢
新聞中心
隨著您作為開發(fā)人員的進步，您更有可能使用通過編寫更少代碼來幫助您完成更多工作的技術。像Tailwind CSS這樣可靠的前端框架是實現(xiàn)這一目標的一種方法。
成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站建設、網(wǎng)站設計、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務靖西,10余年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792
在本文中，我們將了解Tailwind CSS——一個有助于構建和設計網(wǎng)頁的CSS框架。我們將首先解釋如何在您的項目中安裝和集成Tailwind CSS，查看一些實際應用程序，以及如何創(chuàng)建自定義樣式和插件。
什么是Tailwind CSS？
Tailwind CSS
Tailwind CSS是一個實用程序優(yōu)先的CSS（級聯(lián)樣式表）框架，帶有預定義的類，您可以使用這些類直接在標記中構建和設計網(wǎng)頁。它允許您以預定義類的形式在HTML中編寫CSS。
我們將定義什么是框架以及“實用程序優(yōu)先CSS”的含義，以幫助您更好地理解Tailwind CSS的全部含義。
什么是框架？
作為一個通用的編程術語，框架是一種工具，它提供了從現(xiàn)有工具的特性構建的可重用和現(xiàn)成的組件。創(chuàng)建框架的總體目的是通過減少工作來提高開發(fā)速度。
現(xiàn)在我們已經(jīng)確定了框架的含義，它應該可以幫助您理解Tailwind CSS是基于CSS功能構建的工具。該框架的所有功能都源自以類形式組成的CSS樣式。
什么是實用程序優(yōu)先的CSS框架？
當我們說實用程序優(yōu)先CSS時，我們指的是我們的標記 (HTML)中具有預定義功能的類。這意味著您只需編寫一個附加了預定義樣式的類，這些樣式將應用于元素。
在您使用vanilla CSS（沒有任何框架或庫的CSS）的情況下，您將首先為您的元素指定一個類名，然后將不同的屬性和值附加到該類，這反過來會將樣式應用于您的元素.
我們將向您展示一個示例。在這里，我們將創(chuàng)建一個帶有圓角的按鈕和一個顯示“Click me”的文本。這是按鈕的樣子：
點擊按鈕
我們將首先使用vanilla CSS執(zhí)行此操作，然后使用Tailwind CSS中可用的實用程序類。
With Vanilla CSS
我們已經(jīng)給按鈕標簽class btn，它將使用外部樣式表進行樣式設置。那是：
.btn {
background-color: #000;
color: #fff;
padding: 8px;
border: none;
border-radius: 4px;
}
With Tailwind CSS
這都是實現(xiàn)與vanilla CSS示例相同的效果所必需的。沒有創(chuàng)建您必須編寫樣式的外部樣式表，因為我們使用的每個類名都已經(jīng)具有預定義的樣式。
使用Tailwind CSS的先決條件
在使用Tailwind CSS之前，您應該考慮滿足一些先決條件，才能毫無困難地使用框架的功能。這里有幾個：
- 良好的HTML知識、結(jié)構和工作原理
- 扎實的CSS基礎——媒體查詢、flexbox和網(wǎng)格系統(tǒng)
Tailwind CSS可以在哪里使用？
您可以在前端Web項目中使用Tailwind CSS，包括React.js、Next.js、Laravel、Vite、Gatsby等JavaScript框架。
Tailwind CSS的優(yōu)缺點
以下是使用Tailwind CSS的一些優(yōu)勢：
使用Tailwind CSS的一些缺點包括：
何時使用Tailwind CSS
Tailwind CSS最適合通過編寫更少的代碼來加快開發(fā)過程。它帶有一個設計系統(tǒng)，有助于保持各種設計要求（如填充、間距等）的一致性；有了這個，您不必擔心創(chuàng)建您的設計系統(tǒng)。
如果您希望使用易于配置的框架，您也可以使用Tailwind CSS，因為它不會強制您始終以相同的方式使用組件（導航欄、按鈕、表單等）；您可以選擇組件的外觀。但是，如果您沒有學習和實踐過CSS，則永遠不應該使用Tailwind。
Tailwind CSS與其他CSS框架的異同
以下是一些相似之處：
現(xiàn)在讓我們看看其中的一些區(qū)別：
如何開始使用Tailwind CSS
在安裝Tailwind CSS并將其集成到您的項目中之前，請確保：
這是我們目前的項目結(jié)構：
-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文件在創(chuàng)建時將為空，因此我們必須添加一些代碼行：
module.exports = {
content: ["./src/**/*.{html,js}", "./public/*.html"],
theme: {
extend: {},
},
plugins: [],
};
內(nèi)容數(shù)組中提供的文件路徑將使Tailwind能夠在構建期間清除/刪除任何未使用的樣式。
接下來要做的是將“@tailwind”指令添加到src文件夾中的CSS文件中 – 這是Tailwind為您生成所有預定義實用程序樣式的地方：
@tailwind base; @tailwind components; @tailwind utilities;
最后要做的是通過在終端中運行以下命令來啟動構建過程：
npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch
在上面的代碼中，我們告訴Tailwind我們的輸入文件是src文件夾中的樣式表，并且我們使用的任何樣式都必須構建到public文件夾中的輸出文件中。--watch允許Tailwind監(jiān)視您的文件以進行自動構建過程的更改；省略它意味著我們每次想要構建代碼并查看所需的輸出時都必須運行該腳本。
使用Tailwind CSS
現(xiàn)在我們已經(jīng)為我們的項目安裝并設置了Tailwind CSS，讓我們看一些示例來全面了解它的應用程序。
Flexbox示例
要在Tailwind CSS中使用flex，您需要添加一個flex類，然后添加flex項的方向：
三個紫色按鈕
使用flex-row-reverse將反轉(zhuǎn)按鈕出現(xiàn)的順序。
flex-col將它們堆疊在一起。這是一個例子：
三個紫色按鈕
就像前面的例子一樣，flex-col-reverse顛倒順序。
Grid示例
在網(wǎng)格系統(tǒng)中指定列和行時，我們采用不同的方法，通過傳入一個數(shù)字來確定元素如何占用可用空間：
六個紫色按鈕
顏色
Tailwind帶有許多預定義的顏色。每種顏色都有一組不同的變化，最淺的變化是50，最暗的變化是900。
這是一張包含多種顏色的圖片及其HTML十六進制代碼來說明這一點
從Tailwind的默認調(diào)色板自定義顏色。（圖片來源）
我們將舉例說明如何使用上面的紅色為按鈕元素提供背景顏色：
此語法對于Tailwind中的所有顏色都是相同的，除了黑色和白色，它們的書寫方式相同，但不使用數(shù)字：bg-black和bg-white.
要添加文本顏色，請使用類text-{color}：
Hello World
Padding
Tailwind已經(jīng)有一個設計系統(tǒng)，可以幫助您在設計中保持一致的規(guī)模。您只需要知道應用每個實用程序的語法。
以下是用于向元素添加填充的實用程序：
p表示整個元素的填充。py表示 padding padding-top和padding-bottom。px表示 padding-left和padding-right。pt表示填充頂部。pr表示填充權。pb表示填充底部。pl表示向左填充
要將它們應用于您的元素，您必須使用Tailwind提供的適當數(shù)字——有點類似于上一節(jié)中表示顏色變體的數(shù)字。這就是我們的意思：
Margin
用于填充和邊距的預定義實用程序非常相似。您必須將 替換p為m：
mmymxmtmrmbml
如何創(chuàng)建Tailwind CSS插件
盡管Tailwind CSS已經(jīng)為您構建了大量實用程序和設計系統(tǒng)，但您仍然可能擁有想要添加的特定功能來擴展Tailwind的用途。Tailwind CSS允許我們通過創(chuàng)建插件來做到這一點。
讓我們通過創(chuàng)建一個添加淺綠色的插件和一個將元素在 X 軸上旋轉(zhuǎn) 150o 的旋轉(zhuǎn)實用程序來弄臟我們的手。我們將使用一點JavaScript在tailwind.config.js文件中創(chuàng)建這些實用程序。
現(xiàn)在，讓我們分解一下。我們做的第一件事是導入Tailwind的插件函數(shù)：
const plugin = require("tailwindcss/plugin");
然后我們繼續(xù)在plugins數(shù)組中創(chuàng)建我們的插件：
plugins: [
plugin(function ({ addUtilities }) {
const newUtilities = {
".bg-aqua": { background: "aqua" },
".rotate-150deg": {
transform: "rotateX(150deg)",
},
};
addUtilities(newUtilities);
}),
],
制作插件后，您可能必須重新運行構建腳本。
現(xiàn)在插件已經(jīng)準備好了，我們可以測試它們：
如果你做的一切都正確，你應該有一個淺綠色的按鈕，文本在X軸上旋轉(zhuǎn)到150o。
小結(jié)
在加快您的工作流程時，框架是一個非常寶貴的選擇。它們可以幫助您構建美觀且專業(yè)的網(wǎng)頁，同時保持設計的一致性。Tailwind CSS提供了許多實用的CSS類來幫助您將網(wǎng)頁設計和開發(fā)提升到一個新的水平。
這篇文章告訴我們什么是Tailwind CSS以及是什么使它成為一個框架。然后，我們查看了安裝過程并查看了一些示例，這些示例展示了我們?nèi)绾蝿?chuàng)建自定義插件來擴展現(xiàn)有功能。
如果您已經(jīng)跟進了這一點，那么您現(xiàn)在對Tailwind的工作原理有了基本但扎實的了解。但是，為了更好地使用這種實用程序優(yōu)先的框架，如果您還沒有扎實的基礎，則必須繼續(xù)練習并增加對CSS的了解。
文章名稱：如何使用TailwindCSS快速開發(fā)新潮時髦網(wǎng)站
路徑分享：http://www.5511xx.com/article/cdiissi.html
