Tailwind ReactVue-tailwindtailwind css教學Tailwind vs BootstrapTailwind installTailwind CSS CDNTailwind還在跟複雜的CSS 的設定奮鬥嗎？用Tailwind 來幫你實現真正 ...
文章推薦指數： 80 %
簡單來說Tailwind CSS 是一套Utility-First CSS，相當具有彈性，也非常適合快速 ... Tailwind CSS 把大致上CSS 會用到的屬性都用單個class 來表示。
首頁技術文章還在跟複雜的CSS的設定奮鬥嗎？用Tailwind來幫你實現真正的高效整潔！還在跟複雜的CSS的設定奮鬥嗎？用Tailwind來幫你實現真正的高效整潔！ByMeng-YingTsai・4月252020・技術文章什麼是TailwindCSS？簡單來說TailwindCSS是一套Utility-FirstCSS，相當具有彈性，也非常適合快速刻板。
在Utility-FirstCSS之間也算是殺出了一片天。
不過這個工具的魅力到底在哪呢？且讓我慢慢說明。
Utility-FirstCSS要說到Utility-FirstCSS的好，就要先從一般的CSSframework說起：相信大家都對Material-UI、Bulma、Bootstrap（framework們表示躺著也中槍XD）這類component都定義好好，套上去馬上就有個像樣網站的framework不太陌生。
要navbar有navbar，要button有button，的確是非常方便。
但是使用這些前端framework很快就會遇到一個很頭痛的問題：不想要自己的網站看起來一眼就是套框架，但是想要客製化的話，又會遭遇維護上的麻煩跟困難。
1.最糟糕的情況：overrideCSS可能原本的框架沒有提供什麼比較好的customize的方式，或是自己選擇使用這些工具的方式導致很難customize，只好各種override人家寫好的CSS，網站看起來還好好的就閉著眼睛commit+push。
但這種方式實在很容易把東西改壞。
2.把customizedcode載下來框架本身提供customization，可以把各個地方修修改改再把code載下來。
乍看之下好像很棒，但如果今天你手上的專案交給另一個人接手，他要如何知道哪些地方是原始的設定，哪些地方又被動過手腳了呢？3.import後再overrideSassvariables比較好的情況，可以import框架的Sass，但又override部分Sassvariables，不但可以調整設定，也不容易造成管理、維護的問題。
但只要他已經把UI都定好了，可以調整的範圍往往就受到不少限制。
如果使用Utility-FirstCSS的時候，的因為每個元件都要自己刻，哪裡不滿意、不符合需求，都可以在utilityclass加加減減中完成。
簡單來說就是非常具有彈性吧。
快速架構TailwindCSS把大致上CSS會用到的屬性都用單個class來表示。
例如.mt-1對應的是margin-top:0.25rem;，.my-2對應的是margin-top:0.5rem;margin-bottom:0.5rem;。
.mt-1{
margin-top:0.25rem;
}
mt-1實在是比margin-top:0.25rem;短太多，也不容易打錯字（欸）。
因為可以直接把對應的class直接加在你想要作用的element上，大部分的情況下可以不需要自己動stylesheet的部分，相當方便。
於是你就可以非常迅速地把網站的各種部分建構出來，也可以很輕鬆地調整。
「輕鬆」這件事情聽我嘴上說說似乎也不準，不如自己動手試試XD如果還來不及在local新增專案、安裝Tailwind，可以先在Tailwind.run嘗試看看。
官方文件齊全除了Utility-FirstCSS本身的好處以外，TailwindCSS雖然還不是十分被廣泛使用，但想要上手的話，光是官方文件就十分充足、一目瞭然。
（總覺得教學文不多，但有可能是官方文件就說得很清楚，也不多人想寫教學文XD）從installation、components範例、每個utilitycss的簡介......甚至來有教學screencasts可以看，真的非常用（ㄏㄣˇ）心（ㄏㄨㄟˋ）。
缺點開始用Tailwind以後，你開始發現你的htmlcode充滿了一大串像這樣的東西：
要是有一些出現頻率高的元件（eg.按鈕、input），也可以考慮用@apply適當地切出一些CSScomponents。
如果我好好地切component，其實還是會很好維護的。
如果你還是要跟我argue一大串class看得很煩躁，可能必須說這本來就是工具之間的取捨，以醜醜的code為代價，可以換來快速開發，讓你早點下班休息也未嘗不好☕和inlineCSS的差異至於有些人會問：「蛤？這樣不是跟寫inlineCSS一樣嗎？」我一開始也是這樣想的！但其實Tailwind有一些隱藏的優點，是inlineCSS很難辦到的：1.遵循規範相信新手剛開始學寫網頁的時候，都會有這樣的經驗，常常會隨心所欲地亂加padding、margin，40px還是50px都隨我心情XD
後來開始工作、接案以後，才會深刻體悟到原來這些數字不能像去菜市場買菜一樣亂喊價。
如果沒有對這些數值有一定的規範，各個component搭配起來，最後呈現給使用者的畫面也會出現視覺上的平衡問題。
如果全部寫inlineCSS，是很難去注意有沒有哪裡違背了定義好的規範。
要一一去對數值跟色碼有沒有寫對，太過辛苦也不實際：
在使用TailwindCSS的時候，只要這個utiltyclass的responsivevariant有被打開，就會產生像是底下的CSSclasses：/*原本的utiltyclass*/
.w-1\/4{
width:25%;
}
@media(min-width:992px){
.lg\:w-1\/4{
width:25%;
}
}
@media(min-width:1280px){
.xl\:w-1\/4{
width:25%;
}
}
於是就可以簡單地使用.xl:w-1/4.lg:w-1/4等classes來做responsivedesign。
比方說，我想根據視窗大小改變元素的寬度跟顏色：
SeethePen
Tailwindcssexample:responsiveby文月(@requiemformemories)
onCodePen.
以width來說，預設responsive就是打開的，不需要調整customizedconfig(tailwind.config.js)就有得使用。
//defaultConfig.stub.js:L680
width:['responsive'],預設的variant可以直接參考TailwindGithub上的defaultconfiguration，或者每個utilityclasses的簡介都會有Responsiveandpseudo-classvariants的章節可以參考3.Pseudo-classes要透過inlinecss加上:hover,:active也是辦不到的。
但是Tailwind提供hover、focus、active、disabled、visited、first-child......等variants。
讓你可以很容易地加上對應的utilityclass，就能得到hover、active等效果。
比方說把backgroundColor的variant預設就已經把hover、focus打開了，所以就可以直接使用hover:bg-teal-600、focus:bg-teal-600這樣的classes來製造hover或focus時的效果。
SeethePen
yLYLeMgby文月(@requiemformemories)
onCodePen.
順帶一提，Tailwind還有個group-hover的variant，當某個utility的variant加上group-hover以後，就會產生像下面這種CSSclasses：.group:hover.group-hover\:text-blue-400{
color:#63B3ED;
}
於是你可以很輕鬆地做到grouphover的效果：
SeethePen
Tailwindcssexample:grouphoverby文月(@requiemformemories)
onCodePen.
誰不適合Tailwind？任何工具都不會是絕對完美或是絕對適合所有族群，自己覺得如果有一些特殊的狀況或需求，可能用Tailwind也會很痛苦：1.不擅長從零開始自己刻板的新手我想如果是不擅長刻板的新手，又要在時限內地交出專案，utility-firstcss應該都會用得蠻痛苦的。
但還是鼓勵不擅長刻板的朋友，絕對不要被UIcomponents所迷惑，對於太過方便的東西產生依賴>({
plugins:[
require('tailwindcss'),
require('autoprefixer'),
require('@fullhuman/postcss-purgecss')({
content:[
'./**/*.html',
'./**/*.pug',
'./**/*.jsx',
//etc
],
defaultExtractor:content=>content.match(/[\w-/:]+(?
延伸文章資訊
- 1Tailwind CSS - Rapidly build modern websites without ever ...
A utility-first CSS framework packed with classes like flex , pt-4 , text-center and rotate-90 th...
- 2Tailwind CSS 介紹及應用 - 昕力資訊
今天來跟大家推薦Tailwind CSS，它並不像Bootstrap、Material-UI一樣提供我們許多設計精美的UI元件，而是提供各種好用的class工具讓我們依照我們的 ...
- 3Tailwind CSS 中文文档- 无需离开您的HTML，即可快速建立 ...
Tailwind CSS 是一个功能类优先的CSS 框架，它由Adam Wathan 创建。本站提供Tailwind CSS 官方文档中文翻译致力于为广大国内开发者提供准确的中文文档，助力开发者...
- 4Tailwind CSS 入門與語法 - iT 邦幫忙
小弟我之前一直是使用Bootstrap 做為前端CSS 框架，由於最近聽到很多Tailwind CSS 的花式吹捧，讓我也開始感興趣了，今天就一起來研究一下吧！
- 5還在跟複雜的CSS 的設定奮鬥嗎？用Tailwind 來幫你實現真正 ...
簡單來說Tailwind CSS 是一套Utility-First CSS，相當具有彈性，也非常適合快速 ... Tailwind CSS 把大致上CSS 會用到的屬性都用單個class 來表示。
