淺談Tailwind CSS - Medium

今天要為各位介紹的是Tailwind CSS，這是最近比較熱門的CSS框架。

Tailwind 跟其他的CSS Framework 不一樣， Tailwind 是Utility Framework, ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWrite淺談TailwindCSS今天要為各位介紹的是TailwindCSS，這是最近比較熱門的CSS框架。

Tailwind跟其他的CSSFramework不一樣，Tailwind是UtilityFramework,而其他的(Bootstrap,Bulma)都是UIFramework.所以Tailwind可以更客製化的，不會受到Framework本身的style影響。

也就是說它並不像其它CSS框架有多種的UI元件，而是提供各種好用的class工具來滿足各種介面情境。

如果各位有接觸過像是Material-UI、Bulma、Bootstrap的framework，這類的component都定義好，套上去馬上就有個像樣網站的framework的確是非常方便。

但是使用這些framework很容易遇到一個問題：不想要自己的網站看起來像是套框架但又想要客製化的話，就會遇到一些麻煩：首先可能原本的框架沒有提供好的客製化方式，或是自己使用這些工具的方式導致很難客製化，只好override人家寫好的CSS。

但這種方式久了容易把程式改壞。

再來是框架本身提供客製化，可以把各個地方調整後再把程式碼載下來。

但如果今天你手上的專案交給另一個人接手，沒有人知道哪些地方是原始的設定，又有哪些地方經過調整？但只要UI都定好了，可以修改的範圍往往就受到限制。

但如果使用Utility-FirstCSS的時候，的因為每個元件都要自己刻，哪裡不滿意、需要調整以符合需求，都可以在utilityclass調整中完成。

非常具有彈性。

架構TailwindCSS把大致上CSS會用到的屬性都用單個class來表示。

像是.my-2對應的是margin-top:0.5rem;margin-bottom:0.5rem;。

.my-2{margin-top:0.5rem;margin-bottom:0.5rem;}因為可以直接把對應的class直接加在你想要作用的element上，大部分的情況下可以不需要自己動stylesheet的部分，相當方便。

這樣一來我們就可以非常迅速地把網站的各種部分建構出來，也可以很輕鬆地調整。

如果還沒決定要不要安裝可以先在Tailwind.run嘗試看看。

官方資源齊全Utility-FirstCSS本身的優點外，想要上手TailwindCSS的話，光是官方文件就十分充足。

從安裝、每個元件的範例到教學screencasts都有資源可以看。

影片內即時coding設計好UI的學習效果也還蠻不錯的。

缺點剛開始用Tailwind以後，你會發現你的htmlcode充滿了一大串像這樣的東西：...剛開始接觸時可能會覺看起來非常不習慣。

但如果前端有使用React等框架並且把畫面上的組成準確的分成不同的component，其實不用太擔心會有一堆重複的utilityclass混在一起。

與inlineCSS的差異這樣的表示方式其實跟inlineCSS有點像，但其實Tailwind有一些隱藏的優點，是inlineCSS很難辦到的：1.遵循規範相信新手剛開始學寫網頁的時候，都會有這樣的經驗，常常會隨心所欲地修改padding、margin，40px還是50px。

後來開始工作以後，才會體悟到原來這些數字不能隨便調整。

如果沒有對這些數值有一定的規範，各個component搭配起來，最後呈現給使用者的畫面也會出現視覺上的平衡問題。

如果全部寫inlineCSS，是很難去注意有沒有哪裡違背了定義好的規範。

要一一去對數值跟色碼有沒有寫對，太過辛苦也不實際：改用TailwindCSS以後，顏色、spacing等等都是用config來做管理，可以比較嚴格地規範可以使用的數值和色碼，避免沒有規範地隨意下padding、加background-color等等。

......2.Responsiveinlinecss基本上做不到ResponsiveWebDesign，因為包含@media的rules是無法放在inlinecss裡的。

在使用TailwindCSS的時候，只要這個utiltyclass的responsivevariant有被打開，就會產生像是底下的CSSclasses：/*Originalutiltyclass*/.w-1\/4{width:25%;}/*生成的CSSclass*/@media(min-width:896px){.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。

3.Pseudo-classes要透過inlinecss加上:hover,:active也是辦不到的。

但是Tailwind提供hover、focus、active、disabled、visited、first-child……等variants。

讓你可以很容易地加上對應的utilityclass，就能得到hover、active等效果。

誰不適合Tailwind？任何工具都不會是絕對完美或是絕對適合所有族群：1.網站需要支援較舊版本的瀏覽器Tailwindontheotherhandisalow-levelutilityframework,wheremostoftheclassesmapdirectlytoindividualCSSproperties.Thismeansthatwhichbrowsersyousupportisreallyuptoyou,nottheframework.根據Tailwind的官方說明，browser支援度這件事情取決於個人。

畢竟知道要支援到IE9的人，就會知道不該用flexbox、:focus-within等等。

2.不擅長從零的新手如果是不擅長刻板的新手，又要在時限內地交出專案，utility-firstcss應該都會用得蠻有壓力的。

3.只需要簡單的UI，不希望花時間刻板如果沒有這個時間、也沒有這個需求需要自己刻版，其實也沒什麼用utility-firstcss增加自己困擾的理由。

總結本文對Tailwind.css的介紹尚未深入到安裝以及實際操作範例。

但因其內容和功能非常豐富，當你看到官網的介紹時相信你會對它感興趣，而且從其Github目前的star數22.7k來看，證明像是TailwindCSS的Utility-FirstCSS應該會越來越受歡迎喔MorefromMatthewChangFollowLovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedMatthewChang31FollowersFollowMorefromMediumRefrezshNextJS&TailwindCSS — ZeroCSSwithClearReactCode — almost*MohammadAaqibinDevGeniusTailwindanimation-HowtocreateCustomTailwindCSSAnimationwithReactCkmobileinJavaScriptinPlainEnglishHowtoCreateaHeadlessUISwitchWithNext.jsJohnThiong'oLogin/SignupformusingFaceIO,Next.jsandTailwindCSS.HelpStatusWritersBlogCareersPrivacyTermsAboutKnowable