Aspect Ratio 基础类设置元素的宽高比例，一般用于设置图片 <img> 或 视频 <video> 元素

Container 基础类根据页面所处的断点设置元素/容器的宽度最大值

该基础类默认并不会将元素/容器居中，可以在 theme.container 属性中进行开启

module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

如果希望在元素/容器两侧添加水平内边距，可以在 theme.container 属性中进行设置

module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}

也可以为每个断点下的容器添加不同的内边距

module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};

Columns 基础类为元素/容器设置列布局，可以实现容器内子元素类似 grid 布局的多列的排布，但它更简便，可以方便地实现类似杂志多列段落的排版布局。

由于该基础类对应的样式属性是一个简写属性，所以该基础类分为两种类型，前缀 columns- 接着的是整数，表示列数，如 columns-3，即容器应该分为 3 列；前缀 columns- 接着的是表示每一列的宽度的值，如 columns-xs，即表示每一列的宽度是 20rem，列数会基于容器的总宽度自动计算出来。

Break After、Break Before、Before Inside 这三个基础类，控制元素在打印时的前后或内部是否要换页

Box Decoration Break 基础类用以定义当元素跨多行、多列、多页时，元素的片段（每一行、每一列、每一页）应如何呈现

• 基础类 .box-decoration-clone 生成的样式是 box-decoration-break: clone; 每一行看作一个独立元素，它们的样式都一样 clone 原样式
• 基础类 .box-decoration-slice 生成的样式是 box-decoration-break: slice; 连续多行作为一个连续整体，每一行作为其中一个片段

具体效果可以查看这个视频教程

Box Sizing 基础类设置元素的盒子模型

Display 基础类用于设置元素的 display 样式属性

• flow-root 基础类用于为元素（模拟根元素）创建 BFC 以包含内部所有元素，可用于清除浮动
• contents 基础类将元素设置为「影子」容器，其子元素就像是其父元素的直接子元素一样
• 对于表格布局，Tailwind 提供了多个相关的基础类 table、.table-row、.table-cell、.table-caption、.table-column、.table-column-group、.table-header-group、.table-row-group 和 .table-footer-group 可以创建一个响应式的表格

<div class="table w-full ...">
  <div class="table-header-group ...">
    <div class="table-row">
      <div class="table-cell text-left ...">Title</div>
      <div class="table-cell text-left ...">Artist</div>
      <div class="table-cell text-left ...">Year</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell ...">Chocolate Starfish And The Hot Dog Flavored Water</div>
      <div class="table-cell ...">Limp Bizkit</div>
      <div class="table-cell ...">2000</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Significant Other</div>
      <div class="table-cell ...">Limp Bizkit</div>
      <div class="table-cell ...">1999</div>
    </div>
  </div>
</div>

• hidden 基础类所对应的样式是 display: none 它会将元素从页面移除，如果只希望隐藏元素，可以使用 .invisible 基础类

Floats 基础类用于设置元素的浮动属性

Clear 基础类用于清除该元素上方浮动元素，这样就可以避免产生类似杂志的文字环绕图片的布局

Isolation 基础类用于控制元素是否必须创建一个新的层叠上下文，这会影响背景混合的效果。

Object Fit 基础类用于控制可替换元素，如 <img> 元素，其内容应该如何适应该元素的框（元素的盒子模型限制了宽高时）。

• .object-contain 基础类将内容进行保持其宽高比的缩放，以完整地显示在元素的盒子内
• .object-cover 基础类将内容进行保持其宽高比的缩放，以布满元素的盒子，因此可能对内容进行裁剪
• .object-fill 基础类可以将内容进行拉伸的缩放，以布满元素的盒子
• .object-none 基础类将内容保持其原有的尺寸来填充元素的盒子
• .object-scale-down 基础类将基于内容在 object-fit: none 或 object-fit: contain 两种情况下，以尺寸较小的情况来填充元素的盒子

Object Position 基础类配合以上的基础类使用，用以决定内容缩放后采用哪个部分来填充元素的盒子，一般用 .object.center 基础类，将内容的中间与元素的盒子中间重叠放置

Overflow 基础类用于控制当容器内的元素大于容器的尺寸时，应该如何处理。

Overscroll Behavior 基础类用以控制当可滚动区域到达底部时，用户如果继续滚动/过度滚动，页面（也可滚动时）的响应效果

移动端浏览器倾向于提供一种「触底」效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为「滚动链」。 参考：overscroll-behavior

• 在某些情况下我们不想在过度滚动而触发页面随之滚动，可以使用 .overscroll-none 基础类来去除不需要的滚动链
• 但是在避免过度滚动引起页面随之滚动的同时，还想保留容器内的触底刷新或触底反弹的效果，可以使用 .overscroll-contain 基础类

Position 基础类用于设置元素的绝对定位样式属性

一般配置 Top/Right/Bottom/Left 基础类使用，以设置元素采用绝对定位时的位置

• .inset-0 基础类表示的样式
  css

  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  

• 支持负值 .-left-4

module.exports = {
  theme: {
    extend: {
      spacing: {
        '3px': '3px',
      }
    }
  }
}

也可以直接在 theme.inset 或 theme.extend.inset 属性中定制

module.exports = {
  theme: {
    extend: {
      inset: {
        '3px': '3px',
      }
    }
  }
}

Visibility 基础类用以控制元素是否在页面可见

Z-index 基础类用以控制元素的叠放顺序

module.exports = {
  theme: {
    extend: {
      zIndex: {
        '100': '100',
      }
    }
  }
}

Tailwind 针对 Flex 布局提供了多种基础类，以设置该布局中的不同元素的样式：

• Flex Basis 基础类用于设置 Flex 项目（子元素）的初始尺寸 💡 该基础类继承了 Spacing 基础类以及一系列的百分比的值，可以间接在 Tailwind 配置文件的 theme.spacing 或 theme.extend.spacing 属性中定制
  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        spacing: {
          '112': '28rem',
          '128': '32rem',
        }
      }
    }
  }
  

  
  也可以在 Tailwind 配置文档的 theme.flexBasis 或 theme.extend.flexBasis 属性中定制
  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        flexBasis: {
          '1/7': '14.2857143%',
          '2/7': '28.5714286%',
          '3/7': '42.8571429%',
          '4/7': '57.1428571%',
          '5/7': '71.4285714%',
          '6/7': '85.7142857%',
        }
      }
    }
  }
  

  Tip

  支持任意值 flex-basis-[14.2857143%]

• Flex Direction 基础类用于设置 Flex 布局的方向
• Flex Wrap 基础类用于设置 Flex 项目过多时其换行行为
• Flex 基础类是设置简写属性 flex 的样式值
  Tip

  可以在 Tailwind 配置文档的 theme.flex 或 theme.extend.flex 属性中进行定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        flex: {
          '2': '2 2 0%'
        }
      }
    }
  }
  

  Tip

  支持任意值 flex-[2_2_0%]

• Flex Grow 基础类用于设置 Flex 项目伸长行为
  Tip

  可以在 Tailwind 配置文档的 theme.flexGrow 或 theme.extend.flexGrow 属性中进行定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        flexGrow: {
          '2': 2
        }
      }
    }
  }
  

  Tip

  支持任意值 grow-[2]

• Flex Shrink 基础类用于设置 Flex 项目的压缩行为
  Tip

  可以在 Tailwind 配置文档的 theme.flexShrink 或 theme.extend.flexShrink 属性中进行定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        flexShrink: {
          '2': 2
        }
      }
    }
  }
  

  Tip

  支持任意值 shrink-[2]

• Order 基础类 用于设置 Flex 项目的次序
  Tip

  可以在 Tailwind 配置文档的 theme.order 或 theme.extend.order 属性中进行定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        order: {
          '13': '13'
        }
      }
    }
  }
  

  Tip

  支持任意值 order-[13]

• Justify Content 基础类用于设置 Flex 或 Grid 布局中项目在主轴的对齐方式
• Justify Items 基础类用于设置 Grid 布局的项目在水平方向的对齐方式
• Justify Self 基础类用于设置 Flex 或 Grid 布局的项目内部的子元素在主轴方向的对齐方式
• Align Content 基础类用于设置 Grid 布局中项目在垂直方向的对齐方式
• Align Items 基础类用于设置 Flex 布局的项目在次轴的对齐方式
• Align Self 基础类用于设置 Flex 或 Grid 布局的项目内部的子元素在次轴方向的对齐方式
• Place Content 基础类是一个简写属性，用于同时设置 Flex 或 Grid 布局中项目在主轴和次轴的对齐方式，项目作为一个整体来进行设置
• Place Items 基础类是一个简写属性，用于同时设置 Flex 或 Grid 布局中项目在主轴和次轴的对齐方式，项目在其网格中分别进行设置
• Place Self 基础类是一个简写属性，用于同时设置 Flex 或 Grid 布局的项目内部的子元素在主轴和次轴方向的对齐方式

Tailwind 针对 Grid 布局提供了多种基础类，以设置该布局中的不同元素的样式：

• Grid Template Columns 基础类 用于设置 Grid 容器中的列数量
  Tip

  Tailwind 默认提供了在 Grid 中最多创建 12 列的基础类，可以在 Tailwind 的配置文档的 theme.gridTemplateColumns 或 theme.extend.gridTemplateColumns 中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        gridTemplateColumns: {
          // Simple 16 column grid
          '16': 'repeat(16, minmax(0, 1fr))',
  
          // Complex site-specific column configuration
          'footer': '200px minmax(900px, 1fr) 100px',
        },
        gridColumnStart: {
          '13': '13',
          '14': '14',
          '15': '15',
          '16': '16',
          '17': '17',
        },
        gridColumnEnd: {
          '13': '13',
          '14': '14',
          '15': '15',
          '16': '16',
          '17': '17',
        }
      }
    }
  }
  

  Tip

  支持任意值 col-span-[span_16_/_span 16]

• Grid Column Start / End 基础类用于设置 Grid 项目横跨的列数，或者指定从哪一列开始，从哪一列结束
  Tip

  可以在 Tailwind 的配置文档的 theme 或 theme.extend 下的 gridColumn、gridColumnStart、gridColumnEnd 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        gridColumn: {
          'span-16': 'span 16 / span 16',
        }
      }
    }
  }
  

  Tip

  支持任意值 grid-cols-[200px_minmax(900px,_1fr)_100px]

• Grid Template Rows 基础类用于设置 Grid 容器中的行数量
  Tip

  Tailwind 默认提供了在 Grid 中最多创建 6 行的基础类，可以在 Tailwind 的配置文档的 theme.gridTemplateRows 或 theme.extend.gridTemplateRows 中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        gridTemplateRows: {
          // Simple 8 row grid
          '8': 'repeat(8, minmax(0, 1fr))',
  
          // Complex site-specific row configuration
          'layout': '200px minmax(900px, 1fr) 100px',
        }
      }
    }
  }
  

  Tip

  支持任意值 grid-rows-[200px_minmax(900px,_1fr)_100px]

• Grid Row Start / End 基础类用于设置 Grid 项目横跨的行数，或者指定从哪一行开始，从哪一行结束
  Tip

  可以在 Tailwind 的配置文档的 theme 或 theme.extend 下的 gridRow、gridRowStart、gridRowEnd 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        gridRow: {
          'span-16': 'span 16 / span 16',
        },
        gridRowStart: {
          '8': '8',
          '9': '9',
          '10': '10',
          '11': '11',
          '12': '12',
          '13': '13',
        },
        gridRowEnd: {
          '8': '8',
          '9': '9',
          '10': '10',
          '11': '11',
          '12': '12',
          '13': '13',
        }
      }
    }
  }
  

  Tip

  支持任意值 row-[span_16_/_span_16]

• Grid Auto Flow 基础类用于设置 Grid 中项目的布局方向
• Grid Auto Columns 基础类用于设置 Grid 布局中超出容器而隐式创建的网格的列宽
  Tip

  可以在 Tailwind 的配置文档的 theme.gridAutoColumns 或 theme.extend.gridAutoColumns 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        gridAutoColumns: {
          '2fr': 'minmax(0, 2fr)',
        }
      }
    }
  }
  

  Tip

  支持任意值 auto-cols-[minmax(0,_2fr)]

• Grid Auto Rows 基础类用于设置 Grid 布局中超出容器而隐式创建的网格的行宽
  Tip

  可以在 Tailwind 的配置文档的 theme.gridAutoRows 或 theme.extend.gridAutoRows 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        gridAutoRows: {
          '2fr': 'minmax(0, 2fr)',
        }
      }
    }
  }
  

  Tip

  支持任意值 auto-rows-[minmax(0,_2fr)]

• Gap 基础类用于设置 Grid 布局中网格之间的间隙
  Tip

  该基础类继承了 Spacing 基础类以及一系列的百分比的值，可以间接在 Tailwind 配置文件的 theme.spacing 或 theme.extend.spacing 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        spacing: {
          '11': '2.75rem',
        }
      }
    }
  }
  

  
  也可以在 Tailwind 配置文档的 theme.gap 或 theme.extend.gap 属性中定制
  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        gap: {
          '11': '2.75rem',
        }
      }
    }
  }
  

  Tip

  支持任意值 gap-[2.75rem]

• Padding 基础类用于设置元素的内边距
  Tip

  由于该基础类继承了 Spacing 基础类，所以可以间接在 Tailwind 配置文档的 theme.spacing 或 theme.extend.spacing 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        spacing: {
          '5px': '5px',
        }
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.padding 或 theme.extend.padding 属性中定制
  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        padding: {
          '5px': '5px',
        }
      }
    }
  }
  

  Tip

  支持任意值 p-[5px]

• Margin 基础类用于设置元素的外边距
  Tip

  支持在基础类前添加 - 将外边距设置为负值

  Tip

  由于该基础类继承了 Spacing 基础类，所以可以间接在 Tailwind 配置文档的 theme.spacing 或 theme.extend.spacing 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        spacing: {
          '5px': '5px',
        }
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.padding 或 theme.extend.padding 属性中定制
  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        margin: {
          '5px': '5px',
        }
      }
    }
  }
  

  Tip

  支持任意值 m-[5px]

• Space Between 基础类用于设置元素之间的间隔（一般用于列表元素或 Flex 布局容器）
  Tip

  可以在基础类前添加 - 将间隔设置为负值

  Warning

  该基础类实际上是为子元素（除第一个）添加外边距，并不能很好地处理复杂的布局，例如当元素过多，出现了换行，就可以造成对齐问题，此时应该使用 Grid 布局，然后用 Gap 基础类为元素添加间隔。

  Tip

  它不应该与 Divide Width 基础类一起使用，因为两者在视觉上功能目的是一样的，都是为了区分并列的多个元素，这两个基础类应该是二选一来使用。

  Tip

  由于该基础类继承了 Spacing 基础类，所以可以间接在 Tailwind 配置文档的 theme.spacing 或 theme.extend.spacing 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        spacing: {
          '5px': '5px',
        }
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.space 或 theme.extend.space 属性中定制
  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        space: {
          '5px': '5px',
        }
      }
    }
  }
  

  Tip

  支持任意值 space-y-[5px]

• Width 基础类用于设置元素的宽度，提供了基于绝对单位、百分比、内容长短、屏幕宽度的多种基础类
  Tip

  由于该基础类继承了 Spacing 基础类，所以可以间接在 Tailwind 配置文档的 theme.spacing 或 theme.extend.spacing 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        spacing: {
          '128': '32rem',
        }
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.width 或 theme.extend.width 属性中定制
  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        width: {
          '128': '32rem',
        }
      }
    }
  }
  

  Tip

  支持任意值 w-[32rem]

• Min-Width 基础类用于限制元素宽度的最小值，提供了基于绝对单位、百分比、内容长短的多种基础类
  Tip

  可以在 Tailwind 配置文档的 theme.minWidth 或 theme.extend.minWidth 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      minWidth: {
        '1/2': '50%',
      }
    }
  }
  

  Tip

  支持任意值 min-w-[50%]

• Max-Width 基础类用于限制元素宽度的最大值，提供了基于绝对单位、百分比、内容长短、断点、可读性的多种基础类
  Tip

  使用 .max-w-prose 基础类可以基于元素的字体大小，设置元素的最大宽度，以保证文本内容的可读性

  Tip

  使用 .max-w-screen-{breakpoint} 基础类可以基于页面所在的不同断点，设置元素的最大宽度

  Tip

  可以在 Tailwind 配置文档的 theme.maxWidth 或 theme.extend.maxWidth 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      maxWidth: {
        '1/2': '50%',
      }
    }
  }
  

  Tip

  支持任意值 max-w-[50%]

• Height 基础类用于设置元素的高度，提供了基于绝对单位、百分比、内容长短、屏幕宽度的多种基础类
  Tip

  由于该基础类继承了 Spacing 基础类，所以可以间接在 Tailwind 配置文档的 theme.spacing 或 theme.extend.spacing 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        spacing: {
          '128': '32rem',
        }
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.height 或 theme.extend.height 属性中定制
  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        height: {
          '128': '32rem',
        }
      }
    }
  }
  

  Tip

  支持任意值 h-[32rem]

• Min-Height 基础类用于限制元素高度的最小值，提供了基于绝对单位、百分比、内容长短的多种基础类
  Tip

  可以在 Tailwind 配置文档的 theme.minHeight 或 theme.extend.minHeight 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      minHeight: {
        '1/2': '50%',
      }
    }
  }
  

  Tip

  支持任意值 min-h-[50%]

• Max-Height 基础类用于限制元素高度的最大值，提供了基于绝对单位、百分比、内容长短的多种基础类
  Tip

  由于该基础类继承了 Spacing 基础类，所以可以间接在 Tailwind 配置文档的 theme.spacing 或 theme.extend.spacing 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        spacing: {
          '128': '32rem',
        }
      }
    }
  }
  

  
  也可以在 Tailwind 配置文档的 theme.maxHeight 或 theme.extend.maxHeight 属性中定制
  tailwind.config.js

  js

  module.exports = {
    theme: {
      maxHeight: {
        '128': '32rem',
      }
    }
  }
  

  Tip

  支持任意值 max-h-[32rem]

Font Family 基础类用于设置元素文本内容所使用的字体家族

module.exports = {
  theme: {
    fontFamily: {
      'display': ['Oswald', ...], // 数组形式
      'body': 'sans': 'Helvetica, Arial, sans-serif', // 字符串形式
    }
  }
}

{
  // Won't work:
  'sans': ['Exo 2', ...],

  // Add quotes:
  'sans': ['"Exo 2"', ...],

  // ...or escape the space:
  'sans': ['Exo\\ 2', ...],
}

Font Size 基础类设置元素文本内容的字体大小

module.exports = {
  theme: {
    fontSize: {
      'tiny': '.875rem',
      'base': '1rem',
    }
  }
}

可以为不同的字体大小同时提供「配套」的行高，以二元数组的形式，第二个元素就是默认行高。第二个元素也可以是对象，其中属性 lineHeight 指定行高，还可以设置属性 letterSpacing 以提供默认的字间距

module.exports = {
  theme: {
    fontSize: {
      base: ['16px', '24px'],
      sm: ['14px', {
        lineHeight: '20px',
      }],
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    }
  }
}

Font Weight 基础类设置元素的文本内容的字体的字重

module.exports = {
  theme: {
    fontWeight: {
      'extra-light': 100,
      semibold: 600,
      'extra-bold': 800,
      black: 900,
    }
  }
}

Font Smoothing 基础类设置元素的文本内容的字体渲染时的平滑效果

Font Style 基础类设置元素的文本内容是否为斜体

Font Variant Numeric 基础类用于设置数字、分数和序号标记的字形

<p class="ordinal slashed-zero tabular-nums ...">
  1234567890
</p>

Letter Spacing 基础类用于设置字间距

module.exports = {
  theme: {
    letterSpacing: {
      tightest: '-.075em',
      normal: '0',
      wide: '.025em',
      widest: '.25em',
    }
  }
}

Line Height 基础类用于设置行高，提供了绝对行高和相对行高

module.exports = {
  theme: {
    extend: {
      lineHeight: {
        'extra-loose': '2.5',
        '12': '3rem',
      }
    }
  }
}

Text Alignment 基础类用以设置段落文本的对齐方式

Text Color 基础类用以设置字体颜色

<!-- 设置字体颜色透明度为 75% -->
<p class="text-blue-600/75">The quick brown fox...</p>
<!-- 设置字体颜色透明度为 6% -->
<p class="text-blue-600/[.06]">The quick brown fox...</p>

module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

也可以直接在 Tailwind 配置文档的 theme.textColor 或 theme.extend.textColor 属性中定制

• Text Decoration 基础类用于设置文本的装饰线类型，包括 .underline 下划线、.overline 上划线、.line-through 删除线、.no-underline 无装饰线
• Text Decoration Color 基础类用于设置文本装饰线的颜色
  Tip

  Tailwind 默认提供的装饰线颜色基础类，都支持在其后添加表示透明度百分比的数值（与 Opacity 基础类所匹配） ，并用 / 分隔，也可以使用任意值 text-blue-600/[.06]

  Tip

  由于该基础类继承了 Color 基础类，所以可以间接在 Tailwind 配置文档的 theme.colors 或 theme.extend.colors 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        colors: {
          'regal-blue': '#243c5a',
        },
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.textDecorationColor 或 theme.extend.textDecorationColor 属性中定制
  Tip

  支持任意值 decoration-[#50d71e]

• Text Decoration Style 基础类用于设置装饰线的样式
• Text Decoration Thickness 基础类用于设置装饰线的粗细
  Tip

  可以在 Tailwind 配置文档的 theme.textDecorationThickness 或 theme.extend.textDecorationThickness 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        textDecorationThickness: {
          3: '3px',
        }
      }
    }
  }
  

  Tip

  支持任意值 decoration-[3px]

• Text Underline Offset 基础类用于设置下划线的偏移值
  Tip

  可以在 Tailwind 配置文档的 theme.textUnderlineOffset 或 theme.extend.textUnderlineOffset 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        textUnderlineOffset: {
          3: '3px',
        }
      }
    }
  }
  

  Tip

  支持任意值 underline-offset-[3px]

Text Transform 基础类用于设置文本格式转换，包括 .uppercase 全大写、.lowercase 全小写、.capitalize 首字母大写、.normal-case 无转换

Text Overflow 基础类用于设置当文本过长时的处理方式，包括 .truncate 只显示一行，其他截短并在最后添加 ... 省略号、text-ellipsis 对过长的单词截短，并在其后添加 ... 省略号、.clip 直接截短

Text Indent 基础类用于设置段落首行的缩进

module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

也可以直接在 Tailwind 配置文档的 theme.textIndent 或 theme.extend.textIndent 属性中定制

module.exports = {
  theme: {
    extend: {
      textIndent: {
        '128': '32rem',
      }
    }
  }
}

Vertical Alignment 基础类用于设置字体在垂直方向的对齐方式

Whitespace 基础类用于设置元素的文本内的空格（包含换行）的处理方式

Word Break 基础类用于设置单词过长时的处理方式

Background Image 基础类用以设置背景图

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'hero-pattern': "url('/img/hero-pattern.svg')",
        'footer-texture': "url('/img/footer-texture.png')",
      }
    }
  }
}

如果背景设定的是渐变色，Tailwind 还提供了 Gradient Color Stops 基础类用于指定不同渐变阶段 from-{color} 开始、via-{color} 中间、to-{color} 结束的具体颜色。如果 to-{color} 结束颜色没有指定，则默认为透明。

module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

也可以直接在 Tailwind 配置文档的 theme.gradientColorStops 或 theme.extend.gradientColorStops 属性中定制

Background Size 基础类用于设置背景图填充容器的方式，提供了 2 个基础类，分别是 .bg-auto 以图片原始大小来填充容器、.bg-contain 将图片进行保持宽高比的缩放，以将图片完整地包含在容器内（可能无法完全填满容器）、.bg-cover 将图片进行保持宽高的缩放，以用图片完整地填满容器

module.exports = {
  theme: {
    backgroundSize: {
      'auto': 'auto',
      'cover': 'cover',
      'contain': 'contain',
      '50%': '50%',
      '16': '4rem',
    }
  }
}

Background Position 基础类用于设置背景图先对于容器的位置

module.exports = {
  theme: {
    backgroundPosition: {
      bottom: 'bottom',
      'bottom-4': 'center bottom 1rem',
    }
  }
}

Background Origin 基础类用于设置元素的背景可以覆盖的范围，提供了 3 个基础类，分别是 .bg-origin-border 背景可以覆盖到边框、.bg-origin-padding 背景可以覆盖到内边距、.bg-origin-content 背景可以覆盖到内容区

Background Repeat 基础类用于设置背景图的通过重复图片而实现填充容器的规则

Background Attachment 基础类用于设置背景图在其容器滚动时的行为，提供了 3 个基础类，分别是 .bg-scroll 背景图随着页面的滚动而滚动，但不会随着容器内容的滚动而滚动（默认）、.bg-fixed 背景图片固定在视口内，不会随着容器的滚动而滚动、.bg-local 背景图相对于元素的内容定位，随着元素的内容滚动而滚动。

Background Clip 基础类用于设置背景（背景图片或颜色）的裁剪样式，提供了 4 个基础类，分别是 .bg-clip-border 对背景进行裁剪，范围局限在边框处（但是在边框下层）、.bg-clip-padding 对背景进行裁剪，范围局限在内边距（即不会到边框处）、.bg-clip-content 对背景进行裁剪，范围局限在内容区、.bg-clip-text 对背景进行裁剪，作为文字的前景色

<div class="text-5xl font-extrabold ...">
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
    Hello world
  </span>
</div>

Background Color 基础类用于设置元素的背景色

<button class="bg-sky-500/100 ..."></button>

module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

也可以直接在 Tailwind 配置文档的 theme.backgroundColor 或 theme.extend.backgroundColor 属性中定制

• Border Width 基础类用于设置元素的边框粗细，可以单独设置盒子的水平、垂直、一侧的边框
  Tip

  可以在 Tailwind 配置文档的 theme.borderWidth 或 theme.extend.borderWidth 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      borderWidth: {
        DEFAULT: '1px',
        '0': '0',
        '2': '2px',
        '3': '3px',
        '4': '4px',
        '6': '6px',
      }
    }
  }
  

  Tip

  支持任意值 border-t-[3px]

• Border Color 基础类用于设置元素的边框颜色，可以单独设置盒子的水平、垂直、一侧的边框颜色
  Tip

  Tailwind 默认提供的边框颜色基础类，都支持在其后添加表示透明度百分比的数值（与 Opacity 基础类所匹配） ，并用 / 分隔，也可以使用任意值 border-indigo-600/[.55]

  html

  <div class="border-4 border-indigo-500/100 ..."></div>
  

  Tip

  由于该基础类继承了 Color 基础类，所以可以间接在 Tailwind 配置文档的 theme.colors 或 theme.extend.colors 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        colors: {
          'regal-blue': '#243c5a',
        },
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.borderColor 或 theme.extend.borderColor 属性中定制
  Tip

  支持任意值 border-[#243c5a]

• Border Style 基础类用于设置元素边框的类型

使用 Divide 相关的基础类，来设置相邻元素之间分隔线样式，实际上是设置其中一个元素的一侧边框样式

• Divide Width 基础类用于设置分隔线的样式
  Tip

  由于该基础类继承了 Border Width 基础类，所以可以间接在 Tailwind 配置文档的 theme.borderWidth 或 theme.extend.borderWidth 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      borderWidth: {
        DEFAULT: '1px',
        '0': '0',
        '2': '2px',
        '3': '3px',
        '4': '4px',
        '6': '6px',
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.divideWidth 属性中定制
  tailwind.config.js

  js

  module.exports = {
    theme: {
      divideWidth: {
        DEFAULT: '1px',
        '0': '0',
        '2': '2px',
        '3': '3px',
        '4': '4px',
        '6': '6px',
      }
    }
  }
  

  Tip

  支持任意值 divide-x-[3px]

• Divide Color 基础类用于设置分隔线的颜色
  Tip

  Tailwind 默认提供的分隔线颜色基础类，都支持在其后添加表示透明度百分比的数值（与 Opacity 基础类所匹配） ，并用 / 分隔，也可以使用任意值 divide-gray-400/[.24]

  html

  <div class="divide-y-4 divide-gray-400/25 ...">
    <!-- ... -->
  </div>
  

  Tip

  由于该基础类继承了 Color 基础类，所以可以间接在 Tailwind 配置文档的 theme.colors 或 theme.extend.colors 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        colors: {
          'regal-blue': '#243c5a',
        },
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.divideColor 或 theme.extend.divideColor 属性中定制
  Tip

  支持任意值 divide-[#243c5a]

• Divide Style 基础类用于设置分隔线的类型

轮廓是元素的边框外面一圈的线，一般用于起强调作用，它与 border 不同的一点是它「不占空间」，即它绘制在元素的外圈，不算入元素的大小尺寸里

• Outline Width 基础类用于设置轮廓的粗细
  Tip

  可以在 Tailwind 配置文档的 theme.outlineWidth 或 theme.extend.outlineWidth 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        outlineWidth: {
          5: '5px',
        }
      }
    }
  }
  

  Tip

  支持任意值 outline-[5px]

• Outline Color 基础类用于设置轮廓的颜色
  Tip

  Tailwind 默认提供的轮廓颜色基础类，都支持在其后添加表示透明度百分比的数值（与 Opacity 基础类所匹配） ，并用 / 分隔，也可以使用任意值 outline-pink-400/[.55]

  html

  <button class="outline-2 outline-blue-500/50 ...">Save Changes</button>
  

  Tip

  由于该基础类继承了 Color 基础类，所以可以间接在 Tailwind 配置文档的 theme.colors 或 theme.extend.colors 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        colors: {
          'regal-blue': '#243c5a',
        },
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.outlineColor 或 theme.extend.outlineColor 属性中定制
  Tip

  支持任意值 outline-[#243c5a]

• Outline Style 基础类用于设置轮廓的类型
• Outline Offset 基础类用于设置轮廓偏离元素的值
  Tip

  可以在 Tailwind 配置文档的 theme.outlineOffset 或 theme.extend.outlineOffset 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        outlineOffset: {
          3: '3px',
        }
      }
    }
  }
  

  Tip

  支持任意值 outline-offset-[3px]

外环 ring 实际是通过 box-shadow 属性样式为元素创建一圈外环，可以实现元素被聚焦时的强调效果

• Ring Width 基础类用于设置外环的宽度，其中 ring-inset 基础类比较特殊，它是生成一个在元素内部的环形。
  💡 可以在 Tailwind 配置文档的 theme.ringWidth 或 theme.extend.ringWidth 属性中定制
  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        ringWidth: {
          '10': '10px',
        }
      }
    }
  }
  

  Tip

  支持任意值 ring-[10px]

• Ring Color 基础类用于设置外环的颜色
  Tip

  Tailwind 默认提供的外环颜色基础类，都支持在其后添加表示透明度百分比的数值（与 Opacity 基础类所匹配） ，并用 / 分隔，也可以使用任意值 ring-blue-500/[.55]

  html

  <button class="... ring-2 ring-blue-500/50">Subscribe</button>
  

  Tip

  由于该基础类继承了 Color 基础类，所以可以间接在 Tailwind 配置文档的 theme.colors 或 theme.extend.colors 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        colors: {
          'regal-blue': '#243c5a',
        },
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.ringColor 或 theme.extend.ringColor 属性中定制
  Tip

  支持任意值 ring-[#50d71e]

• Ring Offset Width 基础类用于设置外环偏离元素的值。
  Tip

  在 Tailwind 配置文档的 theme.ringOffsetWidth 或 theme.extend.ringOffsetWidth 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        ringOffsetWidth: {
          '3': '3px',
          '6': '6px',
          '10': '10px',
        }
      }
    }
  }
  

  Tip

  支持任意值 ring-offset-[3px]

  
  外环偏离后默认内部是白色的，可以使用 Ring Offset Color 基础类来设置其颜色
  Tip

  Tailwind 默认提供的外环偏移填充色基础类，都支持在其后添加表示透明度百分比的数值（与 Opacity 基础类所匹配） ，并用 / 分隔，也可以使用任意值 ring-offset-purple-100/[.55]

  html

  <button class="ring-2 ring-purple-500 ring-offset-4 ring-offset-purple-100/50"></button>
  

  Tip

  由于该基础类继承了 Color 基础类，所以可以间接在 Tailwind 配置文档的 theme.colors 或 theme.extend.colors 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        colors: {
          'regal-blue': '#243c5a',
        },
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.ringOffsetColor 或 theme.extend.ringOffsetColor 属性中定制
  Tip

  支持任意值 ring-offset-[#50d71e]

• Border Radius 基础类用于设置元素的圆角样式，可以设置盒子的一侧或单个圆角，其中 .rounded-full 基础类基于元素的宽高比例，可以将元素设置为药丸 pill 形式或是圆形，
  Tip

  可以在 Tailwind 配置文档的 theme.borderRadius 或 theme.extend.borderRadius 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      borderRadius: {
        'none': '0',
        DEFAULT: '4px',
        'large': '12px',
      }
    }
  }
  

  Tip

  支持任意值 rounded-[12px]

• Box Shadow 基础类用于设置元素的阴影，其中 .shadow-inner 基础类添加内阴影，其他基础类添加的是外阴影
  Tip

  可以在 Tailwind 配置文档的 theme.boxShadow 或 theme.extend.boxShadow 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        boxShadow: {
          '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
        }
      }
    }
  }
  

  Tip

  支持任意值 shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]

  
  可以通过 Box Shadow Color 基础类设置盒子阴影的颜色
  Tip

  Tailwind 默认提供的阴影色基础类，都支持在其后添加表示透明度百分比的数值（与 Opacity 基础类所匹配） ，并用 / 分隔

  html

  <button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>
  

  Warning

  如果使用了状态变量改变了阴影的效果，例如 hover:shadow-xl，这会造成阴影颜色的改变，因为默认的阴影色是灰色，而要维持阴影色，需要在相应的状态下，再设置一次阴影色 hover:shadow-cyan-500/50

  Tip

  由于该基础类继承了 Color 基础类，所以可以间接在 Tailwind 配置文档的 theme.colors 或 theme.extend.colors 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        colors: {
          'regal-blue': '#243c5a',
        },
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.boxShadowColor 或 theme.extend.boxShadowColor 属性中定制
  Tip

  支持任意值 shadow-[#50d71e]

CSS transform 样式属性可以对元素进行旋转、缩放、倾斜或平移的操作

• Scale 基础类用于缩放元素
  Tip

  可以在基础类前添加 - 将其值设置为负值，实现 180° 的翻转缩放

  Tip

  可以在 Tailwind 配置文档的 theme.scale 或 theme.extend.scale 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        scale: {
          '175': '1.75',
        }
      }
    }
  }
  

  Tip

  支持任意值 scale-[1.7]

• Rotate 基础类用于旋转元素
  Tip

  可以在基础类前添加 - 将其值设置为负值，实现逆时针旋转

  Tip

  可以在 Tailwind 配置文档的 theme.rotate 或 theme.extend.rotate 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        rotate: {
          '17': '17deg',
        }
      }
    }
  }
  

  Tip

  支持任意值 rotate-[17deg]

• Translate 基础类用于平移元素
  Tip

  可以在基础类前添加 - 将其值设置为负值，实现反方向平移（网页的坐标轴的正方向是向右和向下）

  Tip

  由于该基础类继承了 Spacing 基础类以及 1/2 和 full 等以实现基于元素大小尺寸相应的百分比平移元素，所以可以间接在 Tailwind 配置文档的 theme.spacing 或 theme.extend.spacing 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        spacing: {
          '4.25': '17rem',
        }
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.translate 或 theme.extend.translate 属性中定制
  Tip

  支持任意值 translate-y-[17rem]

• Skew 基础类用于倾斜元素
  Tip

  可以在基础类前添加 - 将其值设置为负值

  Tip

  可以在 Tailwind 配置文档的 theme.skew 或 theme.extend.skew 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        skew: {
          '17': '17deg',
        }
      }
    }
  }
  

  Tip

  支持任意值 skew-y-[17deg]

• Transform Origin 基础类用于设置 transform 元素时的参考中点
  Tip

  可以在 Tailwind 配置文档的 theme.transformOrigin 或 theme.extend.transformOrigin 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        transformOrigin: {
          'top-left-1/3-3/4': '33% 75%',
        }
      }
    }
  }
  

  Tip

  支持任意值 origin-[33%_75%]

CSS transition 是一个简写属性，用以设置过渡动画的相关参数

• Transition Property 基础类用以设置元素的哪一个样式属性需要设置过渡，其中 transition-all 基础类为所有可以插值的样式属性设置过渡
  Tip

  可以在 Tailwind 配置文档的 theme.transitionProperty 或 theme.extend.transitionProperty 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        transitionProperty: {
          'height': 'height',
          'spacing': 'margin, padding',
        }
      }
    }
  }
  

  Tip

  支持任意值 transition-[height]

• Transition Duration 基础类用于设置过渡的持续时间
  Tip

  可以在 Tailwind 配置文档的 theme.transitionDuration 或 theme.extend.transitionDuration 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        transitionDuration: {
          '0': '0ms',
          '2000': '2000ms',
        }
      }
    }
  }
  

  Tip

  支持任意值 transition-[2000ms]

• Transition Timing Function 基础类用于设置过渡的缓动函数
  Tip

  可以在 Tailwind 配置文档的 theme.transitionTimingFunction 或 theme.extend.transitionTimingFunction 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        transitionTimingFunction: {
          'in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
          'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
        }
      }
    }
  }
  

  Tip

  支持任意值 ease-[cubic-bezier(0.95,0.05,0.795,0.035)]

• Transition Delay 基础类用于设置过渡的延迟时间
  Tip

  可以在 Tailwind 配置文档的 theme.transitionDelay 或 theme.extend.transitionDelay 属性中定制

  js

  module.exports = {
    theme: {
      extend: {
        transitionDelay: {
          '0': '0ms',
          '2000': '2000ms',
        }
      }
    }
  }
  

  Tip

  支持任意值 delay-[2000ms]

• Animation 基础类用于设置关键帧动画来实现过渡，Tailwind 提供了 4 种关键帧动画基础类：
  • animate-spin 旋转（可用于加载转圈圈的动效）
  • animate-ping 呼吸灯（可用于消息小红点的提醒）
  • animate-pluse 闪动（可用于网页/卡片的内容加载前，显示的骨架图案）
  • animate-bounce 跳动（可用于下载按钮动效，吸引用户点击）
  Tip

  可以在 Tailwind 配置文档的 theme.animation 或 theme.extend.animation 属性中定制过渡，如果采用关键帧动画，则相应的关键帧的定义需要在 theme.extend.keyFrames 属性中设置

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        animation: {
          wiggle: 'wiggle 1s ease-in-out infinite',
        },
        keyframes: {
          wiggle: {
            '0%, 100%': { transform: 'rotate(-3deg)' },
            '50%': { transform: 'rotate(3deg)' },
          }
        }
      }
    }
  }
  

  Tip

  支持任意值 animate-[wiggle_1s_ease-in-out_infinite]（相应的同名关键帧需要在全局样式里提供）

• Scroll Behavior 基础类用于设置页面的滚动效果
  Scroll Snap 是 CSS 的一个模块，对于容器内的元素进行滚动位置捕抓，并实现强制滚动定位，一般用于实现滚动吸附的效果。以下的基础类所设置的样式属性一般在触屏设备上效果更明显。
• Scroll Snap Type 基础类用于设置容器内元素的滚动位置的捕抓方式：
  • 基础类 .snap-x、.snap-y 或 .snap-both 设置捕抓容器哪个方向上的滚动
  • 基础类 .snap-mandatory（总是强制吸附） 或 .snap-proximity（非强制，只有在达到特定的临界值才吸附）设置是否强制将最近的元素吸附到容器的指定位置
  
  以上两类 class 可以配合使用，以设定在哪个方向上实现那种方式的滚动吸附
• Scroll Snap Align 基础类用于子元素上，以设置该元素吸附到容器的何处
• Scroll Snap Stop 基础类用于子元素上，当用户「大力」滑动时，是否允许多个子元素跳过吸附点（默认允许跳过），可以通过 .snap-always 来启用约束，这样吸附点对于元素都会实行吸附制动停止，避免一次「大力」滑动而滚动过多的元素。
• Scroll Padding 基础类用于设置吸附点距离容器的偏移距离
  Tip

  由于该基础类继承了 Spacing 基础类，所以可以间接在 Tailwind 配置文档的 theme.spacing 或 theme.extend.spacing 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        spacing: {
          '96': '24rem',
        }
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.scrollPadding 或 theme.extend.scrollPadding 属性中定制
  Tip

  支持任意值 scroll-p-[24rem]

• Scroll Margin 基础类用于设置元素距离吸附点的偏移距离
  Tip

  由于该基础类继承了 Spacing 基础类，所以可以间接在 Tailwind 配置文档的 theme.spacing 或 theme.extend.spacing 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        spacing: {
          '96': '24rem',
        }
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.scrollMargin 或 theme.extend.scrollMargin 属性中定制
  Tip

  支持任意值 scroll-m-[24rem]

<!-- 滚动容器设置为捕抓水平滚动，执行强制吸附 -->
<div class="snap-mandatory snap-x ...">
  <!-- 子元素均采用吸附到元素的中间位置 -->
  <div class="snap-center ...">
    <img src="..." />
  </div>
  <div class="snap-center ...">
    <img src="..." />
  </div>
  <div class="snap-center ...">
    <img src="..." />
  </div>
</div>

Cursor 基础类用以设置鼠标指针的样式

module.exports = {
  theme: {
    extend: {
      cursor: {
        'fancy': 'url(hand.cur), pointer',
      }
    }
  }
}

Touch Action 基础类用于设置在触摸屏上用户如何操纵元素，如可触摸滚动的方向以及缩放交互

User Select 基础类用于设置元素可供用户选中的类型，其中 .select-none 基础类禁止用户选中该元素的内容；.select-text 基础类允许用户选中元素的文本内容；.select-all 基础类允许用户通过点击全选元素。

• Accent Color 基础类用于设置表单元素的强调色
  html

  <label>
    <input type="checkbox" class="accent-pink-500" checked> Customized
  </label>
  

  Tip

  支持设置颜色的透明度（目前仅 Firefox 浏览器支持）

  html

  <label>
    <input type="checkbox" class="accent-pink-500" checked> Customized
  </label>
  

  Tip

  由于该基础类继承了 Color 基础类，所以可以间接在 Tailwind 配置文档的 theme.colors 或 theme.extend.colors 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        colors: {
          'regal-blue': '#243c5a',
        },
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.accentColor 或 theme.extend.accentColor 属性中定制
  Tip

  支持任意值 accent-[#50d71e]

• Appearance 基础类用于移除浏览器默认提供的交互控件，只有 .appearance-none 基础类，例如用于下拉选框 <select> 元素可以取消元素默认的箭头图标
• Caret Color 基础类用于设置插入光标（一般在输入型表单中）的颜色
  Tip

  由于该基础类继承了 Color 基础类，所以可以间接在 Tailwind 配置文档的 theme.colors 或 theme.extend.colors 属性中定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        colors: {
          'regal-blue': '#243c5a',
        },
      }
    }
  }
  

  
  也可以直接在 Tailwind 配置文档的 theme.caretColor 或 theme.extend.caretColor 属性中定制
  Tip

  支持任意值 caret-[#50d71e]

• Pointer Events 基础类用于设置图形元素是否可以成为鼠标事件（如点击事件）的对象
  Tip

  一个使用场景是在输入型表单的 SVG 图标上添加 .pointer-events-none 基础类，这样图标就不会响应鼠标事件，鼠标就像穿透了图标，可作用于图标下方的元素。这样图标就可以作为视觉提示，但是表单整体（包括图标）都可以响应点击，获得聚焦从而可以输入

  html

  <div class="relative ...">
    <!-- 该元素不会响应鼠标事件 -->
    <div class="absolute pointer-events-none ...">
      <svg class="absolute ..." viewBox="0 0 20 20" fill="currentColor">
        <path d="..." />
      </svg>
    </div>
    <!-- 鼠标点击上方图标时，可以穿透元素作用于以下元素，从而让输入框获得聚焦，这样点击搜索图标时也可以允许用户输入 -->
    <input type="text" placeholder="Search" class="...">
  </div>
  

• Resize 基础类用于设置文本框/多行表单是否可以调整大小

Will Change 基础类用于提示浏览器元素即将发生的变动（如滚动、transform、内容改变等）情况，可以优化性能。推荐在即将发生变动时添加相应的基础类，然后在变动结束后使用 .will-change-auto 基础类来移除它们

module.exports = {
  theme: {
    extend: {
      willChange: {
        'left-top': 'left, top',
      }
    }
  }
}

• Mix Blend Mode 基础类用于设置元素之间重叠部分的混合方式
• Background Blend Mode 基础类用于设置图片与背景色混合方式

以上两种效果所提供的基础类的具体视觉体验可以查看视频教程

将模糊或颜色偏移等滤镜应用于元素上，这会对内部（子元素）或其背景（背景图或背景色）产生有意思的效果

• Blur 基础类提供高斯模糊滤镜
  Tip

  可以在 Tailwind 配置文档 theme.blur 或 theme.extend.blur 属性中进行定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        blur: {
          xs: '2px',
        }
      }
    }
  }
  

  Tip

  支持任意值 blur-[2px]

• Brightness 基础类提供亮度滤镜
  Tip

  可以在 Tailwind 配置文档 theme.brightness 或 theme.extend.brightness 属性中进行定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        brightness: {
          25: '.25',
          175: '1.75',
        }
      }
    }
  }
  

  Tip

  支持任意值 brightness-[1.75]

• Contrast 基础类提供对比度滤镜
  Tip

  可以在 Tailwind 配置文档 theme.contrast 或 theme.extend.contrast 属性中进行定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        contrast: {
          25: '.25',
        }
      }
    }
  }
  

  Tip

  支持任意值 contrast-[.25]

• Drop Shadow 基础类提供投影滤镜
  Tip

  可以在 Tailwind 配置文档 theme.dropShadow 或 theme.extend.dropShadow 属性中进行定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        dropShadow: {
          '3xl': '0 35px 35px rgba(0, 0, 0, 0.25)',
        }
      }
    }
  }
  

  Tip

  支持任意值 drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)]

• Grayscale 基础类提供灰阶滤镜
  Tip

  可以在 Tailwind 配置文档 theme.grayscale 或 theme.extend.grayscale 属性中进行定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        grayscale: {
          50: '50%',
        }
      }
    }
  }
  

  Tip

  支持任意值 grayscale-[50%]

• Hue Rotate 基础类提供色调滤镜
  Tip

  可以在基础类前添加 - 将色调转换为负值

  Tip

  可以在 Tailwind 配置文档 theme.hueRotate 或 theme.extend.hueRotate 属性中进行定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        hueRotate: {
          '-270': '-270deg',
          270: '270deg',
        }
      }
    }
  }
  

  Tip

  支持任意值 hue-rotate-[270deg]

• Invert 基础类提供反转颜色滤镜
  Tip

  可以在 Tailwind 配置文档 theme.invert 或 theme.extend.invert 属性中进行定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        invert: {
          25: '.25',
          50: '.5',
          75: '.75',
        }
      }
    }
  }
  

  Tip

  支持任意值 invert-[.25]

• Saturate 基础类提供饱和度滤镜
  Tip

  可以在 Tailwind 配置文档 theme.saturate 或 theme.extend.saturate 属性中进行定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        saturate: {
          25: '.25',
          75: '.75',
        }
      }
    }
  }
  

  Tip

  支持任意值 saturate-[.25]

• Sepia 基础类提供棕褐色滤镜（将图片转换为旧照片的风格）
  Tip

  可以在 Tailwind 配置文档 theme.sepia 或 theme.extend.sepia 属性中进行定制

  tailwind.config.js

  js

  module.exports = {
    theme: {
      extend: {
        sepia: {
          25: '.25',
          75: '.75',
        }
      }
    }
  }
  

  Tip

  支持任意值 sepia-[.25]