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

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

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

使用Bootstrap和Foundation這樣的框架很難滿足上述需求，因為這些框架給了我們很多觀點，在很多情況下是不需要的樣式。因此，我們必須不斷解決特定性問題，同時嘗試覆蓋默認樣式。聽起來不是一件有趣的工作，對嗎？

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

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

什么是Tailwind框架？

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

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

為什么使用Tailwind框架？

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

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

在大型項目中，這很容易管理和維護，因為您只維護HTML文件，而不維護大型CSS代碼庫。

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

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

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

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

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

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

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

所以，讓我們嘗試一下！

Tailwind入門

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

npm install tailwindcss

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

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

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

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

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

npx tailwind build styles.css -o output.css

最后，我們在HTML中鏈接生成的output.css文件和Font Awesome：

<link rel="stylesheet" type="text/css" href="output.css"><link rel="stylesheet" >

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

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

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

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

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

我們將逐節(jié)構(gòu)建模板。它們是頁眉，服務(wù)，項目，團隊和頁腳。

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

<div class="container mx-auto"><!-- Put the sections here --></div>標(biāo)頭（徽標(biāo)，導(dǎo)航）

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

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

<div class="flex justify-between items-center py-4 bg-blue-900"><div class="flex-shrink-0 ml-10 cursor-pointer"><i class="fas fa-drafting-compass fa-2x text-orange-500"></i><span class="ml-1 text-3xl text-blue-200 font-semibold">WebCraft</span></div><i class="fas fa-bars fa-2x visible md:invisible mr-10 md:mr-0 text-blue-200 cursor-pointer"></i><ul class="hidden md:flex overflow-x-hidden mr-10 font-semibold"><li class="mr-6 p-1 border-b-2 border-orange-500"><a class="text-blue-200 cursor-default" href="#">Home</a></li><li class="mr-6 p-1"><a class="text-white hover:text-blue-300" href="#">Services</a></li><li class="mr-6 p-1"><a class="text-white hover:text-blue-300" href="#">Projects</a></li><li class="mr-6 p-1"><a class="text-white hover:text-blue-300" href="#">Team</a></li><li class="mr-6 p-1"><a class="text-white hover:text-blue-300" href="#">About</a></li><li class="mr-6 p-1"><a class="text-white hover:text-blue-300" href="#">Contacts</a></li></ul></div>

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

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

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

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

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

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

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

服務(wù)

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

這是代碼：

<div class="w-full p-6 bg-blue-100"><div class="w-48 mx-auto pt-6 border-b-2 border-orange-500 text-center text-2xl text-blue-700">OUR SERVICES</div><div class="p-2 text-center text-lg text-gray-700">We offer the best web development solutions.</div><div class="flex justify-center flex-wrap p-10"><div class="relative w-48 h-64 m-5 bg-white shadow-lg"><div class="flex items-center w-48 h-20 bg-orange-500"><i class="fas fa-bezier-curve fa-3x mx-auto text-white"></i></div><p class="mx-2 py-2 border-b-2 text-center text-gray-700 font-semibold uppercase">UI Design</p><p class="p-2 text-sm text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac est massa.</p><div class="absolute right-0 bottom-0 w-8 h-8 bg-gray-300 hover:bg-orange-300 text-center cursor-pointer"><i class="fas fa-chevron-right mt-2 text-orange-500"></i></div></div>...</div></div>

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

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

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

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

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

項目

讓我們進入下一部分，項目。這是最終外觀：

這是代碼：

<div class="section bg-blue-200"> <div class="section-title">OUR PROJECTS</div> <div class="section-subtitle">Explore our rich and diverse portfolio.</div> <nav class="flex justify-center flex-wrap mt-4 mb-8 text-white"> <div class="h-8 mr-2 px-3 py-1 bg-blue-400 hover:bg-blue-600 text-center cursor-pointer -skewx-20">All</div> <div class="h-8 mr-2 px-3 py-1 bg-blue-800 text-center -skewx-20">UI Design</div> <div class="h-8 mr-2 px-3 py-1 bg-blue-400 hover:bg-blue-600 text-center cursor-pointer -skewx-20">Web Dev</div> <div class="h-8 mr-2 px-3 py-1 bg-blue-400 hover:bg-blue-600 text-center cursor-pointer -skewx-20">Mobile Apps</div> <div class="h-8 mr-2 px-3 py-1 bg-blue-400 hover:bg-blue-600 text-center cursor-pointer -skewx-20">SEO</div> </nav> <div class="flex justify-center flex-wrap"> <div class="w-48 h-48 m-2 hover:-mt-1 border-4 border-orange-600 rounded-tl-2xl rounded-br-2xl cursor-pointer hover:shadow-lg"> <img class="w-full h-full object-cover rounded-tl-2xl rounded-br-2xl" src="design1.jpg" /> </div> ... </div></div>

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

因為所有三個中間部分將共享一個相同的基本外觀，從而導(dǎo)致代碼重復(fù)，所以現(xiàn)在是開始考慮組件的時候了。Tailwind提供的主要功能之一是能夠輕松輕松地提取和創(chuàng)建任何類型的自定義組件。因此，這里我們將提取一個自定義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;}...

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

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

npx tailwind build styles.css -o output.css

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

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

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

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

我們想要的是水平傾斜矩形。為此，我們需要一個負值。在Tailwind中，通過在實用程序名稱之前放置減號來創(chuàng)建具有負值的實用程序。skewX()

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

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

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

打開tailwind.config.js并borderRadius在theme.extend密鑰后添加選項：

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

在這里我們使用extend鍵，因為我們不想覆蓋其他選項，所以我們想包含其他選項。重建樣式后，我們可以看到新選項如何生效。

要了解有關(guān)主題定制的更多信息，請訪問文檔。

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

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

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

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

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

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

團隊

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

這是代碼：

報表廣告

<div class="section bg-blue-100"><div class="section-title">OUR TEAM</div><div class="section-subtitle">Meet our skilled professionals.</div><div class="flex justify-center flex-wrap"><div class="w-48 m-4 py-2 bg-white shadow-lg"><img class="w-24 h-24 mx-auto rounded-full" src="jessica.jpg" /><p class="mx-2 mt-2 text-center text-lg text-gray-700 font-semibold">Jessica Thompson</p><p class="text-center text-gray-600">UI Artisan</p><div class="flex justify-center items-center mt-2"><i class="fab fa-facebook-square fa-2x mx-1 text-blue-500 hover:text-orange-500 cursor-pointer"></i><i class="fab fa-twitter-square fa-2x mx-1 text-blue-500 hover:text-orange-500 cursor-pointer"></i><i class="fab fa-google-plus-square fa-2x mx-1 text-blue-500 hover:text-orange-500 cursor-pointer"></i></div></div>...</div></div>

在這里，我們創(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文件中的類。我們將實用程序與類交換，結(jié)果得到的代碼版本短得多。

<div class="section bg-blue-100"><div class="section-title">OUR TEAM</div><div class="section-subtitle">Meet our skilled professionals.</div><div class="flex justify-center flex-wrap"><div class="card"><img class="card-image" src="jessica.jpg" /><p class="card-title">Jessica Thompson</p><p class="card-subtitle">UI Artisan</p><div class="card-icons"><i class="fab fa-facebook-square fa-2x card-icon"></i><i class="fab fa-twitter-square fa-2x card-icon"></i><i class="fab fa-google-plus-square fa-2x card-icon"></i></div></div>...</div></div>網(wǎng)站頁腳（關(guān)于，聯(lián)系人）

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

這是代碼：

<div class="w-full bg-blue-900"><div class="flex flex-wrap text-center text-white"><!-- ABOUT COLUMN --><div class="w-full md:w-1/3 p-5 border-r border-blue-800 md:text-left"><div class="my-6 ml-3 text-xl font-semibold">ABOUT US</div><p class="p-3 text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac est massa. Donec eget elementum sapien, tincidunt tempor nunc. Cras sodales id ipsum at convallis.</p><p class="p-3 text-gray-400">Morbi tristique massa nec massa auctor, at scelerisque felis consectetur. Morbi tempus et odio sit amet feugiat. Maecenas dignissim a turpis in molestie. Fusce tincidunt vestibulum iaculis.</p></div><!-- CONTACTS COLUMN --><div class="w-full md:w-1/3 p-5 border-r border-blue-800"><div class="my-6 text-xl font-semibold">CONTACT US</div><p class="mt-8 text-gray-400">A108 Adam Street <br>New York, NY 535022 <br>United States <br><strong>Phone:</strong> +1 5589 55488 55 <br><strong>Email:</strong> info@webcraft.com</p><div class="relative w-20 h-20 mx-auto my-12 bg-blue-300 rotate-45"><div class="flex justify-center items-center absolute left-0 top-0 w-10 h-10 hover:-ml-1 hover:-mt-1 bg-blue-800 cursor-pointer"><i class="fab fa-facebook-f fa-lg text-blue-500 -rotate-45"></i></div><div class="flex justify-center items-center absolute top-0 right-0 w-10 h-10 hover:-mt-1 hover:-mr-1 bg-blue-800 cursor-pointer"><i class="fab fa-twitter fa-lg text-blue-500 -rotate-45"></i></div><div class="flex justify-center items-center absolute right-0 bottom-0 w-10 h-10 hover:-mr-1 hover:-mb-1 bg-blue-800 cursor-pointer"><i class="fab fa-google-plus-g fa-lg text-blue-500 -rotate-45"></i></div><div class="flex justify-center items-center absolute bottom-0 left-0 w-10 h-10 hover:-mb-1 hover:-ml-1 bg-blue-800 cursor-pointer"><i class="fab fa-linkedin-in fa-lg text-blue-500 -rotate-45"></i></div></div></div><!-- FORM COLUMN --><div class="w-full md:w-1/3 p-5"><div class="mt-6 text-xl font-semibold">SAY HELLO!</div><form class="w-4/5 mx-auto mt-2 px-6 pt-6 pb-4 rounded"><div class="flex items-center mb-4"><input class="w-full h-10 p-2 border-b border-blue-800 bg-blue-900 text-white" type="text" placeholder="Username"></div><div class="flex items-center mb-4"><input class="w-full h-10 p-2 border-b border-blue-800 bg-blue-900 text-white" type="text" placeholder="Email"></div><div class="mb-6"><textarea class="w-full h-24 px-2 pt-2 border-b-2 border-blue-800 bg-blue-900 text-white" placeholder="Message"></textarea></div><div class="flex justify-between items-center"><button class="w-full py-2 px-4 rounded bg-orange-600 hover:bg-orange-700 text-white font-bold" type="button">SEND</button></div></form></div></div></div>

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

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

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

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

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

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

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

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

最后考慮

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

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

結(jié)論

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

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

文章題目：如何使用TailwindCSS建設(shè)獨特，美觀的網(wǎng)站
文章起源：http://www.bm7419.com/news7/186907.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站制作、網(wǎng)站改版、ChatGPT、App開發(fā)、品牌網(wǎng)站設(shè)計

廣告

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