2019年12月04日 21:12:41
在考慮將一個CSS框架用于新項目時，諸如Bootstrap和Foundation之類的選項很容易讓人想到。他們之所以愿意使用它們，是因為它們具有易于使用的預先設計的組件，開發人員可以立即輕松使用它們。這種方法適用于具有共同外觀的相對簡單的濟南網站建設。但是，一旦我們開始構建具有特定需求的更復雜，獨特的站點，就會出現一些問題。
在某些時候，我們需要自定義某些組件，創建新的組件，并確保最終的代碼庫是統一的，并且在更改后易于維護。
使用Bootstrap和Foundation這樣的框架很難滿足上述需求，因為這些框架給了我們很多觀點，在很多情況下是不需要的樣式。因此，我們必須不斷解決特定性問題，同時嘗試覆蓋默認樣式。聽起來不是一件有趣的工作，對嗎？
即用型解決方案易于實施，但缺乏靈活性，并局限于特定范圍。另一方面，不使用CSS框架來樣式化網站的樣式既強大又靈活，但不易于管理和維護。那么，有什么解決方案？
一如既往，解決方案是遵循黃金中間路線。我們需要在具體和抽象之間找到并應用適當的平衡。低級CSS框架提供了這種平衡。有幾種這樣的框架，在本教程中，我們將探討最受歡迎的Tailwind CSS框架。
Tailwind不僅是CSS框架，還是創建設計系統的引擎。— Tailwind網站
Tailwind是簡單實用程序類的集合。它們可以像樂高積木一樣用來構建任何類型的組件。該集合涵蓋了最重要的CSS屬性，但是可以通過多種方式輕松地對其進行擴展。借助Tailwind，自定義不再是煩惱。該框架具有出色的文檔，詳細介紹了每個類實用程序并顯示了可以自定義的方法。支持所有現代瀏覽器和IE11 +。
像Tailwind這樣的簡單高效的CSS框架有很多好處。讓我們探索其中最重要的：
您可以更好地控制元素的外觀。使用實用程序類，我們可以更輕松地更改和微調元素的外觀。
在大型項目中，這很容易管理和維護，因為您只維護HTML文件，而不維護大型CSS代碼庫。
構建獨特的自定義網站設計更加容易，而無需與不需要的樣式重復編寫。
它具有高度可定制性和可擴展性，為我們提供了無限的靈活性。
它具有移動優先的方法，并且易于實現響應式設計模式。
可以將常見的重復模式提取到自定義的可重用組件中-在大多數情況下，無需編寫任何行的自定義CSS。
它具有不言自明的類。我們可以通過僅閱讀類來想象樣式化元素的外觀。
最后，正如Tailwind的創作者所說：
初次看到它是一個好主意幾乎是不可能的-您必須實際嘗試一下。
所以，讓我們嘗試一下！
為了演示Tailwind的自定義功能，我們需要通過npm安裝它：
npm install tailwindcss
下一步是創建一個styles.css文件，在其中使用@tailwind偽指令包含框架樣式：
@tailwind base; @tailwind components; @tailwind utilities;
之后，我們運行npx tailwind init命令，創建一個最小的tailwind.config.js文件，在開發過程中將放置自定義選項。生成的文件包含以下內容：
module.exports = {
theme: {},
variants: {},
plugins: [],
}
下一步是構建樣式以便使用它們：
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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
現在，我們準備開始創建。
在本教程的其余部分中，我們將使用Tailwind實用程序類的強大功能和靈活性來構建一個一頁的網站模板。
我不會解釋每個實用程序（這會很無聊又煩人），因此我建議您使用Tailwind速查表作為快速參考。它包含所有可用的實用程序及其效果，以及指向文檔的直接鏈接。
我們將逐節構建模板。它們是頁眉，服務，項目，團隊和頁腳。
我們首先將所有部分包裝在一個容器中：
<div class="container mx-auto"> <!-- Put the sections here --> </div>
第一部分（標題）將在左側包含徽標，在右側包含導航鏈接。外觀如下：
現在，讓我們探究其背后的代碼。
<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>
正如您所看到的，正如我上面提到的，這些類是非常不言自明的。我們將僅探討重點。
首先，我們創建一個flex容器并將其項目水平和垂直居中。我們還添加了一些頂部和底部填充，它們由Tailwind合并在單個py實用程序中。您可能會猜到，左右還有一個px變體。我們將看到這種速記方式廣泛用于許多其他實用程序中。作為背景色，我們使用bg-blue-900Tailwind調色板中最深的藍色（）。調色板包含幾種顏色深淺與從100分發到900例如，每個顏色blue-100，blue-200，blue-300等。
在Tailwind中，我們通過指定屬性，然后是顏色和陰影編號，將顏色應用于屬性。例如text-white，bg-gray-800，border-red-500。十分簡單。
對于左側的徽標，我們使用一個div元素，我們將其設置為不縮小（flex-shrink-0），并通過應用margin-left屬性（ml-10）將其從邊緣移開一點。接下來，我們使用Font Awesome圖標，其類與Tailwind的類完美融合。我們使用其中之一使圖標變為橙色。對于徽標的文字部分，我們使用大而淺的藍色半粗體文本，并在右側稍許偏移。
在中間，我們添加了一個僅在移動設備上可見的圖標。在這里，我們使用響應斷點前綴（md）之一。像Bootstrap和Foundation一樣，Tailwind遵循移動優先的方法。這意味著，當我們使用不帶前綴（visible）的實用程序時，它們會從最小的設備一直應用到最大的設備。如果我們想為不同的設備使用不同的樣式，則需要使用斷點前綴。因此，在我們的情況下，該圖標在小型設備上可見，而在中等及以后的設備上則不可見（）。md:invisible
在右側，我們放置了導航鏈接。我們以不同的方式設置Home鏈接的樣式，表明它是活動鏈接。我們還從邊緣移動了導航并將其設置為在溢出（overflow-x-hidden）時隱藏。導航將hidden在移動設備上隱藏（），在中型及更高版本上設置為flex（）。md:flex
現在讓我們創建下一部分，服務。外觀如下：
這是代碼：
<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>
我們創建一個淺藍色背景的部分。然后，我們添加帶下劃線的標題和副標題。
接下來，我們將flex容器用于服務項目。我們使用，flex-wrap以便項目將調整大小。我們為每張卡設置尺寸，并添加一些空間和陰影。每張卡都有一個帶有主題圖標，標題和描述的彩色部分。我們還在右下角放置了一個帶有圖標的按鈕。
在這里，我們使用偽類變體之一（懸停，焦點等）。它們以與響應斷點相同的方式使用。我們使用偽類前綴，后跟冒號和屬性名稱（）。hover:bg-orange-300
為簡便起見，我僅顯示第一張卡的代碼。其他的類似。您只需要更改顏色，圖標和標題。請參閱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類。他們不是來自尾風。我創建了它們，并向您展示了如何進行。
因為所有三個中間部分將共享一個相同的基本外觀，從而導致代碼重復，所以現在是開始考慮組件的時候了。Tailwind提供的主要功能之一是能夠輕松輕松地提取和創建任何類型的自定義組件。因此，這里我們將提取一個自定義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;
}
...
如您所見，要創建組件類，我們使用@apply指令，后跟必要的實用程序。這是有關提取組件的更多信息。
現在，要使用新類，我們需要再次重新構建樣式：
npx tailwind build styles.css -o output.css
現在，我們不再使用一整套實用程序，而是對每個元素使用一個單一的類。正如您所看到的，自定義類可以與常規實用程序（section bg-blue-200）安全地結合使用。
讓我們轉到導航按鈕。我們將它們放在flex容器中，并將其樣式設置為美觀的矩形。但是，我們希望通過應用一些偏斜效果使它們更具動感和時尚感。問題在于，Tailwind不提供此類實用程序。因此，是時候學習如何創建我們自己的實用程序了。超級容易。
styles.css再次打開并在utilities聲明之后添加所需的類：
...@tailwind utilities;.-skewx-20 {
transform: skewX(-20deg);
}...
我們想要的是水平傾斜矩形。為此，我們需要一個負值。在Tailwind中，通過在實用程序名稱之前放置減號來創建具有負值的實用程序。skewX()
重新構建樣式后，我們可以立即看到新實用程序的效果。
這是有關添加新實用程序的更多信息。
現在，我們為項目卡創建另一個flex容器。我們想對它們的左上角和右下角進行圓角處理，但是rounded實用程序提供的圓度小于我們所需要的。因此，這次我們將學習如何自定義默認的Tailwind主題。
打開tailwind.config.js并borderRadius在theme.extend密鑰后添加選項：
theme: {
extend: {
borderRadius: {
xl: '1rem',
'2xl': '2rem',
'3xl': '3rem'
}
}
},
在這里我們使用extend鍵，因為我們不想覆蓋其他選項，所以我們想包含其他選項。重建樣式后，我們可以看到新選項如何生效。
我們還有另一件事要做，而Tailwind默認不提供。我們希望卡在懸停時上升一點。因此，我們需要在懸停時添加一個微妙的負邊距。但是要使其工作，我們需要hover為該margin實用程序啟用該變體。
為此，我們將以下內容放入tailwind.config.js：
variants: {
margin: ['responsive', 'hover']
},
這里重要的是，我們必須始終提供要啟用的變體的完整列表，而不僅僅是新變體。
現在，讓我們重新構建樣式并查看結果。
在此階段，您已經對Tailwind的工作方式有了一個很好的了解，并且非常熟悉構建團隊部分。外觀如下：
這是代碼：
報表廣告
<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>
在這里，我們創建了一組配置文件。它們的代碼是高度重復的，因此我們將其提取到可重復使用的卡組件中。我們已經知道該怎么做。
我們創建卡類并將其放入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;
}
...
現在，讓我們重新構建樣式并使用card文件中的類。我們將實用程序與類交換，結果得到的代碼版本短得多。
<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>
現在，我們看最后的頁腳部分。這將包含三列，如下所示：
這是代碼：
<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>
在這里，我們創建了一個三列的響應式網格。為此，我們使用Flexbox實用程序和width實用程序及其響應變體。通過使用類，我們強制將列堆疊在移動設備上，并在中型和更高級別上連續放置。w-full md:w-1/3
在第一列中，文字將在（和）上方左對齊。md:text-left
在第二列中，我們放置了一些聯系信息和社交共享小部件。讓我們看看如何創建它。
我們使用一個方形的伸縮容器，在其中將四個較小的正方形均勻放置在每個角上。我們將所有正方形旋轉45度。在每個小方塊內，我們放置一個社交圖標，我們將其旋轉-45度以使其與容器對齊。懸停時，每個小方塊都會移到大方塊之外。
如我們所見，我們需要為旋轉操作再創建兩個實用程序。因此，我們styles.css再次打開并添加必要的類：
...
.rotate-45 {
transform: rotate(45deg);
}
.-rotate-45 {
transform: rotate(-45deg);
}
...
現在，重新構建樣式并查看結果。
在最后一欄中，我們有一個微妙的聯系表。
您已經確定最終文件的大小會很大。不用擔心，可以解決此問題。有關詳細信息，請參見文檔的控制文件大小部分。
我故意在模板中留出更多代碼重復的地方。您已經知道如何處理此問題，將其提取為增強部件將是一個很好的練習。
如您所見，Tailwind為您提供了直接的工作流程，而沒有限制選項或限制靈活性。Tailwind提供的實用程序優先方法已成功由GitHub，Heroku，Kickstarter，Twitch，Segment等大型濟南網站建設公司成功實施。
對我個人而言，在使用Bootstrap，Foundation，Semantic UI，UIkit和Bulma等框架中的樣式進行了數小時的“戰斗”和“戰斗”之后，使用Tailwind實用程序就像在無云的天空中自由飛行。
相關閱讀：
服務宗旨：客戶至上、服務保證、信用保證、售后保證、價格保證。
在濟南找濟南網站建設公司就選擇我們，我們用服務保證你選擇的沒有錯誤。
公司地址：山東省濟南市東關大街中泰大廈
Copyright?2020-2030 www.62net.cn
濟南網站設計我們值得信賴.