CSS库 Tailwind

2021年的最后一段时间，还剩最后一周差不多就要放假了。
今年一直在做的一个项目已经在元旦前后结项，无所事事几天之后，部门老大突发奇想：我们用最后一周的时间来更新一下公司的官网吧。
就这样，周一上午，老大兴致勃勃的给介绍了一下tailwindcss，并扬言让我等边学边做，用一周的时间完成公司官网的所有页面的更新。

今天一整天都在使用tailwind CSS编码，对于第一次接触到这种开发方式的我来说其实有一点不习惯，满屏的div和类名看的我头晕眼花，思来想去，还是应该再系统的学习一下。

先贴上两个tailwind 的官方文档:
中文文档：https://www.tailwindcss.cn/
英文文档：https://tailwindcss.com/
建议英文水平尚可的朋友们，还是尽量阅读英文文档，译文的过程中可能会存在一些难以理解的地方（不是说翻译错误，可能只是某些单词某句话说法不同就会产生不同的理解）。

所谓tailwind CSS 技术，就是在HTML中使用预先存在的功能类来设置元素的样式

tailwind 具有以下优点

• 不需要浪费精力给css类命名
• CSS代码量几乎不会增长，所有的CSS代码都是全局、可复用的
• 功能类都是从预定义的样式中选择，方便构建统一的UI
• 与内联样式相比，方便实现页面的响应式设计（内联样式不能使用媒体查询）
• 与内联样式相比，可以实现hover、focus等状态的设置（内联样式不能设置这些状态）

tailwind 的响应式设计

根据市面上常用设备分辨率，tailwind内置了五个不同的分界点：sm、md、lg、xl、2xl。
（分界点：breakpoint，中文文档中译为断点，私以为分界点这个名字更好理解，所以后面的内容中会称作分界点）

分界点前缀	最小宽度	CSS
sm	640px	@media (min-width: 640px) { … }
md	768px	@media (min-width: 768px) { … }
lg	1024px	@media (min-width: 1024px) { … }
xl	1280px	@media (min-width: 1280px) { … }
2xl	1536px	@media (min-width: 1536px) { … }

• 这五个分界点，通过媒体查询的方式例如：@media (min-width: 1024ox)，规定了对应的min-width，当屏幕分辨率等于或者大于这个分辨率时采用这个样式
• 在一个类名前加上一个分界点前缀并使用冒号隔开，就可以实现这个功能类只在特定的分辨率下生效，这种方式适用于tailwind中的每一个类
• 例如md:w-32，w-32这个功能类只有在分辨率大于768px的屏幕上才会起作用

移动设备优先

当一个功能类未添加分界点前缀时，它对所有尺寸的屏幕都有效，一旦使用了前缀，这个类就只能在指定分辨率的屏幕上生效，因此，在进行页面的响应式设计时，一般先进行移动设备的设计布局，然后再用带前缀的工具类进行样式覆盖。

定位某一个分界点

tailwind内置的这五个分界点，媒体查询时只针对min-width属性进行，所以，在较小分界点上的所有样式都会作用到分辨率更大的屏幕上。例如使用sm前缀的所有样式，都会对符合md、lg、xl、2xl这几个分辨率的屏幕起作用
如果想要一个功能类只某一个较小尺寸的屏幕起作用，需要在更大的分界点上添加另一个功能类来抵消前一个功能类的效果

自定义分界点

在 tailwind.config.js 文件中自定义分界点，并且可以自定义媒体查询的方式，可以设置媒体查询max-width

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

悬停、焦点等状态样式

通过设置前缀，改变悬停、焦点等状态样式

tailwind 通过为元素设置hover、focus等前缀，实现元素悬停、获得焦点等不同状态时改变样式。
常用的改变元素状态样式的前缀：
hover:className：元素悬停状态添加样式
focus:className：元素获取焦点状态添加样式
active:className：元素处于 active 状态时添加样式
group-hover:className：鼠标悬停在一个指定的父元素上时对其子元素设置样式，需要在父元素中配合group类使用
group-goucs:className：鼠标焦点在一个指定的父元素上时对其子元素设置样式，需要在父元素中配合group类使用

<div class="group border-indigo-500 hover:bg-white hover:shadow-lg hover:border-transparent ...">
  <p class="text-indigo-600 group-hover:text-gray-900 ...">New Project</p>
  <p class="text-indigo-500 group-focus:text-gray-500 ...">Create a new project from a variety of starting templates.</p>
</div>

disabled:className
first:className：当元素是父元素的第一个子元素时才应用功能类
last:className：当元素是父元素的最后一个子元素时才应用功能类
odd:className：当元素是父元素的第奇数个子元素时才应用功能类
even:className：当元素是父元素的偶数个子元素时才应用功能类

与响应式前缀同时使用

状态改变前缀可以和响应式前缀结合使用，在不同分辨率的屏幕上实现不同的状态改变样式。
注意 这时候必须把响应式前缀加在状态改变前缀前面。

<button class="... hover:bg-green-500 sm:hover:bg-blue-500">
  <!-- ... -->
</button>

tailwind.config.js文件中的variants配置

需要注意的是，可能是出于文件大小的考虑，默认情况下，Tailwind 没有包含所有功能类的所有变体。
这时候，我们可以在tailwind.config.js文件中的variants部分中自定义配置。
下面是tailwind默认实现状态改变前缀的功能类，我们可以通过这里知道一个功能类有没有实现状态改变前缀、实现了哪些状态改变前缀，同时，我们可以在这个文件中添加原本不支持的功能类，也可以在默认支持的功能类中添加或者减少更多的状态改变前缀

// Default configuration
// 这个配置项太多了,我这里截取了其中极少的一部分，详细内容可以参考官方文档
module.exports = {
  // ...
  variants: {
    accessibility: ['responsive', 'focus-within', 'focus'],
    alignContent: ['responsive'],
    alignItems: ['responsive'],
    alignSelf: ['responsive'],
    animation: ['responsive'],
    appearance: ['responsive'],
    backdropBlur: ['responsive'],
    backdropBrightness: ['responsive'],
    backdropContrast: ['responsive'],
    backdropFilter: ['responsive'],
    backdropGrayscale: ['responsive'],
    backdropHueRotate: ['responsive'],
    backdropInvert: ['responsive'],
    ...
  }
}

深色模式 dark

tailwind通过dark:className的方式，为深色模式下的网站元素定义了样式，在tailwind.config.js文件中设置darkMode属性，可以启用深色模式:

// tailwind.config.js
module.exports = {
  darkMode: 'media', // darkMode的值设置media，这种情况下，只要用户的操作系统开启了深色模式，网站就会应用深色模式
  // darkMode: 'class', 这种情况下，可以实现手动开启深色模式
  // ...
}

手动启用深色模式的方法：
darkMode设置为class,，这时可以通过js给HTML元素的某一节点添加一个class="dark"的属性，这个节点就会启用深色模式。
与其他前缀结合使用时，前缀的顺序不能乱，否则无法正常工作o

<button class="lg:dark:hover:bg-white ...">
  <!-- ... -->
</button>