很多前端开发者不喜欢写css, 因为对一些属性不熟悉调试起来很费劲。还有一些开发者会选择使用一些css库,比如bootstrap, 但是bootstrap是高度定制的,写出来的风格可能并不符合设计稿。有的时候直接用一些组件库比如antd, material ui 在需要更改这些内置样式的时候是很头疼的事,需要去覆盖组件库本来的样式。
今天推荐大家一个全新的css库: Tailwind CSS。它让我们在开发网页的时候写起样式来更轻松。
tailwindcss 官方定义是:可以快速开发自定义风格的一个 utility-first 的 css框架。
用过bootstrap之类的css框架的同学应该知道,bootstrap 有很多定义好的组件样式,比如button、card、dropdown之类的,如果是开发一些后台管理对样式没有过多要求之类的项目,用bootstrap很方便快捷,但是如果是开发一些to C 的有设计稿的项目用这样的css框架就不合适了,因为你需要很繁琐的覆盖已有的样式。
Tailwindcss 不一样,从官方定义可以知道,它提供了很多工具样式类,都是一些很基础的样式,通过组合这些类你可以很灵活的生成你自己想要的样式。
Utility-first
比如我们写一个类似下方这样的组件:
以前可能会这样写:
<
有了tailwindcss 你可以不用自己写css类, 直接组合提供的css工具类即可:
<
这个例子里我们用到了以下css类
- flexbox and padding (flex, flex-shrink-0, and p-6) 来控制布局
- max-width and margin (max-w-sm and mx-auto) 来限制宽度并使其水平居中
- background color, border radius, and box-shadow (bg-white, rounded-lg, and shadow-xl)来控制外观
- width and height (w-12 and h-12) 来控制logo大小
- margin and padding (ml-6 and pt-1) 来定位文字的位置
- font size, text color, and line-height (text-xl, text-gray-900, leading-tight, etc.) 来控制文本的样式
通过组合这些小的样式类,我们可以生成复杂的自定义样式而不用写一行css代码。其实我个人之前在写css样式的时候也会定义一些通用的css类,只是没有tailwindcss这么低级别且丰富。
更多工具类参考:https://tailwindcss.com/
响应式设计
tailwind另外一个很有用的特性是:响应式设计
Tailwind中的每个工具类都提供了不同断点的对应类,可以很方便的进行响应式适配。只需要在需要响应式的时候添加对应的断点前缀即可,比如:
<
默认是16个宽, 中等屏幕(md)32个宽度, 大屏幕(lg)48个宽度
具体width的定义参考:https://tailwindcss.com/docs/width
其他特性
另外tailwindcss 还有很多其他强大的特性,比如:
支持伪类
基于normalize.css 但是又有改进的样式重置 preflight:https://tailwindcss.com/docs/preflight/
适用于vue或者react的组件化:https://tailwindcss.com/docs/extracting-components
如果你觉得内置的样式类不满足你的开发你可以自定义主题https://tailwindcss.com/docs/theme
有了tailwindcss 你不用再苦于写css了,赶紧尝试下吧。
如果有想知道怎么在react项目中引入tailwindcss的可以在下面留言。