Tailwind CSS 是一個 CSS 框架
Tailwind CSS 是一個功能類優(yōu)先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的的類，它們能直接在 HTML 標記語言中組合起來，構(gòu)建出任何交互設計。
開始使用
npm install tailwindcss簡單示例
<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0"><img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512"><div class="pt-6 md:p-8 text-center md:text-left space-y-4"><blockquote><p class="text-lg font-semibold">“Tailwind CSS is the only framework that I've seen scaleon large teams. It’s easy to customize, adapts to any design,and the build size is tiny.”</p></blockquote><figcaption class="font-medium"><div class="text-cyan-600">Sarah Dayan</div><div class="text-gray-500">Staff Engineer, Algolia</div></figcaption></div></figure>
效果
傳統(tǒng)的 “語義化類名” 是 CSS 難以維護的原因。通常在您的樣式表中堆滿任意的CSS屬性值。
tailwindcss 之所以被越來越多的人喜歡可不僅僅是它的精心設計的內(nèi)置樣式，而是它支持自定義的樣式配置，支持你擴展原來的樣式表，從調(diào)色板，到間距，到陰影等，你都可以自己去定義，這對于要求高度還原設計的網(wǎng)站。
可以說隨著項目的發(fā)展，總是會或多或少遺留一些未使用過的 css 樣式，隨著時間的積累，它們會越來越大，導致加載速度變慢，導致維護起來也變得困難，不過這些在使用 tailwindcss 的時候完全不存在，tailwindcss 會自動刪除未使用的樣式，通過處理器刪除未使用的 css 之后，大部分的 css 都會變得非常小。
TailwindCSS取代了語義式的css，使用了一種更高效的方式，會使得app更快成型。
官方文檔：https://www.tailwindcss.cn/
評論
圖片
表情