Tailwind CSS 环宽度

Tailwind CSS 是一种基于实用主义的 CSS 框架，其通过大量的工具类实现样式的快速效率 开发，环宽度是其中的一项功能。

简介

环宽度是指将一个容器分为若干个环，每个环的宽度由一组类来定义。Tailwind CSS 支持2 -12个环的分割，分别使用 divide-x, divide-y, divide-y-reverse, divide-x-reverse, divide-y-2, divide-x-3 等类来定义。其中，x 和 y 分别表示水平和垂直方向，rever se 表示环的顺序颠倒。数码后面的数字表示环的数量，最多支持到12个环。

怎么用

Tailwind CSS 的环宽度功能官方文档中有非常详细的介绍。需要首先在 tailwind.config.js 文件中开启相应的配置：

module.exports = {
  variants: {
    divideWidth: ['responsive'],
  },
  plugins: [
    require('tailwindcss')({
      divider: {
        defaults: {
          width: '1px',
        },
        '2': {
          width: '2px',
        },
        '3': {
          width: '3px',
        },
      },
    }),
  ],
}

然后，在 HTML 文件中，添加容器和相应的类名即可：

<div class="divide-x divide-blue-500">
  <div class="w-1/2 h-12"></div>
  <div class="w-1/2 h-12"></div>
</div>

上面的代码将一个 div 容器分为2个环，每个环的宽度为1像素，颜色为蓝色。

总结

Tailwind CSS 的环宽度功能可以帮助开发者快速实现容器的分割，而且可以实现非常灵活的分割 操作。虽然配图示例如果不好制作但能够好好体会。