如何使用TailwindCSS建設(shè)獨(dú)特，美觀的網(wǎng)站

在考慮將一個(gè)CSS框架用于新項(xiàng)目時(shí)，諸如Bootstrap和Foundation之類的選項(xiàng)很容易讓人想到。他們之所以愿意使用它們，是因?yàn)樗鼈兙哂幸子谑褂玫念A(yù)先設(shè)計(jì)的組件，開發(fā)人員可以立即輕松使用它們。這種方法適用于具有共同外觀的相對(duì)簡(jiǎn)單的成都網(wǎng)站建設(shè)。但是，一旦我們開始構(gòu)建具有特定需求的更復(fù)雜，獨(dú)特的站點(diǎn)，就會(huì)出現(xiàn)一些問(wèn)題。

在某些時(shí)候，我們需要自定義某些組件，創(chuàng)建新的組件，并確保最終的代碼庫(kù)是統(tǒng)一的，并且在更改后易于維護(hù)。

使用Bootstrap和Foundation這樣的框架很難滿足上述需求，因?yàn)檫@些框架給了我們很多觀點(diǎn)，在很多情況下是不需要的樣式。因此，我們必須不斷解決特定性問(wèn)題，同時(shí)嘗試覆蓋默認(rèn)樣式。聽起來(lái)不是一件有趣的工作，對(duì)嗎？

即用型解決方案易于實(shí)施，但缺乏靈活性，并局限于特定范圍。另一方面，不使用CSS框架來(lái)樣式化網(wǎng)站的樣式既強(qiáng)大又靈活，但不易于管理和維護(hù)。那么，有什么解決方案？

一如既往，解決方案是遵循黃金中間路線。我們需要在具體和抽象之間找到并應(yīng)用適當(dāng)?shù)钠胶?。低?jí)CSS框架提供了這種平衡。有幾種這樣的框架，在本教程中，我們將探討最受歡迎的Tailwind CSS框架。

什么是Tailwind框架？

Tailwind不僅是CSS框架，還是創(chuàng)建設(shè)計(jì)系統(tǒng)的引擎?！猅ailwind網(wǎng)站

Tailwind是簡(jiǎn)單實(shí)用程序類的集合。它們可以像樂(lè)高積木一樣用來(lái)構(gòu)建任何類型的組件。該集合涵蓋了最重要的CSS屬性，但是可以通過(guò)多種方式輕松地對(duì)其進(jìn)行擴(kuò)展。借助Tailwind，自定義不再是煩惱。該框架具有出色的文檔，詳細(xì)介紹了每個(gè)類實(shí)用程序并顯示了可以自定義的方法。支持所有現(xiàn)代瀏覽器和IE11 +。

為什么使用Tailwind框架？

像Tailwind這樣的簡(jiǎn)單高效的CSS框架有很多好處。讓我們探索其中最重要的：

您可以更好地控制元素的外觀。使用實(shí)用程序類，我們可以更輕松地更改和微調(diào)元素的外觀。

在大型項(xiàng)目中，這很容易管理和維護(hù)，因?yàn)槟痪S護(hù)HTML文件，而不維護(hù)大型CSS代碼庫(kù)。

構(gòu)建獨(dú)特的自定義網(wǎng)站設(shè)計(jì)更加容易，而無(wú)需與不需要的樣式重復(fù)編寫。

它具有高度可定制性和可擴(kuò)展性，為我們提供了無(wú)限的靈活性。

它具有移動(dòng)優(yōu)先的方法，并且易于實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)模式。

可以將常見的重復(fù)模式提取到自定義的可重用組件中-在大多數(shù)情況下，無(wú)需編寫任何行的自定義CSS。

它具有不言自明的類。我們可以通過(guò)僅閱讀類來(lái)想象樣式化元素的外觀。

最后，正如Tailwind的創(chuàng)作者所說(shuō)：

初次看到它是一個(gè)好主意幾乎是不可能的-您必須實(shí)際嘗試一下。

所以，讓我們嘗試一下！

Tailwind入門

為了演示Tailwind的自定義功能，我們需要通過(guò)npm安裝它：

npm install tailwindcss

下一步是創(chuàng)建一個(gè)styles.css文件，在其中使用@tailwind偽指令包含框架樣式：

@tailwind base;@tailwind components;@tailwind utilities;

之后，我們運(yùn)行npx tailwind init命令，創(chuàng)建一個(gè)最小的tailwind.config.js文件，在開發(fā)過(guò)程中將放置自定義選項(xiàng)。生成的文件包含以下內(nèi)容：

module.exports = {theme: {}, variants: {}, plugins: [],}

下一步是構(gòu)建樣式以便使用它們：

npx tailwind build styles.css -o output.css

最后，我們?cè)贖TML中鏈接生成的output.css文件和Font Awesome：

現(xiàn)在，我們準(zhǔn)備開始創(chuàng)建。

建立一頁(yè)網(wǎng)站模板

在本教程的其余部分中，我們將使用Tailwind實(shí)用程序類的強(qiáng)大功能和靈活性來(lái)構(gòu)建一個(gè)一頁(yè)的網(wǎng)站模板。

在這里，您可以看到正在使用的模板。

我不會(huì)解釋每個(gè)實(shí)用程序（這會(huì)很無(wú)聊又煩人），因此我建議您使用Tailwind速查表作為快速參考。它包含所有可用的實(shí)用程序及其效果，以及指向文檔的直接鏈接。

我們將逐節(jié)構(gòu)建模板。它們是頁(yè)眉，服務(wù)，項(xiàng)目，團(tuán)隊(duì)和頁(yè)腳。

我們首先將所有部分包裝在一個(gè)容器中：

標(biāo)頭（徽標(biāo)，導(dǎo)航）

一部分（標(biāo)題）將在左側(cè)包含徽標(biāo)，在右側(cè)包含導(dǎo)航鏈接。外觀如下：

現(xiàn)在，讓我們探究其背后的代碼。

正如您所看到的，正如我上面提到的，這些類是非常不言自明的。我們將僅探討重點(diǎn)。

首先，我們創(chuàng)建一個(gè)flex容器并將其項(xiàng)目水平和垂直居中。我們還添加了一些頂部和底部填充，它們由Tailwind合并在單個(gè)py實(shí)用程序中。您可能會(huì)猜到，左右還有一個(gè)px變體。我們將看到這種速記方式廣泛用于許多其他實(shí)用程序中。作為背景色，我們使用bg-blue-900Tailwind調(diào)色板中最深的藍(lán)色（）。調(diào)色板包含幾種顏色深淺與從100分發(fā)到900例如，每個(gè)顏色blue-100，blue-200，blue-300等。

在Tailwind中，我們通過(guò)指定屬性，然后是顏色和陰影編號(hào)，將顏色應(yīng)用于屬性。例如text-white，bg-gray-800，border-red-500。十分簡(jiǎn)單。

對(duì)于左側(cè)的徽標(biāo)，我們使用一個(gè)div元素，我們將其設(shè)置為不縮小（flex-shrink-0），并通過(guò)應(yīng)用margin-left屬性（ml-10）將其從邊緣移開一點(diǎn)。接下來(lái)，我們使用Font Awesome圖標(biāo)，其類與Tailwind的類好融合。我們使用其中之一使圖標(biāo)變?yōu)槌壬?。?duì)于徽標(biāo)的文字部分，我們使用大而淺的藍(lán)色半粗體文本，并在右側(cè)稍許偏移。

在中間，我們添加了一個(gè)僅在移動(dòng)設(shè)備上可見的圖標(biāo)。在這里，我們使用響應(yīng)斷點(diǎn)前綴（md）之一。像Bootstrap和Foundation一樣，Tailwind遵循移動(dòng)優(yōu)先的方法。這意味著，當(dāng)我們使用不帶前綴（visible）的實(shí)用程序時(shí)，它們會(huì)從最小的設(shè)備一直應(yīng)用到大的設(shè)備。如果我們想為不同的設(shè)備使用不同的樣式，則需要使用斷點(diǎn)前綴。因此，在我們的情況下，該圖標(biāo)在小型設(shè)備上可見，而在中等及以后的設(shè)備上則不可見（）。md:invisible

在右側(cè)，我們放置了導(dǎo)航鏈接。我們以不同的方式設(shè)置Home鏈接的樣式，表明它是活動(dòng)鏈接。我們還從邊緣移動(dòng)了導(dǎo)航并將其設(shè)置為在溢出（overflow-x-hidden）時(shí)隱藏。導(dǎo)航將hidden在移動(dòng)設(shè)備上隱藏（），在中型及更高版本上設(shè)置為flex（）。md:flex

您可以在文檔中閱讀有關(guān)響應(yīng)性的更多信息。

服務(wù)

現(xiàn)在讓我們創(chuàng)建下一部分，服務(wù)。外觀如下：

這是代碼：

我們創(chuàng)建一個(gè)淺藍(lán)色背景的部分。然后，我們添加帶下劃線的標(biāo)題和副標(biāo)題。

接下來(lái)，我們將flex容器用于服務(wù)項(xiàng)目。我們使用，flex-wrap以便項(xiàng)目將調(diào)整大小。我們?yōu)槊繌埧ㄔO(shè)置尺寸，并添加一些空間和陰影。每張卡都有一個(gè)帶有主題圖標(biāo)，標(biāo)題和描述的彩色部分。我們還在右下角放置了一個(gè)帶有圖標(biāo)的按鈕。

在這里，我們使用偽類變體之一（懸停，焦點(diǎn)等）。它們以與響應(yīng)斷點(diǎn)相同的方式使用。我們使用偽類前綴，后跟冒號(hào)和屬性名稱（）。hover:bg-orange-300

您可以在文檔中了解有關(guān)偽類變體的更多信息。

為簡(jiǎn)便起見，我僅顯示一張卡的代碼。其他的類似。您只需要更改顏色，圖標(biāo)和標(biāo)題。請(qǐng)參閱GitHub存儲(chǔ)庫(kù)上的最終HTML文件以獲取參考。

項(xiàng)目

讓我們進(jìn)入下一部分，項(xiàng)目。這是最終外觀：

這是代碼：

首先，您可能會(huì)注意到我在這里使用section類。他們不是來(lái)自尾風(fēng)。我創(chuàng)建了它們，并向您展示了如何進(jìn)行。

因?yàn)樗腥齻€(gè)中間部分將共享一個(gè)相同的基本外觀，從而導(dǎo)致代碼重復(fù)，所以現(xiàn)在是開始考慮組件的時(shí)候了。Tailwind提供的主要功能之一是能夠輕松輕松地提取和創(chuàng)建任何類型的自定義組件。因此，這里我們將提取一個(gè)自定義section組件。

這是如何做。打開styles.css并在components聲明之后添加以下類：

...@tailwind components;.section {@apply w-full p-6;}.section-title {@apply w-48 mx-auto pt-6 border-b-2 border-orange-500 text-center text-2xl text-blue-700;}.section-subtitle {@apply p-2 text-center text-lg text-gray-700;}...

如您所見，要?jiǎng)?chuàng)建組件類，我們使用@apply指令，后跟必要的實(shí)用程序。這是有關(guān)提取組件的更多信息。

現(xiàn)在，要使用新類，我們需要再次重新構(gòu)建樣式：

npx tailwind build styles.css -o output.css

現(xiàn)在，我們不再使用一整套實(shí)用程序，而是對(duì)每個(gè)元素使用一個(gè)單一的類。正如您所看到的，自定義類可以與常規(guī)實(shí)用程序（section bg-blue-200）安全地結(jié)合使用。

讓我們轉(zhuǎn)到導(dǎo)航按鈕。我們將它們放在flex容器中，并將其樣式設(shè)置為美觀的矩形。但是，我們希望通過(guò)應(yīng)用一些偏斜效果使它們更具動(dòng)感和時(shí)尚感。問(wèn)題在于，Tailwind不提供此類實(shí)用程序。因此，是時(shí)候?qū)W習(xí)如何創(chuàng)建我們自己的實(shí)用程序了。超級(jí)容易。

styles.css再次打開并在utilities聲明之后添加所需的類：

...@tailwind utilities;.-skewx-20 {transform: skewX(-20deg);}...

我們想要的是水平傾斜矩形。為此，我們需要一個(gè)負(fù)值。在Tailwind中，通過(guò)在實(shí)用程序名稱之前放置減號(hào)來(lái)創(chuàng)建具有負(fù)值的實(shí)用程序。skewX()

重新構(gòu)建樣式后，我們可以立即看到新實(shí)用程序的效果。

這是有關(guān)添加新實(shí)用程序的更多信息。

現(xiàn)在，我們?yōu)轫?xiàng)目卡創(chuàng)建另一個(gè)flex容器。我們想對(duì)它們的左上角和右下角進(jìn)行圓角處理，但是rounded實(shí)用程序提供的圓度小于我們所需要的。因此，這次我們將學(xué)習(xí)如何自定義默認(rèn)的Tailwind主題。

打開tailwind.config.js并borderRadius在theme.extend密鑰后添加選項(xiàng)：

theme: {extend: {borderRadius: {xl: '1rem','2xl': '2rem','3xl': '3rem'}}},

在這里我們使用extend鍵，因?yàn)槲覀儾幌敫采w其他選項(xiàng)，所以我們想包含其他選項(xiàng)。重建樣式后，我們可以看到新選項(xiàng)如何生效。

要了解有關(guān)主題定制的更多信息，請(qǐng)?jiān)L問(wèn)文檔。

我們還有另一件事要做，而Tailwind默認(rèn)不提供。我們希望卡在懸停時(shí)上升一點(diǎn)。因此，我們需要在懸停時(shí)添加一個(gè)微妙的負(fù)邊距。但是要使其工作，我們需要hover為該margin實(shí)用程序啟用該變體。

為此，我們將以下內(nèi)容放入tailwind.config.js：

variants: {margin: ['responsive', 'hover']},

這里重要的是，我們必須始終提供要啟用的變體的完整列表，而不僅僅是新變體。

在文檔中了解有關(guān)配置變體的更多信息。

現(xiàn)在，讓我們重新構(gòu)建樣式并查看結(jié)果。

團(tuán)隊(duì)

在此階段，您已經(jīng)對(duì)Tailwind的工作方式有了一個(gè)很好的了解，并且非常熟悉構(gòu)建團(tuán)隊(duì)部分。外觀如下：

這是代碼：

報(bào)表廣告

在這里，我們創(chuàng)建了一組配置文件。它們的代碼是高度重復(fù)的，因此我們將其提取到可重復(fù)使用的卡組件中。我們已經(jīng)知道該怎么做。

我們創(chuàng)建卡類并將其放入styles.css文件中：

... .card {@apply w-48 m-4 py-2 bg-white shadow-lg;}.card-image {@apply w-24 h-24 mx-auto rounded-full;}.card-title {@apply mx-2 mt-2 text-center text-lg text-gray-700 font-semibold;}.card-subtitle {@apply text-center text-gray-600;}.card-icons {@apply flex justify-center items-center mt-2;}.card-icon {@apply mx-1 text-blue-500 cursor-pointer;}.card-icon:hover {@apply text-orange-500;}...

現(xiàn)在，讓我們重新構(gòu)建樣式并使用card文件中的類。我們將實(shí)用程序與類交換，結(jié)果得到的代碼版本短得多。

網(wǎng)站頁(yè)腳（關(guān)于，聯(lián)系人）

現(xiàn)在，我們看最后的頁(yè)腳部分。這將包含三列，如下所示：

這是代碼：

在這里，我們創(chuàng)建了一個(gè)三列的響應(yīng)式網(wǎng)格。為此，我們使用Flexbox實(shí)用程序和width實(shí)用程序及其響應(yīng)變體。通過(guò)使用類，我們強(qiáng)制將列堆疊在移動(dòng)設(shè)備上，并在中型和更高級(jí)別上連續(xù)放置。w-fullmd:w-1/3

在一列中，文字將在（和）上方左對(duì)齊。md:text-left

在第二列中，我們放置了一些聯(lián)系信息和社交共享小部件。讓我們看看如何創(chuàng)建它。

我們使用一個(gè)方形的伸縮容器，在其中將四個(gè)較小的正方形均勻放置在每個(gè)角上。我們將所有正方形旋轉(zhuǎn)45度。在每個(gè)小方塊內(nèi)，我們放置一個(gè)社交圖標(biāo)，我們將其旋轉(zhuǎn)-45度以使其與容器對(duì)齊。懸停時(shí)，每個(gè)小方塊都會(huì)移到大方塊之外。

如我們所見，我們需要為旋轉(zhuǎn)操作再創(chuàng)建兩個(gè)實(shí)用程序。因此，我們styles.css再次打開并添加必要的類：

... .rotate-45 {transform: rotate(45deg);}.-rotate-45 {transform: rotate(-45deg);}...

現(xiàn)在，重新構(gòu)建樣式并查看結(jié)果。

在最后一欄中，我們有一個(gè)微妙的聯(lián)系表。

最后考慮

您已經(jīng)確定最終文件的大小會(huì)很大。不用擔(dān)心，可以解決此問(wèn)題。有關(guān)詳細(xì)信息，請(qǐng)參見文檔的控制文件大小部分。

我故意在模板中留出更多代碼重復(fù)的地方。您已經(jīng)知道如何處理此問(wèn)題，將其提取為增強(qiáng)部件將是一個(gè)很好的練習(xí)。

結(jié)論

如您所見，Tailwind為您提供了直接的工作流程，而沒(méi)有限制選項(xiàng)或限制靈活性。Tailwind提供的實(shí)用程序優(yōu)先方法已成功由GitHub，Heroku，Kickstarter，Twitch，Segment等大型成都網(wǎng)站建設(shè)公司成功實(shí)施。

對(duì)我個(gè)人而言，在使用Bootstrap，F(xiàn)oundation，Semantic UI，UIkit和Bulma等框架中的樣式進(jìn)行了數(shù)小時(shí)的“戰(zhàn)斗”和“戰(zhàn)斗”之后，使用Tailwind實(shí)用程序就像在無(wú)云的天空中自由飛行。

網(wǎng)站名稱：如何使用TailwindCSS建設(shè)獨(dú)特，美觀的網(wǎng)站
網(wǎng)站地址：http://muchs.cn/news/186907.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、Google、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)