1樓：成大聖人王清遠
tailwindcss 作為乙個工具類css 框架已經非常好用，絕對提高效率.技術人員還是要有擁抱變化，不斷去學習的，而不是帶有偏見【我也有這個問題】。附上下代tailwindcss鏈結https:
2樓：aFlappyPig
大約5天前，接觸到了這個工具庫，於是迫不及待的在業務中使用了，vue2全家桶crm新系統，由於自帶了purge，一上來就把我的normalize.css整沒了，關鍵是開發關鍵是不開啟purge的，所以直到專案做的差不多上了uat才發現。這個時候就悲劇了，完全不知道哪些樣式被purge掉了。
然後就開啟了通宵加班填坑模式。總的來說，生態還不是很好，可以找到的資料不多，中文版資料非常過時，英文版資料講的也非常粗糙。
我用的時候，2023年3月5日，剛好卡在乙個很倒霉的時間節點，tailwind剛發布2不久，版本2需要poatcss8，而vue-cli4的postcss是7，vue-cli5公升級到了8正在測試，尚未發布，看時間線，覺得變化可能會比較大，畢竟不是為vue2準備的。所以只好委曲求全，使用了tailwind為postcss7提供的相容方式。按照官網安裝完成之後，有兩份配置檔案，乙份是tailwind.
config.js，乙份是postcss.config.
js，兩份配置檔案似乎同時生效。在不配置任何東西的情況下，開發環境問題不大，只有webstrom沒有提示，寫起來有些吃力。後google一翻，公升級到最新版webstrom解決了，但是新版提示也非常慢，還是有些難用。
發布uat的時候，問題出現了，樣式丟的非常離譜，於是開始研究配置，終於在官網和google的雙重努力下，用了5個小時，才勉強找回了大部分樣式（主要是elementui），但是normalize.css還是被purge掉了。這裡又研究了很久，感覺應該是postcss和和vue-style,css這幾個loader之間的順序問題，但是這個順序是不太能夠修改的，在不造輪子的情況下，應該是沒法相容。
於是，另闢蹊徑，試了一下purge-webpck-plugin這個外掛程式，好像是這個名字。這個外掛程式也起了作用，但是似乎不能單獨使用，需要和postcss配合使用，最後找回了normalize.css。
但是奇葩的是，部分tailwind自身的樣式丟失了，比如m-2.5，開發模式是可以的，production環境樣式丟失。真的是要被自己坑死了。
每次打production包都會提示，purge沒有配置路徑，所以不生效，也是搞不懂了。究其原因，一定是我太菜了。
3樓：
Tailwind 能讓某些所謂的技術大牛說出Tailwind 適合 CSS 學得不好的人使用說明這玩意實實在在影響到所謂的技術大牛裝逼和賺錢的利益建議前端都盡快學習
4樓：丨翱翔
第一眼看到TailwindCSS的說明和文件時，我就想這不就是基礎樣式定義封裝嗎，我從五六年前就有一套自己封裝的css基礎庫，定義了常用的各種類名，接觸less和sass後又針對尺寸做了遍歷型別，例如w，h，minw，minh，maxw，maxh，wp，hp，vh，vw，fs，lh這些常用的類，還有 fc，bg，dflex，flex1等等，大概幾十種，在開發過程中慢慢的加了很多，後來我又通過變數名定義字首，防止他們被其他框架類汙染，使用時，繫結全域性方法，使用時，通過$csspre('w100 h100')這種方式就可以寫出我定義好的類
我相信做了前端開發的人大多應該都有積累一些自己的樣式庫吧，這種基礎樣式在我們需要給某個元素定義兩三個樣式的時候比較好用，但是當多處元素使用同一套樣式時，還是要單獨寫個類名，然後把類寫在一起，所以我覺得這種基礎類庫，可以幫助減少樣式的編寫，但是意義不是很大，因為大部分時候，為了多處復用，你還是要寫個複雜的類
5樓：崮生
我的評價是 ： tailwindCSS 相當好用，五星好評，繼續用。
造成這種反轉的原因是 react，vue ，angular 這些前端技術出現後前端元件化變得非常容易了。
樣式分離的目的主要是為了復用和方便維護，但在元件化面前根本就不夠打的。
反而像 vue 單檔案元件這樣的形式 html模板，css ，js 放在一起更方便修改
對於元件的樣式而言採用巢狀的 css 選擇器結構:.body > .heder 來設定樣式是不如直接在模板內內聯樣式： 更方便維護的。
然後內聯樣式又不如原子類簡潔，tailwind 又是原子類的大成者，故我用 tailwind
6樓：buhi
到底是什麼樣的人才，才能覺得.w-1.5這種幾年前公認為反模式的寫法現在具有了對直接寫inline-style的優越性？
那是不是可以認為在js裡也應該有
const use0 = ()=>0
這樣的 utility first的函式？
7樓：jannchie見齊
看了一眼官網，感覺非常好用，如果以後我要寫元件庫肯定會用這個當做底層框架。甚至有些不太想依賴於特定平台的元件庫了。它制定了一些標準，讓一般程式設計師也能杜絕一些不合理的設計，並且也能定製出自己的風格。
8樓：
很多人說了它的優點，下面看看一位網友吐槽它的缺點。
9樓：阿遠
type ="button" class ="btn btn-primary" >Primary button >Tailwind： class ="w-1/2 flex items-center justify-center rounded-md border border-gray-300" type ="button" >Add to bag button >看起來 bootstrap 更簡單一些，但如果要更改預設樣式，bootstrap需要新建乙個 className 並編寫樣式去覆蓋原有的樣式，tailwind 則只需要更改某個類名。 當然了，這只是其中乙個非常小的優點，相對於 Bootstrap，tailwind還有更多改進的地方，例如在 class 中可以設定一些 hover 等等狀態的類，還提供樣式組的功能，體驗不錯。 10樓：胖虎 第一感覺和大家一樣, 這不就是 css utils, 和寫 inline style 有啥區別呢? 真是歷史的退步. 我稍微嘗試了下後, 覺得還是挺香的 基本不用改變現有常規的工作流, 因為主要是基於 PostCSS, 面向 VSCode 的開發體驗也非常好, 各種提示都很完備 總得來說我很喜歡, 能解決我開發過程中 3 個比較頭疼的問題: css 命名困難 2. 樣式規範統一 3. 高度可定製 11樓：于謙 可以體驗一下我開源的react原子元件庫reoil 和tailwind異曲同工但是更優秀，css in props應該是未來的趨勢 12樓：jun4rui 挺好的，這種寫法也是前端的乙個思路之一，就是容易寫得比較囉嗦，所以我們有自己有維護類似思路的一套庫，更適合自己產品的開發，相容性更好且更精簡高效。 13樓：甘洪翔 tailwind 就是那些懶得寫語義類名的開發者的避風港！這和 inline style、原子類有什麼區別？這是歷史的倒退！真香！ 14樓： 那些說 html 上面寫一堆 class 的，顯然小看了 tailwindcss tailwind 比原子化更進一步，提供了良好的工具化支援官網例子 Click me Button 由此可見，tailwind 可以作為乙個更底層的框架，其他 UI 框架可以基於 tailwind 實現 可以期望，只要你我都引用了 tailwindcss ，那我們就可以很方便的分享 UI 元件。 15樓：顧軼靈 宣告：我還沒有在任何專案中使用過 Tailwind.css。 Tailwind.css 不僅是乙個 utility class 的集合。它實際上定義了乙個通過以 token list 語法（HTML class）承載的 DSL，用來書寫等價於 CSS/Sass/Less 的樣式宣告。 寫到 class 裡的每個 token 其實幾乎就是乙個 mixin，在現代化工具鏈支援下，這個 mixin 可以帶引數。每個 mixin 顆粒度可大可小，有一部分做到了和具體值解耦從而可以對接 design token，也有另一部分是純粹的原子類（乙個類名等價一條固定的樣式宣告，比如 flex-wrap）。和純原子類的方案的不同之處在於，這種 DSL 已經部分表達了設計上的規約，並且這種規約是可以響應全域性更新的。 在 HTML class 中描述樣式，內容和樣式就有了強耦合。場景、優勢、劣勢也很明確，這部分和 CSS vs inline style 其實是一樣的。解耦有成本，而內聯 DSL 免去了作為膠水層的 selector，降低了極大的起名負擔。 CSS 本身的問題，vjeux 在他那個著名的 React: CSS in JS [1] 的演講裡面其實把問題已經闡述得很清楚了。 16樓： 可以通過 Tailwind CSS 來系統複習 CSS。畢竟官方文件把樣式關注點都分好類了，比自己瞎摸方便多了。 工具鏈可以整合到 IDE，可以連貫的書寫結構和樣式，不需要在模版和選擇器樣式之間反覆切換。 可以整理下元件 snippet (可以自動轉化的 HTML / Vue template / Vue jsx / React jsx)，通過複製貼上來達到復用的目的，類似於官方的 Tailwind UI，打包時 purge 一下，最大程度實現 CSS Tree Shaking。定製主題完全在 PostCSS 層面完成，嘗試下零樣式開發。 17樓：Master Turtle 我在好幾年前TailwindCSS 被創造出來之前就在推特上關注了它的創始人 Steve Schoger, 當時他在推特上會給大家提供UI 設計建議。非常實用。這是鏈結，https: 我個人覺得他是非常難得的將設計和開發結合在一起的人。 不是很推薦看，但國內沒其他書能看了。作者確實有能力，但是寫書不行。喜歡自己造詞，不夠嚴謹。作為國內css領域最有影響力的程式設計師之一，他寫的每一句都會影響成千上萬的前端開發者，但他自己似乎沒意識到。 最近在看CSS權威指南，早先看完了CSS世界。負責任的說，即使CSS權威指南翻譯得慘不忍睹，和CS... 文藝程式設計師 Vue學習成本已經很低了。感覺記不住Vue常用API的程式設計師，可以選擇轉行了。乙個 乙個 而已。然後v if，v for。已經很簡單了。造輪子是好事，當興趣和找找成就感提公升程式設計能力可以。看誰誰不順眼就不對了，畢竟還借鑑了人家的思路。不過本著善意的態度，還是希望作者越來越好。... xiantong 創意很精彩，鏡頭設計水平很高，解密設計不錯，非常值得一玩不喜歡的 1.很多解密要素非常不直觀，而且沒有 教學 只能通過試錯來學習2.後期的解密需要將方塊重複使用，但沒有暫停，所以要拼下手速，如果像 The Gardens Between 那樣能自由控制時間就好了，可以隨時倒退快進暫...如何評價《CSS世界》這本書？
如何評價前端框架Yox？
如何評價遊戲 《Framed》（栽贓 致命框架）？