什么是 tailwindcss

首先它是一個通用的類 css 框架，它內(nèi)置了很多方便使用的 class，比如 text-center,pt-4,rotate-90，通過使用這些內(nèi)置的樣式，你可以非常快速地構(gòu)建出一個網(wǎng)站的雛形。

tailwindcss 從大小，顏色，字體，陰影方面去優(yōu)化你的界面，你可以通過它們的組合搭配構(gòu)建出最滿意的視覺效果。

強(qiáng)大的的包容性

如果你真的使用過 tailwindcss 的話，你會發(fā)現(xiàn)它的包容性非常強(qiáng)，一個固定的 html 結(jié)果，你完全可以使用 tailwindcss 的不同樣式而構(gòu)建出不同的網(wǎng)頁效果，可以說你寫了一套 html 代碼，通過 tailwindcss 你就相當(dāng)于有了好幾個不同的主題。

精簡代碼

可以說隨著項(xiàng)目的發(fā)展，總是會或多或少遺留一些未使用過的 css 樣式，隨著時間的積累，它們會越來越大，導(dǎo)致加載速度變慢，導(dǎo)致維護(hù)起來也變得困難，不過這些在使用 tailwindcss 的時候完全不存在，tailwindcss 會自動刪除未使用的樣式，通過處理器刪除未使用的 css 之后，大部分的 css 都會變得非常小。

響應(yīng)式支持

我們知道通過媒體查詢是可以實(shí)現(xiàn)頁面的響應(yīng)式的，tailwindcss 通過內(nèi)置不同的寬度前綴樣式來實(shí)現(xiàn)響應(yīng)式，tailwindcss 使用移動優(yōu)先策略，也就是說無前綴的樣式所有頁面寬度都適用，而有前綴的樣式只在特殊的寬度設(shè)備上適用。當(dāng)然，對于 tainwindcss 還支持你自定義媒體查詢寬度。

暗黑模式

自從蘋果推出了暗黑模式后，現(xiàn)在不管是手機(jī)應(yīng)用，還是網(wǎng)頁應(yīng)用，還是 pc 應(yīng)用，都會盡量提供暗黑模式，也就是深夜模式。 tailwindcss 是支持暗黑模式的，而且使用非常方便，只需要在樣式類前面加上dark:就可以實(shí)現(xiàn)。

支持自定義

tailwindcss 之所以被越來越多的人喜歡可不僅僅是它的精心設(shè)計(jì)的內(nèi)置樣式，而是它支持自定義的樣式配置，支持你擴(kuò)展原來的樣式表，從調(diào)色板，到間距，到陰影等，你都可以自己去定義，這對于要求高度還原設(shè)計(jì)的網(wǎng)站絕對是必須的。

編輯器的支持

對于前端工程師來說，vscode 已經(jīng)成為了標(biāo)配開發(fā)工具，而 tailwindcss 為此提供了智能提示插件，安裝了該插件之后，在寫 css 的時候你也能體會到自動補(bǔ)全，并且它還會對一些錯誤的類定義進(jìn)行語法提示，可以說非常智能。

網(wǎng)友們的評價

一個人說好不算好，需要大家說好才算好，下面總結(jié)一些網(wǎng)友們對它的評價：

• 直到現(xiàn)在才使用 tailwindcss，我覺得我就是白癡。
• Tailwindcss 讓編寫代碼感覺就像我在使用設(shè)計(jì)工具。
• Tailwindcss 是這個星球上最偉大的 css 框架。
• Tailwindcss 正在彌合設(shè)計(jì)系統(tǒng)和產(chǎn)品之間的差距。它正在成為事實(shí)上的樣式 API。
• 我再也不想寫普通的 css 了。只有 tailwindcss。
• 在我使用它的那一刻我就愛上它了。
• Tailwindcss 同時讓 css 變得有趣，并徹底改變了我構(gòu)建產(chǎn)品的方式。它快速，高效，使用起來非常愉快。