前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第 011 期 用 Tailwind CSS 来快速写样式

第 011 期 用 Tailwind CSS 来快速写样式

作者头像
前端GoGoGo
修改2023-09-25 14:26:00
1.2K0
修改2023-09-25 14:26:00
举报
文章被收录于专栏:九彩拼盘的叨叨叨

Tailwind CSS 是最有名,最强大的 CSS 工具类框架。

工具类 CSS 是把常用的样式封装成类。如:

代码语言:javascript
复制
.p-0 {
  padding: 0;
}

.text-xs {
  font-size: 12px;
}

用工具类 CSS 写样式很快。原因:

  • 专注于 HTML,不需要切换到 CSS 文件中。
  • 节约起类名的时间。

其他优点:

  • CSS 文件总体积比较小。
  • 不存全局样式污染的问题。

Tailwind CSS 介绍

Tailwind CSS 是功能强大的 utility-first 的 CSS 类框架。

包含的工具类多

Tailwind CSS 包含几乎所有的常见工具类。包括:

  • 布局: 盒模型,overflow,浮动,Position 定位,Flex 布局,Grid 布局等。
  • 响应式: 定义了5个断点(sm, md, lg, xl, 2xl)。
  • 尺寸:margin,padding,宽,高。
  • 背景和边框。
  • 字体。
  • 颜色:定义了至少 80 种颜色。
  • 渐变和动画。
  • 伪类:Hover,Focus 等。
  • 暗色模式(Dark Mode)。

其中,响应式,伪类的工具类可以其他工具类组合着用。如

代码语言:javascript
复制
<!-- 响应式 -->
<img class="w-16 md:w-32 lg:w-48" ... />
<!-- focus 伪类 -->
<input class="border focus:outline-none" .../>
<!-- hover 伪类 -->
<button class="bg-red-500 hover:bg-red-700" ...>
    Hover Me
</button>

支持自定义配置

Tailwind CSS 支持某些改样式的默认值。如颜色,尺寸的样式值。具体见:这里

删除没用到的样式代码

Tailwind CSS 包含那么多的工具类,项目中用到的可能只是一部分。Tailwind CSS 自带的 Purge 功能,可以删除没用到的样式代码。

减少记忆负担

使用 Tailwind CSS 有较大的记忆负担。要记很多类名。

减少记忆负担可以通过速查表 和 编辑器的智能提示

Tailwind CSS 很强大吧,赶紧用起来吧~

觉得本文对你有帮助。点个赞,分享给小伙伴们吧~

参考文档

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Tailwind CSS 介绍
    • 包含的工具类多
      • 支持自定义配置
        • 删除没用到的样式代码
          • 减少记忆负担
          • 参考文档
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档