都2023年,我才知道 Tailwindcss

2021-10-22 19:28:40 字數 2019 閱讀 9618

(ps: 原諒我第一眼看成了」台灣「的拼音,」taiwan「)。

這不,一大早趁著領導都去開會的功夫搜了一下 tailwindcss,不搜不知道,一搜嚇一跳,好評如潮。

那不得好好研究研究,所以就有了本篇文章。

介紹這個問題前,大家可以思考乙個問題,我們平常大概用多少行**?用什麼樣的方式來實現下面的這個介面尼?

拿我常用的elemtnui 和 boostrap 來說,好像還真的沒有可以直接使用的元件或者css樣式,

所以我們想要實現就只能自己手擼,所以就有了以下內容:

大多都是這種html + css 的方式,那tailwind 又是如何實現尼?

噹噹噹噹~

不知道你們怎麼覺得,反正給我一種熟悉而又陌生的感覺

其實我們一看就知道了這些的類名作用,乙個類代表著乙個css屬性,然後再用數值或者lg,xm,min 這類的字母細分,這就和boostrap 的網格和排版類似。

tailwind 與傳統的ui庫有什麼不同?

不同的只是tailwind 有的屬性更多,更密。當然了響應式也是加分項。

我知道您在想:"這太繁瑣了,真是一團糟!" 您是對的,這有點醜陋。實際上,當您第一次看到它時,幾乎不可能認為這是乙個好主意--您必須實際嘗試一下。

但是,一旦您以這種方式實際構建了一些東西,您就會很快注意到一些真正重要的優點:

您的 css 停止增長。 使用傳統方法,每次新增新功能時 css 檔案都會變大。使用功能類,所有內容都是可重用的,因此您幾乎不需要編寫新的css。

更改會更安全。 css 是全域性性的,您永遠不知道當您進行更改時會破壞掉什麼。您 html 中的類是本地的,因此您可以更改它們而不必擔心其他問題。

當您意識到在 html 中使用預定義的功能類是多麼的富有成效時,以任何其他方式工作都感覺像是折磨。

上面我已經吹過了,那麼tailwind 就沒有什麼缺陷麼?

其實是有的。

類名容易衝突

更偏向於頁面樣式,沒有相應的元件

正所謂有得就有失,tailwind 細化了屬性,增加了很多class 類名,而這些類名多是常用的,容易和其他ui庫或者自己自定義的類名產生衝突。

同時,雖然tailwind 提供了 元件 , 但這也頁面靜態類的,這和elementui ,layui之類的ui庫是沒有辦法比的。所以如果想使用tailwind只能使用 elementui + tailwindcss 這類的方式了。

當然,我這也是雞蛋裡挑骨頭,可能後期公升級版會補充dialog,calendar calendar 之類的功能性元件也說不定。

最後有興趣可以看看 tailwindcss 作者談開發初衷。

為了世界更美好,我們需要這樣的開拓者,skr~

Code Snippets我居然才知道的好東西

code snippets我居然才知道的好東西,希望我不是最後乙個知道的 有些 在開發過程中會出現重複書寫,為提高效率,我們可以用 code snippets 輸入快捷方式 1.設定顯示 我們在xcode右下角就可以看到 2.編寫語句,選中,用滑鼠左鍵拖到圖中所示的區域裡,就建立了乙個新的code ...

42個才知道,希望大家都看看,寫的真的很好

01.慢慢的才知道,太在乎別人了往往會傷害自己 02.慢慢的才知道,對自己好的人會隨著時間的流逝越來越少,03.慢慢的才知道,乙個人要自己對自己好,因為真正關心你的人很少,有了事他們也不一定會在你身邊。所以要自己照顧自己 04.慢慢的才知道,真心對乙個人好不一定有回報,而你忽略的人往往有可能是最重視...

我努力了十年,才讓我的老婆不上班

多年前,有一篇文章 我花了18年才和你坐在一起喝咖啡 講的是外地青年在魔都奮鬥的故事。故事的主人公,用了十年的時間,在城市拼搏,吃苦受罪,終於在城市裡站穩了腳跟,有了和當地人平等對話的權利,即 和你坐在一起喝咖啡 故事的主人公感嘆,我和你的出身地不同,所以我需要花費比你多十年的時間奮鬥。現在,我在上...