bootstrap怎么用_不用自己写css，不用bootstrap，写样式有tailwindcss就足够了

很多前端开发者不喜欢写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的可以在下面留言。