Tailwind CSS：现代化网页开发样式指南(二)

97thjingba
828 阅读4分钟

前言

承接上文关于TailWind CSS相关基本概念的介绍，对TailWind CSS目前有了整体的框架认识。包括它的优缺点，基本的使用方法以及存在的价值和意义。但就像是学习了解一个东西不能光学会如何使用，还得多了解一下其设计的核心理念。本着这个想法，下面将继续探讨TailWind CSS的核心设计的理念。

核心概念

TailWind CSS 主要核心概念分为

  1. 效用第一原理(Utility-First Fundamentals)
  2. 新式的处理悬停,焦点和其他状态的方式
  3. 提供响应式设计支持
  4. Dark Mode
  5. 高度可定制

效用第一原理(Utility-First Fundamentals)

让我们首先来看一个纯CSS实现的一个卡片

card.jpg

传统的实现方式

carbon (2).png

TailWind CSS实现方式

carbon (3).png

这是TailWind CSS官方给出的一个例子,可以直观的看见代码的使用量减少了大半部分,也直观的印证了TaidWind CSS 效用第一的核心概念

  1. 不用再去浪费精力去思考如何取一个类名
  2. CSS文件数以及代码量不再变的臃肿以及难以维护
  3. 不用担心改变了某个CSS文件而带来的焦虑感,不用担心是否更改了别处的引用或者全局的样式

新式的处理悬停,焦点和其他状态的方式

相较于传统CSS处理悬停,焦点的方法。TaidWind 的处理方式显得更加的具象化以及原子化

伪类和伪元素

官网给出的一个很简单的例子：

Dingtalk_20231027213524.jpg

鼠标移到按钮上背景颜色变更，想都不用想的方法技既是：

Dingtalk_20231030134325.jpg

而Tailwind实现方式就更加的浅显易懂了

carbon (3).png

在一行class里添加 hover:bg-xxx-xxx就可以表示在hover状态下做出对应颜色的调整,对于我这种懒人来说可谓是一种另外的福音。不用再去维护另外一个CSS样式

不仅hover这一个修饰器可以在Tailwind里实现,其他在我们日常开发中使用到的修饰器依然可以在Tailwind里得到应有的实现

  • 伪类 ::hover, :focus, :first-child, :required
  • 伪元素:::before, ::after, ::placeholder, ::selection

举一个伪元素的Tailwind的实现方式

Dingtalk_20231028085919.jpg

CSS里提供了 first-letter 以及first-line这样的伪元素来对文本进行一些操作,上图首字母大写以及首行的文本全部大写的Tailwind实现如下:

<p class="first-letter:test-7xl first-line:uppercase"> </p>

是不是真的浅显易懂家人们

提供响应式设计支持

个人觉得响应式的支持设计是Tailwind里面最具有代表性的设计。不用去维护query里面的CSS样式，甚至有时候会写一些重复的样式，没办法预见也不是很容易的去避免。让我们来看看Tailwind是如何进行设计的

断点前缀最小宽度类比实现方式
sm640px@media (min-width: 640px) { ... }
md768px@media (min-width: 768px) { ... }
lg1024px@media (min-width: 1024px) { ... }
xl1280px@media (min-width: 1280px) { ... }
2xl1536px@media (min-width: 1536px) { ... }

Tailwind根据几个常用的宽度断点分成了五个类别。使用方式和使用伪类和伪元素时保持一致

<img class="w-16 md:w-32 lg:w-48" src="...">

支持定制化

有的宽度断点可能不适合自己的开发习惯或业务需求。Tailwind也提出了可自定义方法来满足日常的开发需要

Dingtalk_20231028100721.jpg

在tailwind.config.js配置文件里进行更改即可,可修改断点前缀也可修改其断点宽度。 当然也有可能有的小伙伴不愿意为了满足一个特定的断点宽度而去专门写一个断点修饰符。这时候就需要填入某一个特定的值来满足开发需要

Dingtalk_20231028101305.jpg

Tailwind 提供了min和max 两种修饰前缀然后后面填入-[]具体的值来满足特定宽度断点的需求，不得不说Tailwind在响应式方面的设计确实实在的印证了其效用第一原理的核心概念

Dark Mode (黑暗模式)

在介绍Dark Mode 之前，首先大家可以了解一下DarkMode是什么

为什么要使用DarkMode？

Dark Mode和响应式设计 我个人认为是Tailwind最精彩的两个核心设计

我尝试使用了TaidWind推荐的方式在页面里实现了DarkMode

Dingtalk_20231028102641.jpg

Dingtalk_20231028102654.jpg

这是我使用Next.js和Tailwind简单写的一个静态页面。完全支持了DarkMode，其核心的实现逻辑也非常简单，能够支持读取系统的颜色模式，官方也给出了其js的实现方式

Dingtalk_20231028104330.jpg

前提是需要在tailwind.config.js配置文件里添加 darkMode: 'class' 这样就可以实现DarkMode模式和日间模式相互切换

总结

本文简单介绍了Tailwind的几个基本的核心概念，最后还剩下了高度可定制这一条核心概念我打算放到下一篇文章去具体介绍如何在Tailwind里实现自己的可定制化需求，有问题的小伙伴欢迎指正，共同进步

附:

Tailwind CSS：现代化网页开发样式指南(一)

avatar
文章
阅读
粉丝