Tailwind CSS 是一个 CSS 框架

前端精髓

共 1365字,需浏览 3分钟

 ·

2022-07-06 16:10


Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类,它们能直接在 HTML 标记语言中组合起来,构建出任何交互设计。


开始使用

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 scale        on 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>


效果


传统的 “语义化类名” 是 CSS 难以维护的原因。通常在您的样式表中堆满任意的CSS属性值。


tailwindcss 之所以被越来越多的人喜欢可不仅仅是它的精心设计的内置样式,而是它支持自定义的样式配置,支持你扩展原来的样式表,从调色板,到间距,到阴影等,你都可以自己去定义,这对于要求高度还原设计的网站。


可以说随着项目的发展,总是会或多或少遗留一些未使用过的 css 样式,随着时间的积累,它们会越来越大,导致加载速度变慢,导致维护起来也变得困难,不过这些在使用 tailwindcss 的时候完全不存在,tailwindcss 会自动删除未使用的样式,通过处理器删除未使用的 css 之后,大部分的 css 都会变得非常小。


TailwindCSS取代了语义式的css,使用了一种更高效的方式,会使得app更快成型。


官方文档:https://www.tailwindcss.cn/


浏览 38
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报