Tailwind CSS 是什么


本章节目录

    Tailwind CSS 是什么

    Tailwind CSS 是一个功能性实用性很的的 CSS 框架,在 HTML 文件中就可以快速构建出漂亮的网页。官网地址:https://tailwindcss.com/

    如果你有丰富的 Web 开发经验,都会有过以下烦恼:

    • 为起 class 名而烦恼,时不时的还会吐槽上任程序员交接留下的<div class="malajiang_bottom_yangshi_yyds_bx">....</div> 代码
    • 一些细小的调节都需要写一个单独的 CSS 样式,最后发现有许多重复的代码,由不是的类名管理着。如果细心点的话,可能你已经有一份自己常用的通用样式库,里边存放着 .mt-sm{} .padding-lg{} .flex-row{} 之类的 CSS 样式,以便用到不同的项目中去。

    用上 Tailwind css 后,你可以忘记还要起 class 名这个事情,自由的在 html 标签里编写样式即可。

    框架本身提供了丰富的公共样式,几乎涵盖了所有的 CSS 属性,而且支持自定义。在构建生产环境的代码时,会自动删除所有未使用的 CSS,文件小至 10kB 以下。

    特性

    统一样式

    使用约定好的样式值,比如:颜色、行间距、字体大小、投影大小。便于网站整体风格的,可以解决新手设计页面时又花又乱的毛病。

    可以构建任何你想要的东西

    强大的样式库,可以让我们编写出任何想要的页面、元素、组件,有产品原型或者 UI 图就可以开工,如果足够熟练,可以直接用 Tailwind CSS 来设计原型甚至最终的 UI 界面。如下图所示效果,没有编写任何 CSS内容。

    响应式,移动优化

    和大多数 UI 框架一样,Tailwind CSS 也是移动优先的设计原则,可以很方便的设计出响应式页面,一个页面适配包含PC、Pad、手机等设备。

    支持暗黑模式

    目前非常流行的暗黑模式,当然麻辣讲还没有启用。

    构建文件极小

    构建生产环境的文件时,Tailwind CSS 可以删除没有使用到的样式,生产文件极小。当然也支持多个 CSS 文件打包成一个文件。

    支持代码复用

    没错,构建复杂的网页和可复用的组件是离不开样式的复用的,如你所料,你也需要为复用样式起名字了。

    IDE 集成

    Tailwind CSS 已经支持 VS Code 集成了。当然强大的 Jetbrains 系的 IDE 更是无需特别设置就可以自动索引支持。

    丰富的开发框架集成

    Tailwind CSS 官方文档已jrwa Next.js、Vue3(Vite)、Laravel、Nuxt.js、React、Gatsby等框架的集成配置说明。

    提供成品组件

    https://tailwindui.com/ 是官方组件库,有免费的,也有收费的。

    高度自由的定制

    所有的样式都支持自定义配置,支持即时模式(v2.1+),快速完成编译。

    其它

    布局、背景图片、元素渐变、CSS 动画等都是标准配备,开肝即可。

    应用场景

    根据 UI 设计图制作页面。
    产品经理直接设计原型。
    全栈工程师直接肝出整站。
    自定义配置,做为团队或项目的 UI 框架

    Tailwind CSS 和 BootStrap 之类的 UI 框架区别

    Tailwind CSS 是通用样式库,你可以自由的设计页面和元素; BootStrap 是成品 UI 库,有许多成品模板和元素可以用。

    Tailwind CSS 比 BootStrap 更接近于原生 CSS,更自由,也可以在 BootStrap 中使用。

    上一篇: 没了

    请先 登录
    审核后显示
    讨论记录(0 条)
    暂时还没有讨论

    © 2024 麻辣讲 豫ICP备19017310号-2