标签归档:tailwindcss

programming language

TailwindCSS 下的响应式设计

前言

我自己在最近的一段时间里,整体是比较喜欢 TailwindCSS 这类样式框架的,它可以非常灵活的定义样式,从而可以十分方便的进行创意类的 UI 设计,实现一些独特的 UI 特性。不过,由于我并非一个专业的前端,也不曾研究过响应式设计。这让我在进行前端开发过程中,吃尽了苦头。

痛定思痛,认真的学习了一下 TailwindCSS 下的响应式设计,为以后的开发做好准备。磨刀不误砍柴工嘛。

正文

设计理念

在进行 TailwindCSS 下的响应式设计时,需要考虑到其整个设计系统的基础 —— Mobile First(移动优先)。

基于移动优先的理念并不新奇,诸如 Bootstrap 之类的框架早已经教会我们移动优先。

Mobile first, responsive design is the goal.

Bootstrap

在这种设计理念上,我们应该做的是先设计移动端的样式,并根据屏幕的不断扩张,变成一个更加丰富的 UI 和界面。

这一点对于做研发的我来说,是一个非常反直觉的事情:在绝大多数场景下,我在开发产品的时候,都是看到的桌面端的样式 & 功能,我下意识的以为,桌面端才是应该首要设计的界面。但无论是 Bootstrap,还是 TailwindCSS,其实都是首要设计移动端的

理念的变化没有跟上,导致我对于 TailwindCSS 的类样式的理解不到位,在设计时会出现错误。

断点(breakpoint)的作用

在进行响应式开发的时候,断点是非常重要的,借助于 CSS 3 提供的 Media Query,我们得以在不同的样式尺寸下应用不同的样式设计。

而在 TailwindCSS 当中,根据最小屏幕宽度(为什么是最小而不是最大?因为默认应用在移动设备上,更大的尺寸使用 Media Query 来控制)默认提供了 5 组不同的断点,分别是 sm(640px)、md(768px)、lg(1024px)、xl(1280px)、2xl(1536px),以及不加任何断点情况下的 default 样式。

对于绝大多数的应用来说,处理好 default(手机)、md(平板)和 lg(PC),就已经足够,对于一些面向更 Geek 的场景(比如开发者),他们使用的设备性能和参数更高,可以再定向配置 xl 和 2xl 的样式。

自定义断点

在实际开发过程中,根据用户的场景的不同,TailwindCSS 的默认断点可能并不能满足你的诉求,这种情况下,你还可以根据自己的需要,修改默认的断点的配置(甚至是将其从移动优先调整为 PC 优先:将 min-width 模式调整为 max-width 即可)。

具体可以参考 TailwindCSS Customize Screen Size

总结

在 Tailiwind CSS 下进行响应式开发时,切记从小到大,而非从大到小,不然会让你调试样式的时候十分痛苦。

延展阅读

printing machine

TailwindCSS 如何控制打印效果?

在我们实际开发的时候,我们可能会希望打印展示的效果和浏览器看到的效果不同。这个时候我们如何实现控制?你可以借助于 tailwind 的自定义 screen 类的方式来实现。

配置 tailwind.config.js

在 tailwind 中添加 theme 配置,设定一个拓展的screen 为print。

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend:{
      screens:{
         'print': {'raw': 'print'},
      }
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

使用 print:invisible 控制显示

配置了 screen 以后,你就可以在编写样式的时候,使用 print:classname的方式,来控制在打印状态下展示的内容。

programming language

一个小技巧,提升你用 TailwindCss 写代码的效率

TailwindCSS 是我目前比较喜欢使用的 CSS 框架,组件优先的设计思路可以让我更好的完成产品原型的建设。

而 TailWindCSS 的一个问题就是对于文档十分的依赖,你需要对比着文档来写样式,才能够写出自己想要的样式,比较麻烦。不过,最近写代码的时候,我发现了一个好办法,可以很好的写出我们想要的样式。

这个办法就是,使用浏览器自带的 DevTools 中的「元素类」这个功能,来调试样式。

操作的路径也非常简单,打开浏览器的开发者工具,选择元素一栏,在其中找到你要调试的元素,并在右侧的属性列表中勾选开启元素类(.cls),你就可以在下方的样式元素类输入框中,输入关键词,来获取到当前页面支持的样式,从而可以查看不同的类会对组件产生的效果。

通过这样的技巧,你可以很轻松的完成样式的选择。在完成调试后,只要把你需要的样式写入到组件内,就可以将你调试好的样式固化到你的代码中,从而完成你的工作。

总结

借助浏览器自带的元素类功能,你可以很轻松的完成基于 TaildwindCss 的样式编写。